자바스크립트 스코프(Scope), 렉시컬 스코프(Lexical Scope), 다이나믹 스코프(Dynamic Scope)

 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

[지금 무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 강의 - 인

자바스크립트에서 스코프(Scope)에 대해 알아보겠습니다.  일단 스코프에 개념부터 알아보겠습니다.  
Scpoe(스코프)란?  -> 변수가 존재하고 참조될 수 있는 영역을 의미합니다.  자바스크립트에서 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프 (Local Scope)로 나눌 수 있습니다.
전역 스코프(Global Scope) -> 변수가 코드의 어디에서든지 접근 가능한 범위를 의미, 즉, 코드 전체에서 해당 변수를 참조할 수 있습니다.
지역 스코프(Local Scope) -> 변수가 특정 함수 내부에서만 접근 가능한 범위를 의미, 즉, 범위 내에서 선언된 변수는 해당 함수 안에서만 참조할 수 있습니다.
소스 코드를 작성하면서 주석으로 설명하였습니다. 
실행결과도 같이 올려드리겠습니다!

/**
 * Scope -  변수가 존재하고 참조될 수 있는 영역을 의미
 */
// 함수를 실행을 할 때는 함수 밖에 있는 변수(전역변수)를 접근할 수 있다.
// 함수를 선언하면은 이 상위 스코프(Scope) 상위 변수가 존재하는 스코프(Scope)(Scpoe)를 포함을 하게 된다.
// 모든 선언은 가장 가까운 스코프(Scope)에 있는 선언부터 활용을 하게 된다는 걸 알 수가 있다.
var javascript = 10; //javascript에 10을 선언

function javascriptOne(){ // 함수 선언
    console.log(javascript); //javascript를 출력
} 

console.log('-----------------------------------');
// javascriptOne();

function javascriptOne(){ // 기존의 javascriptOne() 함수를 덮어쓴다
    var javascript = 20;
    
    console.log(javascript);
}
// javascriptOne();
 // 20 값이 나오는 이유 : 가장 가까운 스코프(Scope)에 있는 변수를 가져오기 때문


// 함수를 새로 선언하면 최상위 스코프(Scope) 안에 있는 javascriptOne() 함수를 덮어 쓰게 된다.
// 함수 스코프(Scope) 안에서 javascript를 선언하게 되면 상위 스코프(Scope)의 javascript 변수를 덮어쓰지 않는다.
// 20은 javascriptOne()을 실행하면서 나온 값
console.log(javascript) // 10이라는 숫자가 그대로 javascript 변수에 저장되어 있는 것을 볼 수 있다.
function javascriptOne(){ // javascriptOne 함수를 선언
    var javascript = 30; // javascript 변수에 30을 할당

    function javascriptTwo(){ // javascriptTwo 함수를 javascriptOne 함수 안에다가 선언 
        var javascript2 = 100; // javascript2 변수에 100을 할당
         
        // javascriptTwo() 함수에서 출력
        console.log(`javascriptTwo javascript2 : ${javascript2}`); // javascript2를 출력하고  있으니 100이 출력
        console.log(`javascriptTwo javascript : ${javascript}`); // javascriptTwo() 안에서 javascript를 출력하게 되면 바로 상위 스코프(Scope)에 있는 javascriptOne() 함수 스코프(Scope)에 있는 javascript가 출력된다.
    // javascript2 변수는 같은 함수 스코프(Scope)에 있어서 가장 가까운 javascript2 변수를 가져오게 된다.
    // javascript 같은 경우는 javascriptTwo() 함수 안에는 없어서 상위 스코프(Scope) javascriptOne()에서 가져온다.
    // 만약 javascriptOne() 에서도 없었다면 한 단계 더 상위 스코프(Scope)인 글로벌 스코프(Scope)(전체 스코프(Scope))에서 가져오게 된다. 
    }
   
    javascriptTwo(); //javascriptTwo 함수를 실행 -> javascriptOne() 함수를 실행할때 javascriptTwo() 함수도 자동으로 실행됨

    console.log(`javascriptOne javascript : ${javascript}`); // javascriptOne()에서 출력을 했을 때도 현재 함수의 스코프(Scope)에 있는 javascript 라는 변수가 출력이 된다.
}
console.log('-----------------------------------');
javascriptOne();
console.log(javascript); // 10이 출력됨
// console.log(javascript2); -> javascript2는 javascriptTwo() 함수의 스코프(Scope) 안에 선언이 되어 있고 하위 스코프(Scope)에는 접근 할 수 없다.

/**
 * JS -> Lexical Scope(렉시컬 스코프)
 * 
 * 선언된 위치가 상위 스코프(Scope)(Scope)를 정한다.
 * 
 * Dynamic Scope(다이나믹 스코프)
 * 
 * 실행한 위치가 상위 스코프(Scope)(Scope)를 정한다.
 */

var javascript3 = 333; // javascript3 변수에 333 값 할당

function function1(){ // 함수를 생성하여 function1 이라고 정의
    var javascript3 = 3000; // 같은 이름으로 선언하여  javascript3 변수에 3000 할당

    function2(); //function2 실행
    
}

// function2랑 function1이 같은 스코프(Scope)(레벨)안에 선언이 되어 있다.
function function2(){ // function2는 글로벌 스코프(Scope) 안에다가 선언
    // function2() 같은 경우에는 글로벌 스코프(Scope)에서 변수값을 가져온다.
    // 렉시컬 스코프(Scope)(Lexical Scope)이기 때문에 function2()의 상위 스코프(Scope)는 글로벌 스코프(Scope)가 된다. -> javascript3를 글로벌 스코프(Scope)에서 가져오게 된다. 
    console.log(javascript3); // javascript3를 출력 
}
console.log('-----------------------------------');
function1(); //function1 실행

// var, let, const 키워드가 스코프(Scope)를 어떻게 다르게 만들어주는지 확인
var a = 10000;

for(var a = 0; a < 10; a++){
    console.log(a);
}
console.log(`a in global scope : ${a}`);
console.log('-----------------------------------');
// var 키워드를 사용했을 때 스코프(Scope)가 새로 생기는 경우 -> 함수를 선언했을 때(for-loop, if, while-loop)같은 경우는 새로운 스코프(Scope)를 만들어내지 않는다.
// a가 그대로 글로벌 스코프(Scope)에 a로 적용이 되어 원래 값인 10000인데 0부터 9까지 변경하여 글로벌 스코프(Scope)에서도 변수 값이 10으로 변경된다.

// let 키워드 
// block level scope(블록 레벨 스코프)
a = 10000; 
for(let a = 0; a < 10; a++){
    console.log(a);
}
console.log(`a in global scope : ${a}`);
console.log('-----------------------------------');
// let 키워드와 const 키워드를 사용하면 함수에서 뿐만 아니라 for-loop이나 if, while-loop같은 블록 레벨 스코프(Scope)도 만들어 낼 수가 있다.
// 괄호가 들어가는 모든 상황에서 let 과 const를 사용하면 생각하는 대로 스코프(Scope)를 만들어 낸다.

/**
 * var 키워드는 함수 레벨 스코프(Scope)만 만들어낸다.
 * 
 * let, const 키워드는 함수 레벨 스코프(Scope)와 블록 레벨 스코프(Scope)를 만들어낸다.
 */