JavaScript 변수의 스코프와 상수의 불변성

JavaScript 변수의 스코프와 상수의 불변성

JavaScript에서 변수의 스코프(scope)와 상수(const)의 불변성(immutability)은 코드의 가독성과 유지보수성을 높이는 핵심 요소입니다. 이 글에서는 이러한 개념을 이해하고 효율적인 코드를 작성하는 방법을 자세히 살펴보겠습니다.

 

 

목차

1. 변수의 스코프 이해하기
2. 블록 스코프와 함수 스코프
3. 상수와 불변성
4. 효율적인 코드 작성을 위한 팁
5. 실용적인 예제

 

1. 변수의 스코프 이해하기

JavaScript에서 스코프는 변수나 함수가 접근할 수 있는 영역을 정의합니다. 주로 세 가지 종류가 있습니다:

• 글로벌 스코프(Global Scope): 프로그램 전체에서 접근 가능한 변수.
• 지역 스코프(Local Scope): 함수 내에서 정의되고 해당 함수에서만 접근 가능.
• 블록 스코프(Block Scope): 코드 블록({ }) 내부에서만 유효한 변수.

// 글로벌 스코프
let globalVar = "I am global";

function localScope() {
    // 지역 스코프
    let localVar = "I am local";
    console.log(globalVar); // 접근 가능
    console.log(localVar);  // 접근 가능
}

console.log(globalVar); // 접근 가능
console.log(localVar);  // 오류 발생
        

 

 

2. 블록 스코프와 함수 스코프

블록 스코프는 let과 const 키워드로 생성되며, 함수 스코프는 var 키워드로 생성됩니다. 블록 스코프는 특히 ES6 이후의 코드에서 중요한 역할을 합니다.

{
    let blockScoped = "Block Scoped";
    var functionScoped = "Function Scoped";
    console.log(blockScoped); // 접근 가능
    console.log(functionScoped); // 접근 가능
}

console.log(functionScoped); // 접근 가능
console.log(blockScoped);    // 오류 발생
        

 

 

3. 상수와 불변성

const로 선언된 변수는 재할당이 불가능하지만, 객체나 배열과 같은 참조 데이터 타입은 내부 값이 변경될 수 있습니다. 이를 관리하기 위해 불변성을 유지하는 방법을 고려해야 합니다.

const immutable = 10;
// immutable = 20; // 오류 발생

const mutableArray = [1, 2, 3];
mutableArray.push(4); // 허용됨
console.log(mutableArray); // [1, 2, 3, 4]
        

 

 

 

 

4. 효율적인 코드 작성을 위한 팁

• 가능한 const를 기본값으로 사용하고, 재할당이 필요한 경우에만 let을 사용하세요.
• 전역 변수 사용을 최소화하여 의도치 않은 충돌을 방지하세요.
• 불변성을 유지하기 위해 Object.freeze()나 라이브러리(immutable.js)를 활용하세요.

 

 

5. 실용적인 예제

변수 스코프와 상수를 활용하여 안정적인 코드를 작성하는 방법을 살펴봅니다:

function calculateArea(radius) {
    const pi = 3.14;
    if (radius > 0) {
        let area = pi * radius * radius;
        return area;
    } else {
        return "Invalid radius";
    }
}

console.log(calculateArea(5)); // 78.5
console.log(calculateArea(-1)); // "Invalid radius"