[JS] 함수 스코프, 블록 스코프 Scope

📝 스코프 scope

식별자를 찾을때 자바스크립트에서 확인하는 범위이다.

이를 통해 접근 가능성 = 가시성을 결정한다.

상위스코프는 하위스코프에 접근할 수 있지만, 하위는 상위에 접근할 수 없다.

전역변수, 지역변수의 관계를 판단하는 영역을 말한다.

 

전역 Global 스코프

프로그램 전체에서 접근할 수 있다.

프로그램이 시작될 때 생성되며 프로그램이 종료될 때까지 유지된다. 데이터 덮어씌우기 가능하다.

전역 스코프에 선언된 변수는 프로그램 어디서든 접근할 수 있다.

var globalVariable = 'I am a global variable'; // 전역 변수
function foo() {
    console.log(globalVariable); // 전역 변수 접근 가능
}
foo();
console.log(globalVariable); // 전역 변수 접근 가능

 

지역 Local 스코프

함수 내부에서 선언된 변수가 해당 함수 내에서만 접근할 수 있다.

함수가 호출될 때마다 새로운 지역 스코프가 생성되며, 함수의 실행이 종료되면 스코프와 함께 지역 변수도 소멸된다.

function foo() {
    var localVar = 'I am a local variable'; // 지역 변수
    console.log(localVar); // 지역 변수 접근 가능
}
foo();
console.log(localVar); // Error

마지막 console.log에서 에러가 발생한다. 지역 변수는 함수 외부에서 접근 불가능하기 때문!

 

함수 레벨 Function Level 스코프 - var

var 로 선언된 변수가 해당 함수 내에서만 유효하다.

var 로 선언된 변수는 함수 내에서 선언되었을 때만 스코프를 가진다.

function foo() {
    if (true) {
        var a = 'function-level'; // 함수 레벨 스코프 변수
        console.log(a); // 함수 내부에서 접근 가능
    }
    console.log(a); // 함수 내부에서 접근 가능
}
foo();
console.log(a); // 오류: 함수 외부에서 접근 불가

 

블록 레벨 Block Level 스코프 - let const

let, const 로 선언된 변수가 중괄호로 묶인 블록 내에서만 유효하다.

블록 스코프를 사용하면 변수의 유효 범위를 블록 내부로 제한할 수 있다.

ES6부터 사용가능하다.

function foo() {
    if (true) {
        let blockScopeVariable = 'I am a block-scoped variable'; // 블록 스코프 변수
        console.log(blockScopeVariable); // 블록 내부에서 접근 가능
    }
    console.log(blockScopeVariable); // 오류: 블록 외부에서 접근 불가
}
foo();

 

☑️ 배운점

함수 레벨이 보다 더 넓고, 블록 레벨이 더 작은 단위이다.

코드의 접근성을 잘 관리해야하려면 변수와도 떼놓을 수 없는 관계라고 알았고

기본 개념의 탄탄한 이해가 중요하다고 느꼈다!