[JS] 전역 스코프 / 함수 스코프 / 블록 스코프 의 차이

 

JS에는 Scope(스코프) 라는 단어가 있습니다. 이게 무엇인지 알아보도록 하자.

 

Scope란? 

 

• 변수에 접근할 수 있는 범위 입니다.
• JS에는 2가지의 스코프 타입이 있습니다. ( 전역 스코프 / 지역(함수) 스코프 )

---

지역(함수) 스코프란?

 

• 함수가 선언되면 하나의 스코프가 발생하는데 이걸 함수스코프라고 합니다.
• 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능합니다.

function abc() {
  var aa = '12';  // 함수 내부에서 선언
}
console.log(aa);  // Uncaught ReferenceError: aa is not defined

위 이미지 처럼 함수 외부에서 aa를 호출하게 되면 변수는 지역 스코프 이므로 함수 내에서만 사용이 가능하여 

undefine 이 뜹니다.

---

전역 스코프란?

 

• 프로그램 전체에서 접근할 수 있는 가장 넓은 범위를 나타냅니다.
• 선언된 변수는 프로그램 어디에서나 접근할 수 있습니다.

var globalVariable = 10; // 전역 스코프

function exampleFunction() {
    console.log(globalVariable); // 전역 스코프의 변수에 접근 가능
}

만약 변수가 함수 내부에 선언된 것이 아나리면 이 변수는 전역 스코프이므로 어디에서든 접근이 가능합니다.

---

블록 스코프란?

 

• 중괄호('{ }') 로 둘러싸인 코드 블록 내에서 변수가 유효한 범위를 나타냅니다.
• 변수 'let' / 'const' 키워드를 사용하여 선언할 수 있습니다.

function exampleFunction() {
    if (true) {
        var blockScopedVariable = 20; // var는 블록 스코프를 무시하고 함수 스코프를 따름
        let blockScopedLetVariable = 30; // 블록 스코프 변수
        const blockScopedConstVariable = 40; // 블록 스코프 상수
    }

    console.log(blockScopedVariable); // 에러: 블록 스코프를 무시하므로 변수에 접근 가능
    console.log(blockScopedLetVariable); // 에러: 블록 스코프를 따르므로 변수에 접근 불가
    console.log(blockScopedConstVariable); // 에러: 블록 스코프를 따르므로 변수에 접근 불가
}

 

 

 

이처럼변수의 유효 범위를 선정해주어 변수의 유효 볌위를 제한하여 예기치 못한 변수의 재할당이나 접근을 방지합니다.

이는 코드의 가독성을 높이고 예기치 못한 부작용을 줄이는데 도움의 됩니다.