[JS] 자바스크립트의 독특한 동작, Strict Mode와 호이스팅

dev 2022년 2월 11일

Strict Mode

Javascript 의 Strict Mode는 ES5에서 소개되었는데 이 모드를 적용하면 엄격하게 문법을 잡아준다. 예전에는 무시되었던 에러들을 던져주고 실수들을 잡아줘서 Javascript 엔진 최적화 작업을 도와준다. Script 시작 부분에 정의되면 전역으로 적용이된다.

Hoisting

호이스팅이란? 코드가 실행되기 전 변수,함수 선언이 해당 스코프(범위)의 최상단으로 끌어올려진 거 같은 현상을 뜻하는 말이다. 실제로 그렇게 끌어올린다는 것이 아니라 이것은 Javascript 엔진이 실행가능 한 코드를 형상화 하는 과정에서 벌어지는 현상인데, Javascript 엔진의 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

function myName(name) {
	console.log("제 이름은", name );
}
myName("김민수");

myName("김민수");
function myName(name) {
	console.log("제 이름은", name );
}

아래의 경우 똑같은 내용이지만 함수선언보다 호출이 먼저 이루어진다. 그러나 문제 없이 잘 동작하는데 호이스팅 때문이다. 호이스팅은 다른 자료형이나 변수에도 잘 작동한다.

그런데 이런 호이스팅은 선언한 것들만 호이스팅의 대상이 된다. 예를 들면

console.log(name);
name = "김민수"

이런 코드가 있다면 ReferenceError가 발생한다. 왜냐하면 선언이 없는 상태에서 "김민수"로 초기화된 변수이기 때문이다. 그래서 호이스팅이 발생하지 않고 변수를 읽으려고 할때 ReferenceError가 발생한다.

1) 변수 호이스팅

Javascript의 모든 선언에는 호이스팅이 발생한다. 그런데 var 키워드로 선언했을 때랑 달리 let 키워드로 선언된 변수를 선언 이전에 참조하면 ReferenceError가 발생하는데 그 이유는 let 으로 선언된 변수의 스코프 범위 이전에 참조하였기 때문이다.

변수 생성 3단계: 선언 -> 초기화 -> 할당

var 키워드는 선언과 초기화가 한번에 되지만 let은 선언과 초기화가 분리되어 진행된다. 초기화 (변수를 위한 메모리 공간확보)

2) 함수 호이스팅

함수선언문 또한 정의되기 전에 호출이 가능하다. 함수 선언의 위치와 관계 없이 코드 내 어느 곳에서 호출 할 수 있는 걸 함수 호이스팅이라고 한다.

태그