[JavaScript] 호이스팅과 클로저

클로저

자바스크립트에서 함수는 일급 객체(First Class Object)로 취급된다.

일급 객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 할당할 수 있으며, 다른 함수를 인자로 전달받는다. 또, 다른 함수의 결과로 return 될 수 있다.

출처 엘리스SW트랙

클로저는 Factory 함수가 저장되는 공간이라고 할 수 있으며 일급 객체 성질을 이용한다. 선언된 createCard()를 객체 처럼 다룰 수 있다.

여러 클로저를 생성시에 각각의 스코프가 생성되어, 내부 변수는 공유되지 않는다.

Factory 함수란? 함수들을 객체의 형태로 return 하는 함수. 위의 코드의 createCard()도 Factory 함수이다.
Class를 return 생성, return하는 경우도 있다.

 

호이스팅

var 변수와 function의 선언이 코드의 맨 위로 끌어올려지는 현상이다.

자바스크립트에는 크게 var와 let 타입의 변수가 존재한다. var 타입이 영향을 받는 호이스팅이라는 개념이 일반적인 상황에서는 실수를 야기할 수 있는데, 이에 대한 대안으로 let 타입의 변수가 등장 하게 되었다. 대부분의 경우에서는 var보다 let 사용이 권장된다.

 

console.log(a); //undefined
console.log(b); //Uncaught ReferenceError : Cannot access 'b' before initialization

var a = "안녕하세요";
let b = "반갑습니다";

console.log(a); //"안녕하세요"
console.log(b); //"반갑습니다"

 

위의 예제 코드처럼 var 타입은 선언부가 최상단으로 끌어올려지며 초기화가 이루어져 참조가 가능하지만 undefined을 가지고, let은 초기화가 발생하지 않아 참조가 불가능하다. 정의된 부분 아래에서는 모두 참조가 가능하다.

 

console.log(plus(10, 15))	// 25

function plus(a, b) {
	return a + b
}

console.log(minus(15, 5)) // Cannot access 'minus' before initialization

const minus = (a, b) => {
	return a - b;
}

 

Function 함수는 호이스팅이 일어남과 함께 생성 단계에서 함수 전체가 저장 되므로, 호출이 가능하다. 반면 화살표 함수는 호이스팅이 발생하지 않으며, const 타입도 마찬가지로 호이스팅이 발생하지 않는다. 따라서, 위의 예제처럼 초기화되지 않아 참조할 수 없다는 에러를 확인할 수 있다.