[JavaScript]자바스크립트 블록 스코프

 

 

이전 포스팅에서는 자바스크립트의 일반적인 스코프로 함수 기반 스코프를 공부하였습니다.

이번 포스팅에서는 함수 기반 말고 사용가능한 블록 스코프에 대해 정리해보겠습니다. :-D

---

 

💻 스코프 역할을 하는 블록

 

함수 기반 스코프와 달리,

 

블록 스코프

👉 감싸진 블록 내의 범위로 묶이는 스코프

 

일반적인 블록 스코프의 예시로는 아래와 같은 for문이 있습니다.

for(var i=0;i<10;i++){
	console.log(i);
}

해당 for문과 내에서 선언된 변수 블록 스코프 내에서만 접근 가능한 변수 입니다.

 

👉 '최소 권한 노출의 원칙' 확장, 정보를 코드 블록안에 숨김.

 

❗ 자바스크립트에서는 다른 방법으로 블록 스코프 사용 가능

 

💡 with문

with문 내에서 생성된 객체는 바깥 스코프에 영향을 주지 않고 with문 내에서만 존재

❗ with문은 지양해야할 구조

 

💡 try/catch

try{
    undefined();
}
catch(err){
    console.log(err);   // works
}

console.log(err);       // ReferenceError : 'err' not found

자바스크립트에서의 블록스코프로는 catch 블록 스코프가 있습니다.

 

catch문에서 사용되는 변수는(err) catch문 내에서만 사용가능

 

💡 let

(ES6에 도입된 기능)

let은 선언된 변수를 둘러싼 아무 블록의 스코프에 붙음. 👉 블록 스코프 이용가능

var foo = true;

if(foo){
    let bar = foo * 2;
    bar = something(bar);
    console.log(bar);
}

console.log(bar);   //ReferenceError

+ 블록을 명시적으로 사용하여 리팩토링에 도움을 줄 수 있음

var foo = true;

if(foo){
    { //<- explicit block
        let bar = foo * 2;
        bar = something(bar);
        console.log(bar);
    }
}

console.log(bar);   //ReferenceError

📍 호이스팅

선언문이 어디에서 선언되었든, 선언문을 최상위로 끌어올려 선언된 스코프 내 어디에서든 사용가능하도록 하는 작용

let은 호이스팅 효과를 받지 않습니다.

{
    console.log(bar);   //ReferenceError
    let bar = 2;
}

 📍 가비지 컬렉션

function process(data){
    //do something interesting
}

{
    var someReallyBigData = { ... };
    process(someReallyBigData);
}

var btn = document.getElementById("my_button");

btn.addEventListener("click", function click(evt){
    console.log("button clicked");
}, /*capturingPhase=*/false)

일회성으로 사용될 변수(click함수에서 사용되지 않는 변수)를 블록스코프 내에 선언하여 메모리를 효율적으로 사용가능

 

📍  let 반복문

for(let i=0;i<10;i++){
	console.log(i);
}

반복문에서 let을 사용하면, 반복문이 돌 때마다 다시 변수를 묶어서 이전 반복 결과값이 제대로 들어가도록 해줍니다.

 

💡 const

const도 let과 함께 ES6에서 추가됐습니다.

 

const 또한, 블록스코프를 생성하며, const는 선언된 값에서 변경이 불가합니다.

var foo = true;

if(foo){
    var a = 2;
    const b = 3;
    a = 3;
    b = 4;   //error
}

console.log(a); //3
console.log(b); //ReferenceError