[자바스크립트] 변수의 선언

자바스크립트에서 변수의 선언이란 메모리 공간을 할당하고 그 공간을 식벽할 이름을 부여하는 것을 의미합니다. 자바스크립트에서 변수를 선언하는 방법은 주로 var, let, const 키워드를 사용합니다. 각각의 키워드는 특징이 입니다.

 

변수 선언할 때 기본 구문은 다음과 같습니다.

변수키워드 식별자

여기서 변수 키워드는 var, let, const 중 하나를 사용할 수 있고, 식별자는 변수나 상수의 이름을 의미합니다.

var 변수이름;
let 변수이름;
const 상수이름 = 값;

var

var의 특징

• 함수 스코프를 가집니다. 함수 내에서 선언된 var 변수는 해당 함수 내에서만 유효합니다. 
  

  function myFunction() {
    var functionScoped = "접근 가능";
    console.log(functionScoped); // 출력: 접근 가능
  }
  myFunction();
  console.log(functionScoped); // 에러: functionScoped is not defined​

• 함수 밖에서 선언된 var변수는 전역 변수가 됩니다.

  var globalVar = "전역 변수";
  function testFunction() {
  	console.log(globalVar); // 출력: 전역 변수 
  }
  testFunction();
  console.log(globalVar); // 출력: 전역 변수​

• 초기화하지 않는 var 변수는 undefined 값을 가집니다.

  var myVar; console.log(myVar); // 출력: undefined​

• 같은 이름의 var 변수를 같은 스코프 내에서 여러 번 선언할 수 있습니다.(중복 선언)
  

  var myVar = 1;
  var myVar = 2;
  console.log(myvar);​

• 호이스팅이 발생합니다. 변수 선언이 스코프의 최상단으로 끌어 올려집니다.
  

  console.log(hoistedVar); //출력: undefined
  var hoistedVar = "호이스팅!";
  console.log(hoistedVar); //출력: 호이스팅!​

var의 단점과 대안

• var의 함수 스코프와 호이스팅은 문제를 야기 할 수 있습니다. ES6에서 문제를 해결하기 위해 let과 const라는 새로운 변수 선언 키워드를 도입 했습니다.
• let과 const는 블록 스코프를 가지며, 호이스팅이 발생하지만, 초기화 전에 접근할 수 없는 '일시적 사각지대(Temporal Dead Zone)'를 가집니다.

let

let 특징

• 블록 스코프를 가집니다. { }로 둘러싸인 블록 내에서만 유효합니다.
  

  if (true) {
    let blockScoped = "접근 가능";
    console.log(blockScoped); // 출력: 접근 가능
  }
  console.log(blockScoped); // 에러: blockScoped is not defined​

• 같은 스코프 내에서 같은 이름으로 let 변수를 재선언할 수 없습니다.
  

  let myVar = 1;
  let myVar = 2; 
  // SyntaxError: Identifier 'myVar' has already been declared

• 초기화 하지 않는 let 변수는 undefined 값을 가집니다.
  

  let myVar;
  console.log(myVar); // 출력: undefined​

• 호이스팅이 발생하지만, var와 달리 초기화 단계가 없어 선언 전에 접근하려고 하면 참고 에러 발생합니다.
  

  console.log(hoistedVar); // ReferenceError: Cannot access 'hoistedVar' before initialization
  let hoistedVar = "호이스팅!";​

const

const 특징

• let과 같이 블록 스코프를 가집니다.
  

  if (true) {
      const blockScoped = "나는 블록 스코프 안에 있어요";
      console.log(blockScoped); // 출력: 나는 블록 스코프 안에 있어요
  }
  // console.log(blockScoped); // ReferenceError: blockScoped is not defined​

• 선언과 동시에 초기화를 해야합니다.
  

  const initializedAtDeclaration; // SyntaxError: Missing initializer in const declaration​

• 한번 할당된 값을 변경할 수 없습니다. 객체나 배열의 경우 내부 상태를 변경할 수 있습니다.
  

  const immutableValue = "변경할 수 없어요";
  // immutableValue = "변경하려고 하면 에러가 발생해요"; // TypeError: Assignment to constant variable.
  const obj = { key: "value" };
  obj.key = "newValue"; // 가능
  console.log(obj.key); // 출력: newValue​

• 같은 스코프 내에서 같은 이름으로 const 변수를 재선언할 수 없습니다.
  

  const redeclare = "처음 선언했어요";
  const redeclare = "재선언하려고 하면 에러가 발생해요"; 
  // SyntaxError: Identifier 'redeclare' has already been declared​

• 호이스팅이 발생하지만, let과 마찬가지로 선언 전에 접근하려면 참조 에러가 발생합니다.
  

  console.log(hoistedConst); // ReferenceError: Cannot access 'hoistedConst' before initialization
  const hoistedConst = "호이스팅은 발생하지만, 초기화 전에 접근하면 에러가 발생해요";​

결론

• var는 오래된 프로젝트나 코드에서 주로 보이며,  현대 자바스크립트에서는 let과  const의 사용을 권장합니다.
• 변수의 값이 변할 수 있을때 let, 변할수 없는 상수를 선언할 때는 const 사용합니다
• let과 const는 더 엄격하고 명확한 스코프 관리를 가능하고 코드의 안정성을 높여줍니다.

See Other

• 자바스크립트 튜토리얼