자바스크립트 - 함수 유효범위

블록 스코프 Vs 함수 스코프

• 블록 스코프: 블록({})으로 싸여진 범위만큼 스코프가 결정됨(Ex. Java)

// 코드 추가 예정

• 함수 스코프: 함수 블록으로 싸여진 범위만큼 스코프가 결정됨.
• 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근가능.

function functionScope() {
    for (var i = 0; i < 3; i++) {
        // for block i ::  0
        // for block i ::  1
        // for block i ::  2
        console.log('for block i :: ', i);
    }
    
    // outside for block i ::  3
    console.log('outside for block i :: ', i);
}

functionScope();
console.log('outside function i :: ', i); // ReferenceError: i is not defined

함수 스코프

종류	접근 범위
전역 함수	모든 전역 변수와 전역 함수에 접근 가능.
지역(내부) 함수	부모 함수에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 변수도 접근가능.

global.globalVar = 'global var';

function topLevelFunc() {
    console.log('globalVar :: ', globalVar);
}

topLevelFunc();

function parentFunc() {
    var parentVar = 'parent var';

    // 부모 -> 자식으로의 접근은 불가
    // console.log('childVar :: ', childVar); // ReferenceError: childVar is not defined
    console.log('parentVar :: ', parentVar);
    console.log('globalVar :: ', globalVar);

    function childFunc() {
        var childVar = 'child var';

        console.log('childVar :: ', childVar);
        console.log('parentVar :: ', parentVar);
        console.log('globalVar :: ', globalVar);
    }

    childFunc();
}

parentFunc();


// 출력 순서 
// globalVar ::  global var
// parentVar ::  parent var
// globalVar ::  global var
// childVar ::  child var
// parentVar ::  parent var
// globalVar ::  global var

함수 호이스팅

함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다.
즉, 적용이 변수가 선언되기 전에도 똑같이 적용된다.
마치 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다.

var num = 0;

function functionHoisting() {
    // 전역 변수 num을 참조하지 않는다.
    console.log('num :: ', num); // a ::  undefined
    var num = 10;
}

functionHoisting();

위의 결과를 예상과 달리 num이 0을 나타내지 않고 undefined를 나타낸다.

위는 아래의 코드와 같기 때문이다.

var num = 0;

function functionHoisting() {
    var num;
    // 전역 변수 num을 참조하지 않는다.
    console.log('num :: ', num); // a ::  undefined
    num = 10;
}

functionHoisting();