const, let, var

Posted 3 years Updated 3 years

By 베짱이가 되고싶은 개미。

📝 블록유효범위를 따르는 const

블록의 문맥 내에서 재할당할 수 없는 변수 입니다.
const는 한 번 선언되면 재할당이 불가능한 변수를 선언하는 데 사용됩니다.
그러나 const로 선언된 변수가 가리키는 값(객체 또는 배열 등)의 내부는 수정될 수 있습니다. 이는 변수가 참조하는 메모리 주소가 변경되지 않는다는 의미입니다.

const discountable = [];

for(let i = 0; i < cart.length; i++){
    discountable.push(i);
}

📝 블록유효범위를 따르는 let

let은 변수를 선언하고, 필요에 따라 재할당할 수 있는 키워드입니다.
let은 블록 유효범위(block scope)를 가지며, 블록 외부에서는 해당 변수에 접근할 수 없습니다.
같은 블록 내에서 같은 이름의 변수를 재선언할 수 없습니다.

if (true) {
    let blockScopedVar = 'I am a block-scoped variable';
    console.log(blockScopedVar); // 유효
}

console.log(blockScopedVar); // 에러: blockScopedVar is not defined

📝 어휘적 유효범위(lexical scope)를 따르는 var

var는 어휘적 유효범위(lexical scope)를 가지며, 함수 유효범위를 따릅니다.
함수 내에서 선언된 변수는 함수 전체에서 접근 가능하며, 함수 외부에서는 변수에 접근할 수 없습니다.
같은 함수 내에서 같은 이름의 변수를 재선언할 수 있습니다.

function exampleFunction() {
    var lexicalScopedVar = 'I am a lexical-scoped variable';
    console.log(lexicalScopedVar); // 유효
}

console.log(lexicalScopedVar); // 에러: lexicalScopedVar is not defined

📝 var를 사용하여 함수 유효범위를 따르는 클로저

// var를 사용한 클로저 예제
function createClosureVar() {
    var closuresVar = [];

    for (var i = 0; i < 5; i++) {
        closuresVar.push(function () {
            console.log(i);
        });
    }

    return closuresVar;
}

var closuresVarArray = createClosureVar();

// 클로저 호출
for (var j = 0; j < closuresVarArray.length; j++) {
    closuresVarArray[j](); // 모든 클로저가 5를 출력
}

var를 사용한 경우, for 루프에서 생성된 클로저가 i를 참조하고 있습니다.
하지만 var는 함수 스코프를 갖기 때문에 for 루프가 종료된 후에도 i는 전역 스코프에 남아 있고, 클로저는 항상 전역 스코프에 있는 i를 참조합니다.
따라서 클로저를 호출할 때 모든 클로저가 i의 최종 값인 5를 출력합니다.

📝 let을 사용하여 클로저 문제를 해결한 코드

// let을 사용한 클로저 예제
function createClosureLet() {
    var closuresLet = [];

    for (let i = 0; i < 5; i++) {
        closuresLet.push(function () {
            console.log(i);
        });
    }

    return closuresLet;
}

var closuresLetArray = createClosureLet();

// 클로저 호출
for (let j = 0; j < closuresLetArray.length; j++) {
    closuresLetArray[j](); // 각 클로저가 해당하는 값(0부터 4까지)을 출력
}

let을 사용한 경우, for 루프에서 생성된 클로저가 i를 참조하고 있습니다.
let은 블록 스코프를 갖기 때문에 각 클로저는 해당 블록에서의 i를 참조합니다.
따라서 클로저를 호출할 때 각각의 클로저는 자신이 생성된 시점의 i 값을 출력하게 됩니다.

📝 블록 유효범위 (Block Scope)

블록 유효범위는 중괄호 {}로 둘러싸인 영역을 가리킵니다.
let 및 const 키워드로 선언된 변수는 블록 유효 범위를 가집니다. 즉, 해당 변수는 그 변수가 선언된 블록 내에서만 유효하며 외부에서 접근할 수 없습니다.
블록은 주로 조건문 (if, else, for, while 등) 내부, 함수 내부, 또는 단독 중괄호 블록으로 정의됩니다.

📝 어휘적 유효범위 (Lexical Scope 또는 Static Scope)

어휘적 유효범위는 코드를 작성하는 시점에 결정되는 스코프의 종류입니다. 변수가 어디에서 선언되었는지에 따라 그 변수의 유효 범위가 정해집니다. 어휘적 유효범위는 함수를 어디에 작성했는지에 따라 함수의 스코프가 결정되는 것을 의미합니다.

function outer() {
  let outerVar = 'I am outer';

  function inner() {
    let innerVar = 'I am inner';
    console.log(outerVar); // outerVar는 어휘적 유효범위에 의해 접근 가능
    console.log(innerVar); // innerVar는 현재 스코프에 선언되어 있어 직접 접근 가능
  }

  inner();

  console.log(outerVar); // outerVar는 여전히 어휘적 유효범위에 의해 접근 가능
  console.log(innerVar); // Error: innerVar는 outer 함수의 스코프를 벗어나서 접근 불가능
}

outer();

위 예제에서 inner 함수는 자신의 스코프와 외부 함수인 outer 함수의 스코프에 접근할 수 있습니다. 이는 어휘적 유효범위에 의한 것입니다. 변수의 유효 범위는 코드를 작성하는 시점에 이미 정해져 있습니다.

📝 함수 유효범위 (Function Scope)

함수 유효범위는 함수 내에서 선언된 변수가 함수 내부에서만 유효하다는 원칙을 나타냅니다. 함수 유효범위는 함수가 실행될 때마다 새로운 스코프가 생성되며, 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.

function exampleFunction() {
  let localVar = 'I am a local variable'; // 함수 유효범위에 속한 변수

  if (true) {
    let blockVar = 'I am a block-scoped variable'; // 블록 유효범위에 속한 변수
    console.log(localVar); // 함수 유효범위 내에서 접근 가능
    console.log(blockVar); // 블록 유효범위 내에서 접근 가능
  }

  console.log(localVar); // 함수 유효범위 내에서 접근 가능
  console.log(blockVar); // Error: 블록 유효범위를 벗어난 곳에서는 접근 불가능
}

위 예제에서 localVar는 함수 유효범위 내에서 선언되어 함수 전체에서 접근 가능합니다. 하지만 blockVar는 블록 내에서만 유효한 변수이므로 블록 외부에서는 접근할 수 없습니다.

요약하면, 어휘적 유효범위는 코드를 작성하는 시점에 변수의 스코프가 결정되며, 함수 유효범위는 함수가 실행될 때 생성되는 스코프입니다. 함수 유효범위는 어휘적 유효범위를 따르기 때문에 함수가 어디에 선언되었는지에 따라 스코프가 결정됩니다.