Skip to content

Latest commit

 

History

History
190 lines (168 loc) · 12.5 KB

classInstance.md

File metadata and controls

190 lines (168 loc) · 12.5 KB

클래스 인스턴스

사전지식

  • 클래스에는 2 종류의 멤버가 있다. 하나는 멤버 변수이고 다른 하나는 멤버 메소드이다.
  • 멤버를 선언하는 방식에는 두 가지가 있는데 static 키워드를 가진 멤버와 static 키워드를 가지지 않은 멤버로 구분된다.

클래스 예약어

class Class {

}
  • 클래스에 멤버 변수를 만들어 보자.
  • 소문자 class는 자바스크립트에서 클래스를 만드는 자바스크립트 문법에 해당하는 단어로 이런 자바스크립트 문법으로 사용되는 키워드를 예약어라고 한다. 예약어는 문법을 나타내는데 사용하므로 변수명이나 클래스명 함수명 등으로 사용할 수 없다.
  • 하지만 대문자가 들어갔다면 class 키워드와는 다른 글자가 되어 자바스크립트 예약어가 아니라서 사용할 수 있다.

클래스 멤버에 접근하는 방법

가능한 문법

class Class {
  memberVar = 1;
}
  • 자바스크립트에서 클래스에 멤버를 접근 할 때는 this.을 사용하지만, 클래스에서 멤버를 선언할 때는 this.를 사용하지 않고 멤버명만 적는다.

불가능한 문법

class Class {
  this.memberVar = 1;
}
  • 자바스크립트의 오브젝트 내에서 보통 멤버를 접근할 때는 this.멤버의 방식을 사용하지만 this.를 사용할 때는 클래스 내에 메소드 없이 직접 사용할 수는 없다.
  • 자바스크립트 클래스에서 사용할 수 있는 문법은 클래스 내에 직접적으로 this를 사용할 수 없고, 클래스 내에 메소드를 내부에서 this를 사용해야 한다.

가능한 문법

class Class {
  method() {
    this.memberVar = 1;
  }
}
  • 자바스크립트의 클래스에서 this. 문법을 사용하기 위해서는 메소드를 만들고 메소드 내부에서 this.을 사용해 주어야 한다.

인스턴스화 되지 않은 클래스

class Class {
  method() {
    console.log('run method');
  }
}
  • 위의 코드를 Class.method()로 사용해 보자. 그럼 Class에는 method가 없다고 나올 것이다. Class.method is not a function와 같은 에러가 발생한다.
  • 기본적으로 자바스크립트의 메소드를 사용하기 위해서는 인스턴스화 해 줘야 한다. 인스턴스화란 클래스를 기반으로 객체를 만드는 것이다. 물론 자바스크립트의 클래스도 객체이다. 자바스크립트에서 객체는 .으로 대상의 내부 멤버에 접근을 할 수 있는데, 인스턴스화 하지 않은 클래스도 .으로 내부의 멤버에 접근할 수 있다. 하지만 클래스 문법 내부에 정의한 멤버가 아닌, 클래스라는 자바스크립트 오브젝트가 디폴트로 가진 멤버에 접근하도록 한다.
  • 위의 코드에서는 method라는 메소드를 정의한 것은 Class.method()로 사용할 수 있는 것이 아닌, 자바스크립트 클래스가 가진 메소드에 접근을 하는 것이다.
  • 예를 들어 Class.toLocaleString()의 경우에는 자바스크립트에서 클래스라는 객체에서 기본적으로 제공하는 멤버에 접근할 수 있도록 한다. 물론 클래스 객체에 직접 멤버를 추가할 수도 있지만 class 클래스명 { /* 클래스 내부의 멤버 조작 코드 */ }에서 클래스 내부 코드에서 멤버를 조작하는 코드로 추가하는 것이 아니라, 클래스명.멤버명으로 선언해야 클래스라는 객체에 직접 멤버를 추가할 수 있다.

인스턴스화 된 클래스

class Class {
  method() {
    console.log('run method');
  }
}
  • 클래스를 인스턴스로 사용하기 위해서는 new Class()라는 문법을 사용해야 한다. 그러면 class 클래스명 { /* 클래스 내부의 멤버 조작 코드 */ }에서 클래스 내부에서 정의한 멤버들을 사용할 수 있다. Class.method()는 멤버가 없다고 나오지만, (new Class()).method()는 클래스 문법으로 정의된 멤버의 실행이 가능하다.
  • 인스턴스의 의미는 설계도를 바탕으로 만든 무언가를 뜻한다. 자바스크립트 클래스는 객체를 만들기 위한 주형(틀)을 제공한다. 일반적으로 클래스는 붕어빵 틀, 클래스로 만드는 붕어빵으로 비유를 하는데 자바스크립트 클래스 문법으로 인스턴스를 만들어내는 것은 클래스에 정의된 멤버들을 사용할 수 있는 객체를 만들어 내는 것이다.
  • 클래스를 인스턴스화 하지 않고 사용했다면 Class.method()으로 클래스 문법 내부에 설계한 멤버를 사용할 수 없지만, 클래스를 인스턴스화 했다면 클래스 문법 내부에 설계한 멤버를 사용할 수 있는 대상이 된 것으로 new Class는 클래스 내부에 정의된 설계도를 사용할 수 있도록 만드는 인스턴스화 키워드이다.
  • 자바스크립트에서 모든 대상은 값은 . 키워드로 객체로 변환될 수 있지만 일반적으로는 많은 언어에서 클래스를 기반으로 클래스 내부에 설계된 대상을 객체라고 부른다. 자바스크립트에서 모든 값은 객체로 변환될 수 있지만, 클래스를 new 키워드로 인스턴스화 한 것은 좀 더 일반적인 프로그래밍 언어 불리는 객체이다.

new 키워드

  • 자바스크립트에서 new 키워드는 새로운 객체를 만들어 낼 때 사용하는 키워드이다.
  • 클래스에서 정의한 멤버(멤버 변수나 멤버 메소드)는 클래스를 new 키워드로 인스턴스화 했을 때 인스턴스화된_클래스.멤버명의 방식으로 사용할 수 있다.
class Class {
  method() {
    console.log('run method');
  }
}
  • Class.member()는 불가능하지만, (new Class).member()는 가능하다.
  • 인스턴스화 할 때, 객체의 생성자의 인자로 전달할 값이 있다면 (new Class(인자1, 인자2 /* ... */))의 방식을 사용하지만, 전달할 인자가 없을 때는 (new Class)으로 클래스명 뒤에 바로 붙는 괄호를 생략할 수 있다.

인스턴스 멤버의 초기화

  • 자바스크립트에서 인스턴스의 멤버를 생성하는 방법은 인스턴스를 만들어 내는 주형이 되는 클래스에서 멤버를 만드는 코드를 정의해 줘야 한다. 이 때 클래스의 코드 정의 영역에서 그 하위 스코프가 아닌 영역에서 this.멤버명 없이 멤버를 선언하는 방법이 있고, 생성자에 this.멤버명의 방식으로 사용할 수도 있다. 두 방식 모두 동일하게 인스턴스 생성과 동시에 멤버가 초기화된다는 특성이 있다.
class Class {
  member = 10;
}
class Class {
  constructor() {
    this.member = 10;
  }
}
  • 위 두 코드는 동일하게 클래스를 인스턴스로 만들 때 member 멤버를 생성하고 생성된 멤버를 10으로 초기화한다.
  • 생성자 함수인 constructor 메소드가 아닌 다른 이름의 메소드에 this.멤버명을 정의하면 인스턴스 생성과 동시에 멤버가 생성되지 않고, 해당 메소드를 실행해야 멤버가 추가로 생성된다.
class Class {
  method() {
    this.member = 10;
  }
}
const obj = (new Class);
console.log(obj.member);
obj.method();
console.log(obj.member);
  • 첫 번째 obj.member에서는 undefined가 나온다.
  • 두 번째 obj.member는 멤버를 생성하는 메소드가 실행된 이후이므로 멤버 초기화 코드가 실행되어 10이 된다.

인스턴스간의 독립성

  • new 키워드는 특별한 특징을 갖는데, 인스턴스화 된 객체는 서로 다른 대상이 된다는 것이다. 서로 다른 대상이란 말은 서로 독립적이란 것이고, 엄밀히는 객체 내부의 멤버를 공유하지 않는다는 의미이다.
class Class {
  member = 0;

  addOne() {
    this.member = this.member + 1;
  }
}

const obj1 = new Class;
const obj2 = new Class;

obj2.addOne();
obj1.addOne();
obj2.addOne();
obj2.addOne();
obj1.addOne();

console.log(obj1.member);
console.log(obj2.member);
  • 위의 예제에서 동일한 클래스를 인스턴스화한 두 개의 오브젝트 obj1, obj2에 대해 obj1는 addOne()을 두 번 obj2는 3번을 사용하였다. addOne()의 순서를 달리하였지만, 정확히 각각의 객체에서 사용한 멤버 만큼 값이 더해진 것을 확인할 수 있다.
  • 인스턴스화 된 객체 끼리는 서로 멤버를 공유하지 않는 독립된 대상임을 알 수 있다.

클래스와 function 함수의 관계성

class Class {
  constructor(arg1, arg2) {
    this.member1 = arg1;
    this.member2 = arg2;
  }
}

const obj = new Class(100, 200);
console.log(obj.member1);
console.log(obj.member2);
  • constructor 메소드는 클래스가 인스턴스화 될 때 디폴트로 실행되는 객체이다. new Class를 사용하면 클래스가 인스턴스화 되면서 특별히 메소드를 실행을 하지 않더라도 constructor 메소드가 실행된다. 이 때 new Class(인자1, 인자2 /* ... */)로 클래스명 바로 뒤에 괄호에 인자를 넣어주면 constructor 메소드로 인자가 전달되어 constructor(인자1, 인자2 /* ... */)가 실행된다.
  • 자바스크립트에서 클래스 문법이 도입되기 전에 자바스크립트의 클래스와 비슷한 사용을 위해서 function 함수를 클래스로 하여 인스턴스를 만드는 방법이 있었다.
const classFunction = function (arg1, arg2) {
  this.member1 = arg1;
  this.member2 = arg2;
};

const obj = (new classFunction(100, 200));
console.log(obj.member1);
console.log(obj.member2);
  • 위의 코드를 보면, new 키워드로 function 함수를 실행해서 인스턴스를 만드는 것은 function 함수를 실행하면서 function 함수 안에 있는 코드를 실행하면서 this.멤버 코드를 실행하여 인스턴스가 갖는 새로운 멤버를 만드는 것이다. 이것은 자바스크립트 클래스 문법에 new Class의 코드를 사용할 때 constructor 함수를 실행하는 것과 똑같은 것을 알 수 있다. 곧, 자바스크립트에서 클래스 문법은 클래스 내의 constructor라는 함수를 new 키워드로 실행하는 것과 동일한 것이다.

멤버를 this로 접근해야 하는 이유?

class Class {
  constructor() {
    this.member = 0;
  }

  addOne() {
    this.member = this.member + 1;
  }
}

const obj = (new Class);
obj.addOne();
obj.addOne();
obj.addOne();
console.log(obj.member);
  • this는 코드를 실행하고 있는 객체를 의미한다. (this는 this 코드를 실행하고 있는 객체를 찾으며 객체를 찾았다면 해당 객체를 this가 가리키는 대상으로 한다. 다른 프로그래밍 언어에서 this가 가리키는 객체가 고정되어 있는 반면 자바스크립트의 this는 코드를 실행하고 있는 객체를 탐색하기 때문에 코드가 어떤 객체 내에서 실행되고 있느냐에 따라 가리키는 객체가 달라지는 경우가 생길 수 있다.)
  • new 키워드로 인스턴스를 만들 때, 생성자 함수가 실행된다고 하였다. 그러면 생성자 함수 내의 this.멤버 코드에서 this는 새롭게 생성된 인스턴스를 가리키게 되고, 새롭게 생성된 인스턴스에서 .멤버로 접근할 수 있는 객체의 속성을 추가한다.
  • 클래스의 메소드는 생성자 함수에서 this.method = () => { /* ... */}를 실행하는 것을 다르게 표현한 문법이다. 위의 예제 코드에서는 addOne이라는 메소드는 인스턴스로 실행될 때 생성자 함수에서 this.addOne = () => { this.member = this.member + 1; }의 코드를 실행한 것과 같다. 인스턴스를 가라키는 this에 addOne라는 객체의 속성을 추가하였고 해당 속성의 값으로 함수를 할당하였다.
  • obj.addOne()는 인스턴스가 가지고 있는 addOne 속성에 든 함수를 실행한다. 그 내부의 코드가 this.member = this.member + 1이다. 현재 인스턴스 this가 가지고 있는 속성 member의 값에 1을 더하는 코드이다. 그리고 더한 결과를 다시 인스턴스의 member 속성에 할당하였다. 이러한 원리로 addOne() 메소드가 실행될 때마다 member의 값이 1씩 증가하게 된다.
  • 멤버를 this로 접근하는 이유는 객체를 생성할 때 this가 실행이 되고 생성된 객체 내에서 실행된 this이므로 this가 가리키는 대상이 새로 생성된 인스턴스를 가리키는 원리를 사용하려고 하기 때문이다.