실행 컨텍스트에 대해 설명해주세요.
# 개념
- 공식 문서에 따르면 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 표기되어 있음.
- 자바스크립트 엔진이 실행 가능한 코드를 실행하기 위해 필요한 환경을 뜻하며, 컨텍스트 생성 시 실행에 필요한 여러 정보를 담고 있는 물리적 객체를 가리킴.
- 실행에 필요한 정보 : 변수(전역/지역/매개변수, 객체 프로퍼티), 함수, 스코프, this
- 크게 전역 컨텍스트와 함수 컨텍스트가 존재함. (+ Eval 함수)
# 동작방식
- LIFO(Last In First Out: 후입 선출)를 따르는 하나의 스택 구조로 관리됨.
- 프로그램이 실행될 때 전역 컨텍스트가 생성됨. 전역 컨텍스트는 애플리케이션(브라우저)이 종료될 때까지 유지됨.
- 함수가 호출될 때마다 함수 컨텍스트가 생성됨. 함수 컨텍스트는 함수 실행이 끝날 경우 제거됨.
자바스크립트에서 this
란 무엇인가요? 실행 컨텍스트와 연관지어 설명해주세요.
- this: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
this
가 결정되는 방식은 어떻게 되나요?
# 일반 함수
- 함수 호출 방식에 따라 `this`에 바인딩할 객체가 동적으로 결정됨.
- 일반 함수 실행 시, 전역(window) 객체를 가리킴.
- 객체 내부 메서드 실행 시, 메서드를 소유하고 있는 객체를 가리킴.
- 생성자 함수 실행 시, 새롭게 만들어진 객체를 가리킴.
# 화살표 함수
- 함수 선언 시 `this`에 바인딩할 객체가 정적으로 결정됨.
- 화살표 함수는 `this`를 가지지 않기 때문에 해당 함수를 가지고 있는 상위 객체(외부 함수)에서 `this`를 가져옴. 이를 `Lexical this`라고 함.
- 객체 내부에 메서드를 정의할 때 화살표 함수를 사용하면 메서드를 가지고 있는 객체가 아닌, 해당 객체를 가지고 있는 상위 객체에서 `this`를 가져오기 때문에 예상하지 못한 동작이 발생할 수 있으므로 지양해야 함.
명시적 바인딩은 어떻게 할 수 있나요?
- `call`, `apply`, `bind` 메서드를 사용하여 `this`를 원하는 대상(함수)에 바인딩 시킬 수 있음.
- `call`, `apply`는 함수 호출 시 `this`를 바인딩 할 수 있게 도와주며, `bind`는 함수 할당 시 `this`를 미리 적용할 수 있도록 해줌.
+) 화살표 함수 또한 명시적 바인딩 메서드가 동작하기는 하지만, 매개변수로 넘어오는 인자만 사용할 뿐 `this` 바인딩은 실행되지 않음.
# call
- call(`this`로 바인딩할 객체, ...함수의 매개변수로 사용할 인수 목록)
- 인자로 받은 `this`와 매개변수를 사용하여 호출된 함수의 값을 반환함.
# apply
- apply(`this`로 바인딩할 객체, [함수의 매개변수로 사용할 인수 배열])
- 인자로 받은 `this`와 매개변수를 사용하여 호출된 함수의 값을 반환함.
# bind
- bind(`this`로 바인딩할 객체, 함수의 매개변수로 사용할 인수 목록)
- `this`가 명시적으로 설정된 함수을 반환함.
.call
, .apply
의 차이점은 무엇인가요?
- 함수를 실행하고 첫 번째 인자로 전달하는 값에 `this`를 바인딩하는 방식은 동일하지만, 인자를 받는 방식에서 차이가 있음.
일반 함수와 화살표 함수의 차이점을 설명해주세요. (feat. 화살표 함수는 왜 this
를 가지지 않는가)
# **일반 함수**
- 자바스크립트에서의 함수는 생성자, 메서드, 일반 함수의 개념을 모두 포함하고 있음. 이 방식은 유연한 문법을 제공한다는 장점이 있지만, 반대로 사용자가 실수할 가능성을 높인다는 단점이 있음.
- 특히 일반 함수에서의 `this`는 함수 호출 방식에 따라 동적으로 결정되기 때문에 혼란을 야기함.
# **화살표 함수**
- 함수를 축약해서 사용할 수 있는 문법. 화살표 함수는 함수를 보다 직관적이고 가볍게 만들기 위한 목적이 큼.
- this, arguments, super, new.target 바인딩 및 프로토타입 프로퍼티를 가지지 않으며, 메서드나 생성자로 사용할 수 없음.
- 상위 스코프의 `this`를 참조하기 때문에 콜백 함수의 `this`와 외부 함수의 `this` 불일치 문제를 해결할 수 있음.
화살표 함수를 사용했을 때는 new
생성자를 사용할 수 없습니다. 그 이유는 무엇일까요?
- `this`를 가지고 있지 않기 때문에 생성자 함수로 사용할 수 없음.