본문 바로가기
기타/Javascript

Scope, Hoisting

by 죠부니 2018. 5. 28.
반응형

ES5는 {}에 상관없이 스코프가 설정된다


var sum = 0;

for (var i = 1; i < 5 ; i++){

sum = sum + i;

}

console.log(sum);    //15

console.log(i);         //6

{}에 상관없이 값이 출력된다.


Hoisting : 끌어올려진다

 - 선언한 함수와 변수를 해석시가 가장 상단에 있는 것처럼 인식한다.

-> 코드는 라인 순서와 관계없이 함수선언식과 변수를 위한 메모리 공간을 먼저 확보한다.


function a() 와 var는 코드의 최상단으로 끌어올려진 것(hoisted)처럼 보인다.


function willBeOveridden(){

return 10;

}

willBeOveridden() ; //5

function willbeOveridden(){

return 5;

}


해당 함수를 보면 willbeOverriden()을 호출했을때 10이 호출될거같지만 5가 호출된다.

왜 5가 호출 되었을까?


함수의 선언식과 변수가 메모리 공간을 먼저 확보한다.


해당 표현식이 있을경우 결과는 어떻게 작동할까?

var sum = 5;

sum = sum + i;

function AA(){


}

var i = 10;


i를 선언을 하지도 않았는데 오류가 생기지 않는다.

연산과 할당은 상단으로 옴겨진다.


1. 함수 선언식과 변수 선언을 Hoisting

var sum;

function AA(){

}

var i;

2. 변수 대입 및 할당

sum = 5;

sum = sum + i;

i = 10;



ES6의경우 {}단위로 변수의 범위가 제한됨

let sum = 0;

for (let i = 0 ; i <5; i++){

 sum = sum + i

}


console.log(sum); //

console.log(i);    //에러


---

추가로 볼만한것

let과 const는 호이스팅이 될까?


반응형

'기타 > Javascript' 카테고리의 다른 글

Enhanced Object Literals  (0) 2018.05.29
ArrowFunction  (0) 2018.05.29
let, const  (0) 2018.05.23
ES6  (0) 2018.05.23
날짜 및 시간비교  (0) 2018.05.08