전역 스코프와 지역 스코프 | Closuer

let a = 'a'; // 전역 변수

function functionB() {
    let c = 'c'; // functionB의 지역 변수
    c = "c";     // c 값을 다시 설정
    console.log(a, b, c); // b는 functionB 내부에서 선언되지 않았으므로 에러 발생 가능
}

function functionA() {
    let b = 'b'; // functionA의 지역 변수
    functionB(); // functionB 호출
    console.log(a, b); // functionA 내에서 a는 전역 변수, b는 functionA의 지역 변수
}

functionA(); // functionA 호출

 

코드 실행 결과

이 코드 실행 시, 에러가 발생한다.

---

1. 전역 스코프와 지역 스코프

1. let a = 'a';
   • 변수 a는 전역 스코프에서 선언되었다. 모든 함수에서 접근 가능한다.
2. function functionA()
   • 지역 변수 b를 선언하고, functionB를 호출한 뒤 로그를 출력한다.
   • functionA의 지역 스코프에서만 변수 b에 접근할 수 있다.
3. function functionB()
   • 지역 변수 c를 선언한다.
   • console.log(a, b, c);
     • 여기서 문제는 b는 functionB 내부에서 선언되지 않았으므로 존재하지 않는 변수이다.
     • JavaScript의 strict mode에서는 ReferenceError가 발생한다.

---

2. 실행 흐름

1. 코드가 시작되면 let a = 'a';가 실행되어 전역 변수 a가 정의된다.
2. functionA()가 호출된다:
   • let b = 'b';가 실행되어 functionA의 지역 변수가 선언된다.
   • functionB()가 호출된다.
3. functionB()가 실행된다:
   • let c = 'c';가 실행되어 functionB의 지역 변수가 선언된다.
   • console.log(a, b, c);가 실행되려 하지만:
     • a는 전역 변수이므로 접근 가능한다.
     • b는 functionB 내부에서 선언되지 않았으므로 ReferenceError 발생.

 

 

 

 

 

 

 

Closure를 사용한 코드 수정

 

let a = 'a'; // 전역 변수

function functionA() {
    let b = 'b'; // functionA의 지역 변수

    function functionB() {
        let c = 'c'; // functionB의 지역 변수
        console.log(a, b, c); // a: 전역 변수, b: functionA의 지역 변수, c: functionB의 지역 변수
    }

    return functionB; // functionB를 반환
}

const closureFunction = functionA(); // functionA 실행 후 functionB를 반환
closureFunction(); // 반환된 functionB 실행

코드 실행 흐름

1. let a = 'a';
   • 전역 스코프에서 a를 선언한다.
2. functionA() 호출:
   • 지역 변수 b를 선언한다.
   • 내부 함수 functionB를 반환한다.
     • Closure로 인해 functionB는 functionA의 스코프에 접근할 수 있다.
3. 반환된 functionB를 실행:
   • console.log(a, b, c);
     • a: 전역 변수에서 가져온다.
     • b: Closure를 통해 functionA의 지역 변수에 접근한다.
     • c: functionB의 지역 변수이다.