[TIL][JavaScript][Core] 실행 컨텍스트, 호이스팅, 함수 선언/표현식, 화살표 함수

[1] 자바스크립트에서의 실행 컨텍스트란 무엇이죠?

실행 컨텍스트는 자바스크립트 엔진이 코드를 실행할 때 필요한 모든 환경 정보를 담고 있는 객체입니다. 이는 콜 스텍에 쌓이게 되며, 함수 호출 시 생성됩니다. 각 실행 컨텍스트는 해당 함수의 지역 변수, 파라미터, this 바인딩과 같은 정보를 포함합니다. 

자바스크립트의 함수는 '일급 객체'로 취급되어 변수에 할당되거나 다른 함수의 인자로 전달될 수 있습니다. 

 

실행 컨텍스트 객체에 담기는 정보들

• LexicalEnvironment: 현재 컨텍스트 내의 식별자들에 대한 정보, 외부 환경 정보. 실시간으로 변경 사항이 반영됨
• VariableEnvironment: lexicalEnviornment의 스냅샷. 그대로 유지됨.
• ThisBinding: 식별자가 바라봐야 할 대상 객체.

 

호이스팅이 무엇인가요?

 

실행 컨텍스트가 관여하는 코드 집단의 최상단으로 변수의 식별자, 매개변수명, 함수명 등을 수집한 정보를 끌어올리는 현상을 끌어올린다, 라고 해석하는 것입니다. 자바스크립트 엔진이 코드를 실행할 때 필요한 환경 정보를 처음부터 끝까지 순차적으로 읽어가며 수집하여 실행 컨텍스트에 넣습니다. 변수 선언과 값 할당이 동시에 이루어진 문장은 선언부만을 호이스팅하고 할당 과정은 제자리에 남아있게 됩니다. 이때 함수 선언문과 함수 표현식의 차이가 발생합니다.

 

호이스팅과 함수의 표현 방식에 따른 차이는 무엇이죠?

이때 함수는 어떻게 표현했는지에 따라 다르게 호이스팅됩니다. 함수 선언문으로 정의된 함수는 함수 전체가 끌어올려집니다. 반면에 함수 표현식으로 정의된 함수는 마찬가지로 함수의 이름만 끌어올려지고, 함수 자체는 끌어올려지지 않습니다.

 

함수 선언문과 함수 표현식은 어떻게 다르죠?

함수 선언문은 function을 사용해 함수를 정의하기만 한 방식이고, 함수 표현식은 정의한 function을 별도의 변수에 할당하는 것을 뜻합니다. 함수 선언문은 반드시 함수 명이 기재되어 있어야 하지만, 함수 표현식은 함수 명이 존재하지 않아도 됩니다. (일반적으로 익명 함수 표현식을 함수 표현식이라고 합니다.)

//함수 선언문
// 실행 컨텍스트 생성 시 함수 선언문으로 선언한 함수는 함수 전체가 끌어올려(호이스팅) 됩니다. 
// 따라서 함수가 선언되기 전에 함수를 호출해도 사용할 수 있습니다.

console.log(funcA()) // a

function funcA (){ 
	console.log('a')
    }


//함수 표현식
// 실행 컨텍스트 시 funcB, funcC만 끌어올려(호이스팅)되고 함수 내용은 호이스팅되지 않습니다.
// 따라서 함수가 선언되고 작성 및 할당되기 이전에 해당 함수를 호출하면 
// 선언만 된 것이지 할당 된 것이 아니게 되므로 함수를 호출해도 사용할 수 없습니다.

console.log(funcB) //undefined (미할당!)
console.log(funcC) //undefined (미할당!)

const funcB = function (){ 
	console.log('b')
    }
const funcC = ()=>{
	console.log('c'}
   }

 

화살표 함수와 일반 함수 표현식(익명 함수 표현식)은 어떤 점에서 다르나요? 

화살표 함수는 문법이 간결합니다. 또한 생성자로 사용될 수 없습니다. 왜냐하면 프로토타입 속성을 갖고 있지 않기 때문입니다.마지막으로 두 함수는 this 바인딩의 차이에서 가장 크게 두드러지는 차이를 낳습니다. 일반 함수의 this는 함수가 호출될 때 정의되는데, 함수가 어떻게 호출되느냐에 따라 this 값이 달라질 수 있습니다. 그러나 화살표 함수의 this는 항상 상위 스코프의 this를 상속받습니다. 

 

스코프와 스코프 체인은 무엇인가요? 

스코프는 변수의 유효 범위를 뜻합니다. 실행 컨텍스트를 생성할 때 저장되는 해당 함수의 정보(지역변수 등)가 담긴 객체(LexicalEnvironment)와 함수를 호출한 상위 함수(caller)의 객체(LexicalEnvironment) 를 참조하는 객체(outerEnvironmentReference)를 통해 탐색합니다.(이 객체는 마치 연결리스트처럼 작동합니다.) 코드 상에서 어떤 변수에 접근하려고 하면 현재 실행 컨텍스트의 스코프 정보를 탐색하여 그 값을 반환합니다. 만약 찾지 못한다면 상위 함수(caller)의 정보를 참조 중인 객체를 통해 상위 함수(바깥)으로 탐색하는 과정을 거칩니다. 전역 컨텍스트까지 탐색해도 찾지 못한다면 undefined을 반환합니다.