웹 개발/Javascript

[Javascript] 자바스크립트 스코프와 호이스팅

코딩하는흑구 2019. 5. 28. 22:57

- 스코프 : 어떤 변수들에 접근할 수 있는지를 정의 ( function(){} 단위로 생성, 최상단 스코프 = Global 스코프)

- 호이스팅 : var를 통해 정의된 변수의 선언문을 유효 범위(해당 스코프)의 최상단으로 끌어올리는 행위 ( 중요: 선언문만 끌어올리고 값은 끌어올리지 않는다.)


예제

1
2
3
4
5
6
7
8
9
var a = 1;
 
test();
 
function test(){
    console.log(a);
    var a =2;
    console.log(a);
}
cs


다음과 같은 자바스크립트 코드가 있을 때


출력결과는??


>>> 

undifined

2


해설

> 맨위의 변수 a는 원래는 test함수의 내부까지 값을 전달할 수 있었습니다. 만약 7번줄의 변수명이 a가 아니었다면 말이죠. a라는 변수를 test 함수내부에서 다시선언하였고 이 변수의 스코프는 test함수 내부로 정해집니다. var 선언문으로 선언되었기 때문에(물론변수는 그렇게선언할 수 밖에 없지만) 호이스팅을 적용받아 다음과 같이 선언한것과 똑같은 상태가 됩니다.


1
2
3
4
5
6
7
8
9
10
var a = 1;
 
test();
 
function test(){
    var a;
    console.log(a);
    a =2;
    console.log(a);
}
cs


그래서 첫번째 콘솔출력때 a변수는 값을 할당받지 않았기 때문에 undifined가 출력되었고 a=2;를 할당하였던 두번째 출력에서는 2가 출력된 것입니다.