요약 정리는 못 참지 않을까요? (3)

⚡ 프로퍼티 어트리뷰트가 뭔가요?

 

프로퍼티 어트리뷰트란 자바스크립트 엔진이 관리하는 내부 상태값입니다.

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를
기본값으로 정의하고 이 기본값에는

1. 프로퍼티의 값 (value)
2. 값의 갱신 가능 여부 (writable)
3. 열거 가능 여부 (enumerable)
4. 재정의 가능 여부 (configurable)

이 있습니다.

이 프로퍼티 어트리뷰트는 직접 접근할 수 없지만
Object.getOwnPropertyDescriptor 메서드를 이용하면 간접적으로 확인할 수 있습니다.

 

---

 

⚡ 데이터 프로퍼티랑 접근자 프로퍼티에 대해 말해주세요

 

데이터 프로퍼티는 키와 값으로 구성된 일반적인 프로퍼티입니다.
데이터 프로퍼티는 value, Writable, Enumerable, Configurable 과 같은 프로퍼티 어트리뷰트를 가집니다.

반면 접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을
읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티입니다.
접근자 프로퍼티는 get,set,enumerable,configurable과 같은 프로퍼티 어트리뷰트를 가집니다.

 

---

 

⚡ 접근자 프로퍼티 get의 동작 과정을 설명해주세요

 

접근자 프로퍼티 get의 동작 과정은 다음과 같습니다.

1. 프로퍼티 키가 유효한지 확인 합니다
2. 프로토타입 체인에서 프로퍼티를 검색합니다.
3. 검색된 프로퍼티가 접근자 프로퍼티인지 확인합니다.
4. getter 함수를 호출합니다.

 

---

 

⚡ 접근자 프로퍼티와 데이터 프로퍼티는 어떻게 구별하나요?

 

Object.getOwnpropertyDescriptor 메서드를 이용하면 알 수 있습니다.
반환받은 프로퍼티 디스크립터 객체의 프로퍼티가 서로 다른것을 확인할 수 있습니다.

 

---

 

⚡ 프로퍼티 정의가 뭔가요?

 

프로퍼티 정의란 새로운 프로퍼티를 추가하면서
프로퍼티 어트리뷰트를 명시적으로 정의하거나 기존 프로퍼티의 프로퍼티 어트리뷰트를
재정의 하는 것을 말합니다.

 

---

 

⚡ 객체 리터럴로 객체를 생성하면 무슨 문제점이 있나요?

 

객체 리터럴은 간편하지만 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우에는
매번 같은 프로퍼티를 기술해야해서 비효율적입니다.

반면 생성자 함수를 이용해 객체를 생성하면
프로퍼티 구조가 동일한 객체를 간편하게 생성할 수 있습니다.

 

---

 

⚡this 바인딩은 어떻게 이루어지나요?

 

this 바인딩은 함수 호출 방식에 따라 동적으로 결정됩니다.

일반 함수로서 호출 했을때 this는 전역 객체를 가리키고
메서드로서 호출 했을때 this는 메서드를 호출한 객체(마침표 앞의 객체)
생성자 함수로서 호출 했을때 this는 생성자 함수가 (미래에) 생성할 인스턴스를 가리킵니다.

 

---

 

⚡생성자 함수와 일반 함수를 가르는 차이가 무엇인가요?

 

함수를 new 연산자와 함께 호출하느냐 아니냐 입니다.

 

---

 

⚡바인딩이 뭔가요?

 

바인딩이란 식별자와 값을 연결하는 과정을 의미합니다.

예컨대 변수 선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩 하는 것입니다.

 

---

 

⚡생성자 함수의 인스턴스 생성 과정에 대해 설명해주세요

 

생성자 함수의 인스턴스 생성 과정은 다음과 같습니다.

1. 암묵적으로 빈 객체가 생성되며 this는 이 객체에 바인딩 됩니다. 이 단계는 런타임 전에 실행됩니다.
2. this에 바인딩된 인스턴스를 초기화합니다. 
3. 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됩니다.

 

---

 

⚡내부메서드 [[call]]과 [[construct]]에 대해 말해주세요

 

함수는 객체이므로 일반 객체와 동일하게 동작할 수 있습니다.
하지만 일반 객체는 함수와 동일하게 동작할 수 없습니다.

함수 객체는 함수로서 동작하기 위한 [[environment]] , [[FormalParameters]]등의 내부 슬롯과
[[call]] , [[construct]]와 같은 내부 메서드를 추가로 가지고 있기 때문입니다.

일반 함수로서 함수를 호출하면 함수 객체의 내부 메서드 [[call]]이 호출되고
생성자 함수로서 함수를 호출하면 함수 객체의 내부 메서드 [[construct]]가 호출됩니다.

** call을 갖는 함수 객체를 callable이라고 하고 construct를 갖는 함수 객체를 constructor
construct를 갖지 않는 함수 객체를 non-constructor라고 합니다.

 

---

 

⚡constructor와 non-constructor는 어떻게 구분하나요?

 

자바스크립트 엔진은 함수 정의 방식에 따라 함수가 constructor 인지 아닌지 구분합니다.

constructor : 함수선언문, 함수표현식, 클래스로 정의한 경우
non-constructor : 메서드, 화살표 함수

로 구분합니다.

**자바스크립트에서는 클래스도 함수입니다.

 

---

 

⚡new.target에 대해 설명해주실래요?

 

생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 new.target을 사용합니다.

new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킵니다.
new 연산자 없이 일반 함수로서 호출된 함수 내부의 new.target은 undefined입니다.

 

---

 

⚡스코프 세이프 생성자 패턴이 뭐에요?

 

new.target을 사용할 수 없을때 사용할 수 있는 ES6 최신 문법입니다.

function Circle(radius) {
	if(!(this instanceof Circle)) {
    	return new Circle(radius)
	}
    
    this.radius = radius;
    this.getDiameter = function() {
    freturn 2 * this.radius
    }
}

만약 Circle함수를 new 연산자와 함께 호출하지 않았다면

-> this와 Circle은 프로토타입에 의해 연결되지 않고(this 바인딩이 되지않고)

if문이 동작하는 시점에서 this는 window를 가리키게됩니다.

 

instanceof 연산자의 문법은 다음과 같습니다.

  object instanceof constructor

만약 object의 프로토타입체인에 constructor의 프로토타입이 존재하면 true를

아니라면 false를 내뱉는 연산자입니다.

 

즉 new 연산자 없이 호출하게되면

if(!(this instanceof Circle))은 if (! (false)) 이고(this에 Circle은 연결되지않고 바로 window를 가리키니까)

!로 인해 true로 바뀌면서 if문이 동작하게되는 것입니다.

 

if문에 해당되는 경우 new 연산자를 붙여서 생성된 인스턴스를 반환하고

new연산자가 있는 경우엔 프로토타입체인에 연결되기때문에 생성자 함수 없이도 리턴해줍니다.