[JavaScript] 변수 스코프

2017. 4. 13. 13:40

이 글은 EcmaScript5를 기준으로 작성되었습니다.

JavaScript 스코프

변수 스코프?

변수 스코프란, 변수가 선언된 지점을 기준으로 변수에 접근할 수 있는 범위를 말하며, 다른 말로 유효범위라고도 한다. 다른 언어에서는 블록({})을 기준으로 변수 스코프가 형성되는 경우가 있지만, 자바스크립트는 아니다.

if(true) {
    var aa = 1;
}

console.log(aa);

실행결과

> 1

블록 안에서 선언된 변수 aa를 블록 밖에서도 접근이 가능하다.

스코프의 종류

자바스크립트에서 형성될 수 있는 스코프는 두 가지이다.

1. 함수 스코프

말 그대로 함수를 기준으로 스코프가 형성되는 것을 말한다. 함수 내부에서 선언된 변수는 외부에서 접근할 수 없다.

function myFunc() {
    var aa = 1;
}

console.log(aa); // Error!!

반대로 외부의 변수는 내부 함수에서 접근할 수 있다.

var aa = 1;

function myFunc() {
    console.log(aa);
}

myFunc(); // 1

2. 전역 스코프

전역 스코프(global scope)는 함수 밖의 영역을 말한다. 전역 스코프의 변수는 모든 함수 스코프에서 참조할 수 있다.

/* global scope */
var aa = 1;

function myFunc() {
    /* function scope */
    console.log(aa);
}

function anotherFunc() {
    /* function scope */
    console.log(aa);
}

myFunc();
anotherFunc();

실행결과

> 1
> 1

전역 스코프에 선언된 변수는 다른 자바스크립트 파일에서도 접근할 수 있다.

/* index.html */
/*
    <html>
    <head>
        <script src='myModule.js'></script>
        <script src='script.js'></script>
    </head>
    </html>
*/

/* myModule.js */
var a = 1;
console.log(b);

/* script.js */
var b = 2;
console.log(a);

실행결과

> Error! b is not defined
> 1

<script> 태그로 로딩되는 순서에 따라서 파일 사이에 전역 스코프의 접근이 가능해진다. 전역 스코프에 변수를 선언하게 되면 자바스크립트 파일간 영향을 미칠 수 있기 때문에(특히 써드파티 모듈을 사용하는 경우), 신중하게 다뤄야 한다.

호이스팅(Hoisting)

호이스팅(Hoisting, 끌어올림)이란 변수 선언문이 끌어올려지는 현상을 말한다.

/* 호이스팅이 일어나기 전 */
console.log(aa);
if(true) {
    var aa = 1;
}
console.log(aa);

function myFunc() {
    console.log(bb);
    var bb = 2;
    console.log(bb);
}

myFunc();

위의 코드는 변수 호이스팅에 의해 자바스크립트 엔진에서 이렇게 해석된다.

/* 호이스팅이 일어난 후 */
var aa;
console.log(aa);
if(true) {
    aa = 1;
}
console.log(aa);

function myFunc() {
    var bb;
    console.log(bb);
    bb = 2;
    console.log(bb);
}

myFunc();

실행 결과

> undefined
> 1
> undefined
> 2

전역 스코프에 있는 변수의 선언문은 자신이 속한 자바스크립트 파일의 최상단으로, 함수 스코프에 있는 변수의 선언문은 함수 스코프의 최상단으로 끌어올려진다.

주의해야 할 점은 선언문만 끌어올려지고, 할당문은 그대로 있는 것이다. 때문에 첫 번째 aa에 접근할 때는 aa가 아직 초기화되지 않았으므로 undefined이 출력된다.

참고자료

저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] Trailing Comma 번역자료 (0)	2017.10.02
[JavaScript] 생성자 함수 (0)	2017.02.27
[JavaScript] 배열 연결 (0)	2017.01.26
[JavaScript] 동등, 일치 연산자 (0)	2016.10.04

haeguri