[Javascript] var, let, const 차이점과 각각의 사용 이유

Javascript에서는 var, let, const가 변수를 선언하는 데 사용되지만 범위, 호이스팅, 재할당 측면에서 약간의 차이가 있습니다.

 

1. var

• var로 선언된 변수는 함수 범위입니다. 즉, 선언된 함수 내에서만 액세스할 수 있습니다.
• 'var'도 호이스팅됩니다. 즉, 컴파일 단계에서 변수 선언이 해당 범위의 맨 위로 이동된다는 의미입니다. 그러나 초기화(할당)는 그대로 유지됩니다.
• var을 사용하면 동일한 범위 내에서 재선언이 가능하며 재할당이 가능합니다.

function example() {
  var x = 10;
  if (true) {
    var x = 20; // same variable as above
    console.log(x); // 20
  }
  console.log(x); // 20
}

 

2. let

• 'let'으로 선언된 변수는 블록 범위입니다. 즉, 해당 변수가 선언된 블록(중괄호로 묶임) 내에서만 액세스할 수 있습니다.
• var와 달리 let은 같은 방식으로 끌어올려지지 않습니다. 호이스팅되지만 실행이 선언에 도달할 때까지 변수는 초기화되지 않습니다.
• let은 다른 블록 내에서 재선언을 허용하지만, 동일한 블록 내에서는 재선언을 허용하지 않습니다. 재할당될 수 있습니다.

function example() {
  let x = 10;
  if (true) {
    let x = 20; // different variable than the one outside the block
    console.log(x); // 20
  }
  console.log(x); // 10
}

 

3. const

• const로 선언된 변수도 블록 범위입니다.
• var, let과 달리 const는 초기화 후에 재할당할 수 없습니다. 선언 시 값을 할당해야 하며, 이 값은 나중에 변경할 수 없습니다.
• const는 동일한 블록 내에서 재선언을 허용하지 않습니다. 

function example() {
  const x = 10;
  // x = 20; // Error: Assignment to a constant variable
  if (true) {
    const x = 20; // different variable than the one outside the block
    console.log(x); // 20
  }
  console.log(x); // 10
}

 

블록 레벨 스코프 vs 함수 레벨 스코프

블록 수준 범위:

• ECMAScript 6(ES6)에서 'let' 및 'const'의 출현과 함께 도입되었습니다.
• let 및 const로 선언된 변수는 블록 수준 범위를 가집니다. 즉, 정의된 블록(중괄호로 묶음) 내에서만 액세스할 수 있습니다.
• 블록 수준 범위에는 조건문(if, else, switch), 루프(for, while) 및 함수로 정의된 블록이 포함됩니다.

function example() {
  if (true) {
    let x = 10; // Block-level scope
    console.log(x); // Accessible within this block
  }

  // console.log(x); // Error: x is not defined (outside the block)
}

 

함수 수준 범위:

• var(ES6 이전)을 사용하여 선언된 변수와 관련됩니다.
• var로 선언된 변수는 함수 수준 범위를 가집니다. 즉, 해당 변수가 정의된 전체 함수에서 액세스할 수 있습니다.
• var 변수는 컴파일 단계에서 해당 범위의 맨 위로 끌어올려집니다.

function example() {
  if (true) {
    var y = 20; // Function-level scope
    console.log(y); // Accessible within the entire function
  }

  console.log(y); // Accessible outside the block due to function-level scope
}

 

요약하자면, 주요 차이점은 블록 수준 범위가 더 세분화되어 변수의 가시성을 특정 블록으로 제한하는 반면, 주로 var와 관련된 함수 수준 범위는 전체 함수에서 변수에 액세스할 수 있게 한다는 것입니다. 블록 수준 범위는 일반적으로 더 안전하고 예측 가능성이 높은 것으로 간주되며 기능 수준 범위와 관련된 일부 문제 및 단점을 해결하기 위해 도입되었습니다. 최신 JavaScript 코드는 이점을 활용하기 위해 let 및 const 사용을 선호하는 경우가 많습니다.

 

블록 레벨 스코프가 더 좋은이유

블록 수준 범위는 여러 가지 이유로 더 나은 것으로 간주되며 함수 수준 범위(특히 'var'를 사용하여 선언된 변수)와 관련된 일부 문제를 해결합니다. 블록 수준 범위의 몇 가지 장점은 다음과 같습니다.

1. 의도하지 않은 변수 재사용 위험 감소:
   • 블록 수준 범위는 의도하지 않은 변수 재사용이나 덮어쓰기의 위험을 줄이는 데 도움이 됩니다. 블록 내에 선언된 변수는 해당 블록에만 국한되어 실수로 이름이 충돌할 가능성을 최소화합니다.
2. 예측 가능한 변수 가시성:
   • 블록 수준 범위는 변수의 가시성을 더욱 예측 가능하게 만듭니다. 변수는 선언된 블록 내에서만 액세스할 수 있으므로 해당 범위를 더 명확하게 이해할 수 있습니다.
3. 향상된 코드 가독성:
   • 블록 수준 범위는 변수가 사용될 위치를 명확하게 하여 코드 가독성을 향상시킵니다. 코드를 읽는 사람은 변수가 선언된 블록을 보면 변수의 범위를 쉽게 확인할 수 있습니다.
4. 호이스팅 문제 방지:
   • let 및 const로 선언된 변수는 var 변수와 같은 방식으로 해당 범위의 맨 위로 끌어올려지지 않습니다. 이는 호이스팅과 관련된 예상치 못한 동작 중 일부를 제거하여 코드를 더욱 직관적으로 만들고 오류 발생 가능성을 줄입니다.
5. const를 사용하여 불변성을 장려합니다:
   • 블록 수준 범위에 'const'를 도입하면 불변 변수의 사용이 권장됩니다. 변수에 값이 할당되면 다시 할당할 수 없으므로 보다 안전한 프로그래밍 방식이 가능합니다.
6. 보다 정확한 오류 처리 가능:
   • 블록 수준 범위를 사용하면 보다 정확한 오류 처리가 가능합니다. 변수가 의도한 블록 외부에서 실수로 사용된 경우 컴파일 타임이나 런타임에 오류가 포착되므로 문제를 더 쉽게 식별하고 수정할 수 있습니다.

전반적으로 블록 수준 범위는 변수 범위 지정에 대한 보다 세부적이고 제어된 접근 방식을 제공하여 버그 가능성을 줄이고 코드 유지 관리성을 향상시키며 최신 JavaScript 모범 사례에 부합합니다. 결과적으로 최신 JavaScript 코드는 bl을 활용하기 위해 변수 선언에 'let' 및 'const'를 사용하는 것을 선호하는 경향이 있습니다.

 

let, const 각각의 존재이유와 각각의 사용경우

JavaScript에서 'let'과 'const' 사이의 선택은 재할당할 수 있는 변수가 필요한지 아니면 초기 할당 후에도 일정하게 유지되는 변수가 필요한지에 따라 달라집니다. 각각을 사용하기 위한 주요 고려 사항은 다음과 같습니다

 

 let:

재할당: let으로 선언된 변수는 새 값으로 재할당될 수 있습니다.

 

사용 사례:

• 시간이 지남에 따라 변수 값을 변경해야 하는 경우.
• 변경 가능한 데이터가 필요한 상황에서.

let counter = 0;
counter = counter + 1; // Reassignment is allowed

 

const

불변: const로 선언된 변수는 초기 할당 후에 재할당될 수 없습니다.

 

사용 사례:

• 변수의 값이 일정하게 유지되어야 하는 경우.
• 특정 변수에 대해 불변성을 적용하려는 시나리오에서.
• 상수 선언에 대한 모범 사례.

const PI = 3.14159;
// PI = 3.14; // Error: Assignment to a constant variable is not allowed

 

각 사용 시기

기본적으로 const 사용:

• 변수 선언에는 기본적으로 'const'를 사용하는 것이 좋습니다.
• 이렇게 하면 의도하지 않은 재할당을 방지하여 코드를 더욱 강력하게 만들고 오류 발생 가능성을 줄이는 데 도움이 됩니다.

const name = "John";
const age = 30;

 

재할당이 필요한 경우 let을 사용하세요.

• 프로그램 실행 중에 변수 값을 변경해야 할 것으로 예상되면 let을 사용하세요.

let count = 0;
count = count + 1; // Reassignment is necessary

 

의도를 고려하세요.

• 변수의 의도에 따라 let 또는 const를 선택하세요. 변수가 일정하게 유지되어야 하는 값을 나타내는 경우 'const'를 사용하세요. 값이 변경될 것으로 예상되면 'let'을 사용하세요.

const MAX_VALUE = 100;
let currentCount = 0;

 

최신 JavaScript 개발에서는 가능할 때마다 'const'를 선호하는 경향이 있습니다. 이 관행은 불변성의 원칙에 부합하여 코드를 더 예측 가능하게 만들고 의도하지 않은 부작용이 발생할 가능성을 줄입니다. 변수 reas를 명시적으로 허용해야 하는 경우에만 'let'을 사용하세요.

 

불변성의 원칙

 

JavaScript의 불변성 원칙은 일단 생성된 데이터의 상태를 수정하지 않는 관행을 말합니다. 불변 프로그래밍은 기존 데이터 구조를 변경하는 대신 원하는 수정 사항을 적용하여 새로운 데이터 구조를 만드는 것을 촉진합니다. 이 접근 방식에는 여러 가지 이점이 있으며 일반적으로 함수형 프로그래밍 원칙과 연관되어 있습니다.

1. 예측 가능성: 불변 데이터는 일단 값이 설정되면 예기치 않게 변경되지 않을 것이라는 확신을 가질 수 있기 때문에 추론하기가 더 쉽습니다. 이러한 예측 가능성으로 인해 버그가 줄어들고 코드를 더 쉽게 이해할 수 있습니다.
2. 동시성: 불변 데이터 구조는 일단 생성되면 변경할 수 없으므로 본질적으로 스레드로부터 안전합니다. 경쟁 조건을 방지하기 위해 잠금이나 기타 동기화 메커니즘이 필요하지 않으므로 병렬 및 동시 프로그래밍이 단순화됩니다.
3. 디버깅: 버그가 발생하면 불변 코드베이스에서 문제의 소스를 추적하는 것이 더 쉬운 경우가 많습니다. 데이터는 제자리에서 변경되지 않으므로 데이터를 생성하거나 수정하는 코드의 특정 부분으로 문제를 격리할 수 있습니다.
4. 함수형 프로그래밍: 불변성은 함수가 불변 데이터에 대해 작동하고 새로운 불변 ​​데이터를 생성하는 함수형 프로그래밍의 핵심 개념입니다. 이는 더 모듈화되고, 구성 가능하며, 테스트 가능한 코드로 이어집니다.
5. 실행 취소/다시 실행 및 시간 이동 디버깅: 불변 데이터 구조는 실행 취소/다시 실행 기능 또는 시간 이동 디버깅을 구현하는 데 매우 적합합니다. 여기서 상태 기록을 유지하여 시간에 따른 변경 사항을 쉽게 추적할 수 있습니다.

JavaScript에서는 불변 데이터 구조를 사용하거나 특정 사례를 따르면 불변성을 달성할 수 있습니다.

 

const 사용: const를 사용하여 변수를 선언하여 해당 값을 다시 할당해서는 안 됨을 나타냅니다. 이렇게 하면 객체나 배열이 완전히 불변이 되는 것은 아니지만 실수로 변수 자체를 재할당하는 것을 방지할 수 있습니다.

 

const myArray = [1, 2, 3];
// myArray.push(4); // Error: 'myArray' is read-only

 

내부 돌연변이 방지: 객체나 배열을 제자리에서 수정하는 대신 원하는 변경 사항을 적용하여 새 객체나 배열을 만듭니다.

 

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4]; // Create a new array with the desired change

 

불변 라이브러리 사용: Immutable.js와 같은 라이브러리는 JavaScript 애플리케이션에서 불변성을 촉진하도록 설계된 List 및 Map과 같은 불변 데이터 구조를 제공합니다.

 

const Immutable = require('immutable');
const originalList = Immutable.List([1, 2, 3]);
const newList = originalList.push(4); // Returns a new List with the added element

 

불변성을 수용하면 특히 크고 복잡한 애플리케이션에서 유지 관리 및 확장성이 뛰어난 코드를 얻을 수 있습니다. 그러나 완전히 새로운 데이터 구조를 만들면 추가 계산 비용이 발생할 수 있으므로 특정 시나리오에서는 균형을 맞추고 성능에 미치는 영향을 고려하는 것이 중요합니다.