자바스크립트 기술면접 4편

• 생성자 함수(constructor)

new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수

생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다.

• this

this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수(self-referencing variable)이다.

this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

• this 바인딩
  

• new 연산자와 함께 생성자 함수를 호출하는 경우 동작 과정

1. 인스턴스 생성과 this 바인딩

   암묵적으로 빈 객체가 생성되고, 이 객체가 생성자 함수가 생성한 인스턴스이다. 이 빈 객체가 this에 바인딩된다. 이 처리는 런타임 이전에 실행된다.

2. 인스턴스 초기화(옵션)

   생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되면서 인스턴스를 초기화한다. 이 처리는 개발자가 기술한다.

3. 인스턴스 반환

   생성자 함수 내부의 모든 처리가 끝나면 this가 암묵적으로 반환된다.

• 내부 메서드 [[Call]]과 [[Construct]]

함수가 일반 함수로서 호출되면 함수 객체의 내부 메서드 [[Call]]이 호출되고, new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 [[Construct]]가 호출된다.

callable: 내부 메서드 [[Call]]을 갖는 함수 객체(함수는 반드시 callable)

constructor: 내부 메서드 [[Construct]]를 갖는 함수 객체, 생성자 함수로서 호출할 수 있는 함수(모든 함수가 constructor인 것은 아니다.)

ex) 함수 선언문, 함수 표현식, 클래스

non-constructor: 객체를 생성자 함수로서 호출할 수 없는 함수

ex) 메서드(ES6 메서드 축약 표현), 화살표 함수

⇒ 모든 함수는 호출할 수 있지만, 모든 함수 객체를 생성자 함수로서 호출할 수 있는 것은 아니다.

• ECMAScript 사양에서의 메서드

ES6 메서드 축약 표현만을 의미

• 일급 객체의 조건

1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에게 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

⇒ 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 것이다.

• 함수의 데이터 프로퍼티

1. arguments: 함수 호출 시 인수들의 정보를 담고 있는 순회 가능한(iterable) 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용된다.

   ⇒ arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

2. caller: ECMAScript 비표준 프로퍼티, 함수 자신을 호출한 함수

3. length: 함수를 정의할 때 선언한 매개변수의 개수

   ⇒ arguments 객체의 length 프로퍼티는 인수(argument)의 개수, 함수 객체의 length 프로퍼티는 매개변수(parameter)의 개수를 가리킨다.

4. name: 함수의 이름

5. prototype: 생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor만이 소유하는 프로퍼티이다.

• 함수의 구성요소

파라미터(parameter) === 매개변수 === 인자

인수(argument)

• 객체 지향 프로그래밍(Object Oriented Programming, OOP)

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

• 추상화(abstraction)

다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하려는 것

• 객체 ⇒ 자료구조

상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.

• 상속(inheritance)

객체 지향 프로그래밍의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다.

상속은 코드의 재사용이란 관점에서 매우 유용하다.

• 프로토타입 객체(프로토타입)

객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 상위 객체로부터 하위 객체에게 자신의 프로퍼티를 제공한다. 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

• 프로토타입의 생성시점

프로토타입은 생성자 함수가 생성되는 시점에 함께 생성된다.
프로토타입과 생성자 함수는 언제나 쌍(pair)으로 존재하기 때문이다.

• 전역객체

전역 객체는 코드가 실행되기 이전단계에 자바스크립트 엔진에 의해 생성되는 특수한 객체, 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이드 환경(Node.js)에서는 global 객체를 의미한다.

• 프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다.

자바스크립트 엔진은 프로토타입 체인을 따라 프로퍼티/메서드를 검색한다.

프로토타입 체인은 자바스크립트가 객체지향 프로그래밍에서 상속을 구현하는 매커니즘이다.

프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘이다.

• 스코프 체인

프로퍼티가 아닌 식별자는 스코프 체인에서 검색한다.

스코프 체인은 식별자 검색을 위한 매커니즘이다.

• instanceof 연산자

객체 instanceof 생성자 함수

우변 객체가 좌변 객체의 프로토타입 체인 상에 존재하면 true, 아니면 false

• Object.create 메서드

Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 만든다.

• 정적 프로퍼티/메서드

인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드를 말한다.

만약 인스턴스/프토토타입 메서드 내에서 this를 사용하지 않는다면 그 메서드는 정적 메서드로 변경할 수 있다.

• in 연산자

key in object

ex) 'name' in person

객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.

in 연산자는 확인 대상 객체 뿐만아니라 상속받은 모든 프로토타입의 프로퍼티를 확인한다.