자바스크립트 내부 슬롯과 내부 메서드 이해하기

개요

자바스크립트 코드를 보면 종종 [[Protoype]], [[Call]], [[IsExensible]] 같은 이중 대괄호로 감싸진 용어들을 볼 수 있다

이들은 자바스크립트가 동작하는 핵심 내부 로직으로, ECMAScript 명세에서 정의한 객체 내부의 동작 원리를 설명할 때 사용됨

이를 내부 슬롯 (Internal Slots)과 내부 메서드 (Internal Methods)라고 부름

 

이 구조들은 자바스크립트 코드에서 직접 접근하거나 수정할 수 없지만, 우리가 작성하는 모든 코드의 바탕이 되는 동작 흐름을 결정함

 

 

 

 

 

ECMAScript 사양에서의 정의 (내부 슬롯)

내부 슬롯은 ECMAScript 사양에서 객체의 내부 상태를 표현하기 위해 사용하는 개념. 일반적으로 [[Something]] 형태로 표기됨

이 슬롯들은 객체가 어떤 동작을 할 수 있는지, 어떤 방식으로 동작할지를 결정함

이러한 내부 슬롯은 일반적인 자바스크립트 코드에서는 접근하거나 수정할 수 없으며, 오직 엔진이 내부적으로 관리

 

함수나 객체가 특정 역할을 할 수 있느냐는 이 슬롯의 유무에 따라 결정됨

예를들어 어떤 값이 [[Call]] 슬롯을 가지고 있다면, 자바스크립트는 이 값을 함수로 간주하고 호출할 수 있게 해줌

이 슬롯이 없으면 `is not function` 오류가 발생함

 

 

 

 

 

 

주요 내부 슬롯과 내부 메서드

 

[[Prototype]]과 프로토타입 체인

자바스크립트의 상속 구조는 클래스 기반이 아니라 프로토타입 기반

객체가 다른 객체를 상속받는 방식은 [[Prototype]] 슬롯을 통해 연결됨

이 슬롯은 해당 객체의 부모 객체를 참조하고 있으며, 객체의 속성을 탐색할 때 이 슬롯을 따라 부모 > 조상으로 이어지는 프로토타입 체인이 형성됨

 

 

[[Call]]과 [[Construct]] : 함수와 생성자의 차이

자바스크립트의 함수는 일반 함수일 수도 있고, 생성자일 수도 있음

모든 함수는 [[Call]] 메서드를 가지고 있고, 이는 함수 호출 연산자 ()를 통해 실행될 수 있음을 의미

하지만 생성자로 사용할 수 있는 함수는 여기에 더해 [[Constrcut]]라는 내부 메서드가 필요

[[Constrcut]]가 있으면 new 키워드를 통해 인스턴스를 생성할 수 있음

 

 

[[IsExtensible]], [[DefineOwnProperty]], [[Get]], [[Set]] 등

- [[IsExtensible]]

객체의 확장 가능 여부를 판단 (Object.isExtensible(obj)) 할 때 동작

 

- [[DefineOwnProperty]]

객체의 속성을 새로 정의할 때 동작

 

- [[Get]]

객체의 값을 읽을 때 동작

 

- [[Set]]

객체의 값을 설정할 때 동작

 

 

 

 

Reference

https://yozm.wishket.com/magazine/detail/3498/

자바스크립트 내부 슬롯과 내부 메서드 이해하기 | 요즘IT