ES5 특징 - 변수 Scope(스코프), Hoisting(호이스팅)

자바나 기타 다른 언어를 하고 자바스크립트를 공부하면 ES5특징에서 헷갈리는 부분들이 있다.

 

ES5 특징 - 변수의 Scope(범위)

• 기존 자바스크립트(ES5)는 { } 에 상관없이 스코프가 설정됨

자바에서는 for문에서 사용한 i는 보통 for문 {}안에서만 사용이 가능한데, ES5는 for문에서 사용한 i가 전역변수로 설정된다.

var sum = 0;
for (var i=1; i<=5; i++ ) { //i가 전역변수로 잡힌다.
	sum = sum + i;
};

console.log(sum); //15
console.log(i); //6

ES5특징 - Hoisting (Hoist:끌어올리다)

• Hoisting이란 선언한 함수와 변수를 해석기가 가장 상단에 있는 것처럼 인식한다.
• js 해석기는 코드의 라인 순서와 관계 없이 **함수선언식과 변수(함수표현식은 해당안됨)**를 위한 메모리 공간을 먼저 확보한다.
• 따라서, function a() (함수선언식) 와 var(변수)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보인다.

//호이스팅
function willbeoverhidden() {
	return 10;
}
willbeoverhidden() // 5
function willbeoverhidden() {
	return 5;
}

//함수선언문과 함수표현식의 차이 
function sum() {
	//function statement 함수 선언문
	return 10 + 20;
}

var sum = function() {
	//function expression 함수표현식
	return 20 + 20;
}
sum() //40;

//아래와 같은 코드를 실행 할 때 자바스크립트 해석기가 어떻게 코드 순서를 재조정할까요?
var sum = 5;
sum = sum + i; //오류가 안남 //sum연산이 맨 마지막 순서로 실행됨
function sumAllNumbers() { //function 위로 끌어 올려짐(메모리할당먼저됨)
	//.....
}
var i = 10; //var i가 위로 끌어 올려짐(메모리할당먼저됨)

//결과
//#1 - 함수 선언식과 변수 선언을 hoisting
var sum = 5;
function summAllNumbers() {
	//....
}
var i = 10;
//#2 - 변수 대입 및 할당
sum = sum + i;

 

인프런 캡틴판교 강의 참고