모던 자바스크립트 Deep Dive (25장 ~ 26장)

🔰클래스

클래스는 프로토타입의 문법적 설탕인가?

자바스크립트는 프로토타입 기반 객체지향 언어로 클래스가 필요 없지만, 클래스 기반 언어에 익숙한 프로그래머들을 위해 ES6에 클래스가 도입되었다.

자바스크립트의 클래스는 사실 함수이며, 프로토타입 기반이다.

클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하지만 클래스는 더 엄격하고 새로운 기능을 제공한다.

• 클래스를 new 연산자 없이 호출하면 에러가 발생한다.
• 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
• 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다.
• 클래스 내의 모든 코드에는 암묵적으로 strict mode가 강제된다.
• 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false다. 즉, 열거할 수 없다.

클래스는 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 보는 것이 합당하다.

클래스 정의

클래스는 class 키워드로 정의한다. 파스칼 케이스를 사용하는 것이 일반적이다.

함수와 마찬가지로 표현식과 선언문 모두 가능하다.

클래스는 함수로, 값으로 사용할 수 있는 일급 객체다.

클래스 몸체에는 constructor, 프로토타입 메서드, 정적 메서드를 정의할 수 있다.

클래스와 생성자 함수의 정의 방식은 형태적인 면에서 매우 유사하다.

클래스 호이스팅

클래스 선언문으로 정의한 클래스는 런타임 이전에 먼저 평가되어 함수 객체를 생성한다. 이 함수 객체는 constructor이므로 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. 단, 클래스는 클래스 정의 이전에 참조할 수 없다(TDZ).

인스턴스 생성

클래스는 new 연산자와 함께 호출하여 인스턴스를 생성한다.

기명 함수 표현식과 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능하다.

메서드

constructor, 프로토타입 메서드, 정적 메서드가 있다.

constructor	프로토타입 메서드	정적 메서드
인스턴스를 생성하고 초기화한다. 이름을 변경할 수 없다. 클래스 내에 최대 한 개만 존재할 수 있다. 생략하면 빈 constructor가 암묵적으로 정의된다. 생성자 함수와 마찬가지로 별도의 반환문을 갖지 않아야 한다. constructor는 메서드로 해석되지 않고 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다. 즉, 클래스 정의가 평가되면 constructor에 기술된 동작을 하는 함수 객체가 생성된다.	클래스 몸체에 정의한 메서드는 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다. 인스턴스는 프로토타입 메서드를 상속받아 사용할 수 있다. 메서드 내부에서 인스턴스 프로퍼티를 참조할 수 있다. 인스턴스로 호출하면 프로토타입 메서드 내부의 this는 인스턴스를 가리킨다.	클래스는 함수 객체로 자신의 프로퍼티 및 메서드를 소유할 수 있다. 따라서 정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드다. 메서드에 static 키워드를 붙이면 정적 메서드가 된다. 정적 메서드는 인스턴스의 프로토타입 체인 상에 존재하지 않으므로 인스턴스로 호출할 수 없다. 메서드 내부에서 인스턴스 프로퍼티를 참조할 수 없다. 클래스로 호출하면 정적 메서드 내부의 this는 인스턴스가 아닌 클래스를 가리킨다. 애플리케이션 전역에서 사용할 유틸리티 함수를 전역 함수로 정의하지 않고 메서드로 구조화할 때 유용하다.

🍎 ES6에 추가된 표준 빌트인 객체 Number의 정적 메서드
빌트인 전역 함수인 isFinite, isNaN, parseFloat, parseInt 등이 Number의 정적 메서드로 추가 구현되었다. Number.isFinite, Number.isNaN, Number.parseFloat, Number.parseInt는 빌트인 전역 함수보다 엄격하다.

클래스 메서드는 다음과 같은 특징이 있다.

• 메서드 축약 표현을 사용한다.
• 객체 리터럴과 달리 콤마(,)가 필요 없다.
• 암묵적으로 strict mode로 실행된다.
• for ... in 문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼티 어트리뷰트 [[Enumerable]] 값이 false다.
• 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. 따라서 new 연산자로 호출할 수 없다.

클래스의 인스턴스 생성 과정

1. new 연산자와 함께 클래스를 호출하면 constructor 내부 코드가 실행되기 앞서 암묵적으로 빈 객체(생성할 인스턴스)가 생성된다. 이 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정되고 this에 바인딩된다.
2. constructor 내부 코드가 실행되어 this에 바인딩된 인스턴스를 초기화한다. 프로퍼티를 추가하거나 초기화한다.
3. 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

프로퍼티

인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다. 언제나 public하다.

접근자 프로퍼티는 자체적으로 값([[Value]])를 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된다. get 키워드를 사용하는 getter는 인스턴스 프로퍼티에 접근할 때마다 프로퍼티 값을 조작하거나 별도의 행위를 한다. set 키워드를 사용하는 setter는 인스턴스 프로퍼티에 값을 할당할 때마다 프로퍼티 값을 조작하거나 별도의 행위를 한다. 접근자 프로퍼티는 인스턴스 프로퍼티가 아닌 프로토타입의 프로퍼티다.

클래스 필드는 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다. 자바스크립트에서도 인스턴스 프로퍼티를 마치 클래스 기반 객체지향 언어의 클래스 필드처럼 정의할 수 있다(class field declarations). 클래스 몸체에 클래스 필드를 정의하는 경우 this에 클래스 필드를 바인딩하면 안된다. this는 클래스의 메서드 내부에서만 유효하다. 클래스 필드를 참조하는 경우 this를 반드시 사용해야 한다. 초기값을 할당하지 않으면 undefined다. 클래스 필드로 함수를 할당할 수도 있지만, 이 함수는 프로토타입 메서드가 아닌 인스턴스 메서드가 된다. 모든 클래스 필드는 인스턴스 프로퍼티가 되기 때문이다.

#을 사용하여 필드를 private 필드로 만들 수 있다. private 필드는 반드시 클래스 몸체에 정의해야 한다. constructor에 정의하면 에러가 발생한다.

static 키워드를 사용하여 정적 필드를 정의할 수 있다.

상속에 의한 클래스 확장

프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 개념이지만 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것이다.

extends 키워드로 상속할 수 있다. 클래스뿐만 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있어 동적으로 상속 대상을 결정할 수 있다. 이 특징을 이용하여 표준 빌트인 생성자 함수를 확장할 수 있다.

인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성한다. 이를 통해 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다.

하위클래스의 constructor를 생략하면 super를 호출하는 constructor가 암묵적으로 정의된다.

super 키워드는 함수처럼 호출하거나 식별자처럼 참조할 수 있는 특수 키워드다. super를 호출하면 상위클래스의 constructor를 호출한다. 하위클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다. super는 반드시 하위클래스의 constructor에서만 호출해야 한다. super를 참조하면 상위클래스의 메서드를 호출할 수 있다. [[HomeObject]]를 갖는 함수만이 super를 참조할 수 있고, ES6 메서드 축약 표현으로 정의된 함수만이 [[HomeObject]]를 갖는다.

자바스크립트 엔진은 클래스를 평가할 때 상위클래스와 하위클래스를 구분하기 위해 'base' 또는 'derived'를 값으로 갖는 내부 슬롯 [[ConstructorKind]]가 있다. 다른 클래스를 상속받는 하위클래스는 'derived'로 설정된다. 이 설정값에 따라 new 연산자로 클래스를 호출했을 때 동작이 달라진다.

상속 관계에 있는 두 클래스가 협력하며 인스턴스를 생성하는 과정은 단독으로 인스턴스를 생성하는 것보다 더 복잡하다.

1. 하위클래스는 자신이 직접 인스턴스를 생성하지 않고 상위클래스에게 인스턴스 생성을 위임한다. 따라서 하위클래스의 constructor에서 반드시 super를 호출해야 한다. super가 호출되면 상위클래스의 constructor가 호출된다. 즉, 상위클래스가 평가되어 생성된 함수 객체 코드가 실행된다.
2. 상위클래스의 constructor 내부 코드를 실행하기 전, 암묵적으로 빈 객체(인스턴스)를 생성한다. 상위클래스가 생성한 인스턴스지만 new 연산자와 함께 호출된 클래스는 하위클래스이므로 new.target은 하위클래슬르 가리킨다. 따라서 인스턴스는 new.target이 가리키는 하위클래스가 생성한 것으로 처리된다.
3. 상위 클래스의 constructor가 실행되어 this에 바인딩된 인스턴스를 초기화한다.
4. super 호출이 종료되면 제어 흐름이 하위클래스의 constructor로 돌아오고 super가 반환한 인스턴스가 this에 바인딩된다. 이처럼 super가 호출되지 않으면 인스턴스가 생성되지 않으며 this 바인딩도 할 수 없다.
5. 하위 클래스의 constructor가 super 호출문 이후부터 실행되며 인스턴스를 초기화한다.
6. 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.

🔰ES6 함수의 추가 기능

함수의 구분

ES6 이전까지 자바스크립트 함수는 일반 함수, 생성자 함수, 메서드, 콜백 함수 등 다양한 목적으로 사용되었다. 즉, callable이면서 constructor였다. 이는 편리하지만 실수를 유발할 수 있으며 성능 면에서 손해다. 함수가 constructor라는 것은 prototype 프로퍼티를 가지며 프로토타입 객체를 생성한다는 것을 의미한다. 다시말해 ES6 이전의 모든 함수는 생성자 함수로 호출되지 않아도 프로토타입 객체를 생성함으로써 성능에 악영향을 준다.

ES6부터는 함수를 사용 목적에 따라 일반 함수, 메서드, 화살표 함수로 구분한다.

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. 인스턴스를 생성할 수 없는 non-constructor다. 따라서 prototype 프로퍼티가 없고 프로토타입 객체도 생성하지 않는다.

자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. 따라서 super 키워드를 사용할 수 있다.

화살표 함수

function 키워드 대신 화살표(=>)를 사용하여 더 간략하게 함수를 정의한다. 표현만 간략한 것이 아닌 내부 동작도 기존의 함수보다 축소되었다. 콜백 함수 내부에서 this를 사용하는 경우 유용하다.

함수 표현식으로 정의해야 한다. 함수 몸체 내부의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다.

일반 함수와의 차이는 다음과 같다.

• 인스턴스를 생성할 수 없는 non-constructor다. 따라서 prototype 프로퍼티가 없고 프로토타입 객체도 생성하지 않는다.
• 중복된 매개변수 이름을 선언할 수 없다. 일반 함수는 strict mode가 아닐 때 중복된 매개변수 이름을 선언해도 에러가 발생하지 않는다.
• 함수 자체의 this, arguments, super, new.target 바인딩이 없다. 따라서 화살표 함수 내부에서 해당 값을 참조하면 스코프 체인을 통해 상위 스코프의 값을 탐색한다.

화살표 함수의 this는 콜백 함수 내부의 this가 외부 함수 this와 다르기때문에 발생하는 문제를 해결하기 위해 일반 함수 this와 다르게 동작하도록 설계되었다. 화살표 함수는 자체 this 바인딩이 없어 상위 스코프의 this를 참조한다(lexical this).

lexical this때문에 메서드를 화살표 함수로 정의하는 것은 피해야 한다. 화살표 함수로 정의된 전역 객체의 메서드의 경우 내부에서 this를 사용하면 메서드를 호출했을 때 해당 객체가 아닌 전역 객체를 가리킨다. 따라서 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다. 프로토타입 객체의 프로퍼티에 화살표 함수를 할당하는 경우도 동일한 문제가 발생한다.

화살표 함수로 가변 인자 함수를 구현할 때는 반드시 Rest 파라미터(...)를 사용해야 한다.

Rest 파라미터

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. arguments 객체는 유사 배열 객체이므로 배열 메서드를 사용하려면 배열로 변환해야 했지만, Rest 파라미터는 배열로 직접 전달받기 때문에 번거로움이 덜하다.

일반 매개변수와 함께 사용할 수 있다. 함수에 전달된 인수들은 매개변수와 Rest 파라미터에 순차적으로 할당된다.

Rest 파라미터는 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당되므로 반드시 마지막 파라미터야 한다.

단 하나만 선언할 수 있다.

함수 정의 시 선언한 매개변수 개수를 나타내는 length 프로퍼티에 영향을 주지 않는다.

매개변수 기본값

자바스크립트 엔진이 매개변수 개수와 인수 개수를 확인하지 않으므로 서로 개수가 달라도 에러가 발생하지 않는다. 인수가 전달되지 않은 매개변수 값은 undefined이므로 의도치 않은 결과가 나올 수 있다.

ES6에 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 확인 및 초기화를 간소화할 수 있다.

매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효하다.

Rest 파라미터에는 기본값을 지정할 수 없다.

함수 정의 시 선언한 매개변수 개수를 나타내는 length 프로퍼티에 영향을 주지 않는다. arguments 객체에도 영향을 주지 않는다.