YJSTAR

인스턴스 프로퍼티 인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다. class Person { constructor(name) { // 인스턴스 프로퍼티 this.name = name; } } const me = new Person('Yu'); console.log(me);// Person {name: 'Yu'} "클래스의 인스턴스 생성 과정"에서 살펴보았듯이 constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 클래스가 암묵적으로 생성한 인스턴스인 빈 객체가 바인딩되어 있다. 생성자 함수에서 생성자 함수가 생성할 인스턴스의 프로퍼티를 정의하는 것과 마찬가지로 constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다. 이로써 클래스가..

new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 클래스의 내부 메서드 [[Construct]]가 호출된다. 클래스는 new 연산자 없이 호출할 수 없다. 이때 "생성자 함수의 인스턴스 생성 과정"에서 살펴본 바와 유사하게 다음과 같이 과정을 거쳐 인스턴스가 생성된다. 1. 인스턴스 생성과 this 바인딩 new 연산자와 함께 클래스를 호출하면 constructor의 내부 코드가 실행되기에 앞서 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 (아직 완성되지는 않았지만) 클래스가 생성한 인스턴스다. 이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 따라서..

클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다. 클래스 정의에 대한 새로운 제안 사양 ECMAScript 사양(ES11/ECMAScript 2020)에 따르면 인스턴스 프로퍼티는 반드시 constructor 내부에서 정의해야 한다. 하지만, 클래스 몸체에 메서드뿐만이 아니라 프로퍼티를 직접 정의할 수 있는 새로운 표준 사양이 제안되어 있다. 이 제안 사양에 의해 머지않아 클래스 몸체에서 메서드뿐만 아니라 프로퍼티도 정의할 수 있게 될 것으로 보인다(현재 크롬과 같은 모던 브라우저에서는 이미 사용 가능하다). 이에 대해서는 "클래스 필드 정의 제안"에서 살펴볼 것이다. con..

클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다. class Person {} // 인스턴스 생성 const me = new Person(); console.log(me);// Person {} 함수는 new 연산자의 사용 여부에 따라 일반 함수로 호출되거나 인스턴스 생성을 위한 생성자 함수로 호출되지만 클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출해야 한다. class Person {} // 클래스를 new 연산자 없이 호출하면 타입 에러가 발생한다. const me = Person(); // TypeError: Class constructor Foo cannot be invoked without 'new' 클래스 표현식으로 정의된..

클래스는 함수로 평가된다. // 클래스 선언문 class Person {} console.log(typeof Person);// function 클래스는 선언문으로 정의한 클래스는 함수 선언문과 같이 소스코드 평가 과정, 즉 런타임 이전에 먼저 평가되어 함수 객체를 생성한다. 이때 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수, 즉 constructor다. 생성자 함수로서 호출할 수 있는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍(pair)으로 존재하기 때문이다. 단, 클래스는 클래스 정의 이전에 참조할 수 없다. const Person = ''; { // 호이스팅이 발..

클래스는 class 키워드를 사용하여 정의한다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. 파스칼 케이스를 사용하지 않아도 에러가 발생하지는 않는다. // 클래스 선언문 class Person {} 일반적이지는 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. 이때 클래스는 함수와 마찬가지로 이름을 가질 수도 있고, 갖지 않을 수도 있다. // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; 클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 즉, 클래스는 일급 객체로서 다음과 같은 특징을 갖는다. ..

자바스크립트는 프로토타입 기반(prototype based) 객체지향 언어다. 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 객체지향 언어는 클래스는 필요 없는(class free) 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My..

아래는 클로저를 사용할 때 자주 발생할 수 있는 실수를 보여주는 예제다. var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function () { return 1; }// ① } for (var j = 0; j < funcs.length; j++) { console.log(funcs[j]());// ② } 첫 번째 for 문의 코드 블록 내(①)에서 함수가 funcs 배열의 요소로 추가된다. 그리고 두 번째 for 문의 코드 블록 내(②)에서 funcs 배열의 요소로 추가된 함수를 순차적으로 호출한다. 이때 funcs 배열의 요소로 추가된 3개의 함수가 0, 1, 2를 반환할 것으로 기대했다면 아쉽지만 결과는 그렇지 않다. for 문의 변수 선언문에서..