javascript - scope, lexical, hoisting

Scope 란?

scope 는 범위라는 뜻으로 프로그래밍 언어에서 변수나 메소드의 참조 범위

여기에서는 javascript 에 대한 scope 개념만 설명

Scope 종류

전역(global scope) : script 내에 어느 곳에서든 참조 가능

지역(local scope) : 정의된 함수 내에서만 참조 가능. 함수 외부에서는 접근 불가

[ 사진1 ] JavaScript 의 Scope 종류

> 로컬 변수의 값을 바꾸더라도 함수 내부에서만 유효하므로 전역변수의 값은 바뀌지 않음

var x = 'global';
function ex() {
  var x = 'local';
  x = 'change';
}
ex(); // x를 바꿔본다.
alert(x); // 여전히 'global'

[ 예제1 ] 지역/전역 변수 특징

JavaScript의 Scope 특징

• 변수명 중복 허용
• var 키워드 생략
• Function Scope
• 렉시컬 특성
• 변수 호이스팅 (variable hoisting)

변수명 중복 허용

자바스크립트에서는 변수명이 중복되어도 에러가 나지 않음

변수명이 여러 개 중복될 경우 가장 가까운 변수를 참조

var scope = 10;  
function scopeExam(){  
    var scope = 20;
    console.log("scope = " +scope);
}
scopeExam();  
//실행결과
/*
scope =20  
*/

[ 예제2 ] 변수명 중복 허용

var 키워드 생략

var 키워드를 붙이지 않으면 전역변수로 정의

> 전역 변수는 어디에서나 참조 가능하므로 변경된 값으로 출력

var x = 'global';
function ex() {
  x = 'change';
}
ex();
alert(x); // 'change'

[ 예제3 ] var 키워드 생략

Function Scope

자바스크립트는 블록단위가 아닌 함수 단위로 scope를 정의

> 다른 프로그래밍 언어는 블록 단위로 변수의 scope 가 정의

> 자바스크립트의 경우 function scope 의 특징을 가지므로 함수 내에서 a, b, c 의 scope 가 동일

function scopeTest() {  
    var a = 0;
    if (true) {
        var b = 0;
        for (var c = 0; c < 5; c++) {
            console.log("c=" + c);
         }
         console.log("c=" + c);
    }
    console.log("b=" + b);
}
scopeTest();  
//실행결과
/*
c = 0  
c = 1  
c = 2  
c = 3  
c = 4  
c = 5  
b = 0  
*/

[ 예제4 ] Function Scope 특징

렉시컬 특성

스코프는 함수 실행 시점이 아닌 정의 시점에 생성

lexical scoping, 정적 스코프라고도 불림

> f2 가 f1 안에서 실행되었지만 f2 외부에 있는 변수 a 를 호출할 수는 없음

function f1(){  
    var a= 10;
    f2();
}
function f2(){  
    return console.log("호출 실행");
}
f1();

//실행결과
/*

호출실행
*/

function f1(){  
    var a= 10;
    f2();
}
function f2(){  
    return a;
}
f1();

//실행결과
/*
Uncaught Reference Error  
: a is not defined
*/

[ 예제5 ] Lexical Scoping

변수 호이스팅 (variable hoisting)

변수의 정의가 선언과 할당으로 분리되는 것을 의미

변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상단으로 이동

변수가 전역에서 정의된 경우 전역 컨텍스트의 최상단으로 이동

호이스팅은 함수 선언 방식에만 적용 가능 

(함수표현식, Function 생성 방식은 함수 변수로 인식)

> 예제6 소스는 자바스크립트 엔진에 의해 예제 7처럼 동작 (name 변수가 호이스팅)

function doSomething() {
    console.log("value : " + name);
    var name = "bbchu";
    console.log("value : " + name);
}
doSomething();

//실행결과
/*
undefined
bbchu
*/

[ 예제6 ] Variable Hoisting

function doSomething() {
    var name;
    console.log("value : " + name);
    name = "bbchu";
    console.log("value : " + name);
}
doSomething();

//실행결과
/*
undefined
bbchu
*/

[ 예제7 ] Variable Hoisting