[JAVASCRIPT] Variables : 변수와 상수 - let, const, var

Variable

변수

• 변할 수 있는 데이터
• 사용자나 서버로부터 입력 받은 데이터를 저장할 때 쓰이는 "이름이 붙은 저장소"
• 데이터 저장을 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

 

 

Variable vs Identifier

Identifier에 대해서는 "[JAVASCRIPT] Identifier : 식별자" 지난 포스팅 참고

변수라고 해야 할 곳에 식별자라고 하기도,

식별자라고 해야 할 곳에 변수라 하기도 하면서 혼용한다.

이는 문맥을 통해 무엇을 얘기하는지 유추가 가능하기 때문이다.

 

 

let message = "Hello!";

• Identifier(식별자)는? "상자"
• Variable(변수)는? "상자"란 이름이 붙은 공간

 

 

변수 선언과 할당

let value; : value라는 식별자를 가진 변수를 선언하기 위해서 선언

value = 1; : 변수 value에 1이라는 값을 할당

let message;          // 선언
message = "Hello!";   // 할당
console.log(message); // ? Hello!

 

 

 

---

let

변수(variable)를 생성하는 키워드

바뀔 수 있는 값. mutable data type

 

ES6에서 새롭게 추가됐고, 그 전에는 var이 유사한 역할을 했다.

 

let message;          // 선언
message = "Hello!"    // 할당
console.log(message); // ? Hello!

message = "World!";   // 재할당
console.log(message); // ? World!

let으로 선언한 message는 바뀔 수 있는 값이기 때문에 재할당이 가능하다.

 

그리고 재선언은 필요하지 않다. 만일 두 번이상 선언할 경우에는 문법 오류(SyntaxError)가 발생한다.

let message = "Hello!";
let message = "Bye!"; // ? SyntaxError: Identifier 'message' has already been declared

 

 

single let pattern

let을 하나만 쓰면서 선언하는 방식

let user = "John",
    age = 25,
    message = "Hello";

 

 

 

---

const

상수(constant)를 생성하는 키워드

한 번 지정하면 변하지 않는 고정 값. immutable data type

 

const value = 1;
value = 2;       // ? TypeError: "value" is read-only
const value = 2; // ? SyntaxError: Identifier 'value' has already been declared

만일 값을 재할당 하려고 하면 TypeError가 발생한다.

그리고 재선언 역시 let과 동일하게 SyntaxError가 발생한다.

 

 

immutable data type의 사용을 권장하는 이유는?

1. Security (안전)
2. Thread safety
3. Reduce human mistake

여러 요인으로부터 값이 원치 않게 변경되는 것을 막기 위해서 상수를 사용한다고 이해하면 된다.

 

 

대문자 상수

변하지 않고, 기억하기 힘든 값을 상수에 할당해서 별칭으로 사용한다.

이 때, 이름은 카멜표기법이 아닌 대문자와 밑줄로 구성하는 것이 관습이다.

const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

 

 

 

---

let vs const

재선언 범위

앞서 let과 const를 언급하면서 재선언할 경우 SyntaxError가 발생함을 언급했는데

이 범위는 같은 block scope(블록 범위)에 한해서다.

 

let과 const 모두 다른 블록 범위 내에서는 재선언이 가능하다.

const a = 1;       // a 최초 선언

if(a === 1) {      // 조건문을 위한 블록 범위{} 생성
  const a = 3;     // a 재선언
  console.log(a);  // ? 3 // 같은 블록 범위 내에서는 재선언한 값 적용 확인
}

console.log(a);    // ? 1 // 블록 범위 바깥으로 나오면 무효. 최초 선언한 값 적용 확인

 

 

호환성

let과 const 모두 IE에서 미지원하기에 var을 대체로 사용해야 한다.

(다만, 2023년 기준 현재는 IE가 종료된 상태이므로 크게 의미는 없을 것 같다.)

(호환성 확인 참고 : caniuse)

 

 

 

---

var

현재는 권장하지 않는 과거의 문법

ES6에서 등장한 let, const 이전에 변수 선언 키워드로 사용됐었다.

 

 

let과 비교한 var의 특징

(1) 선언하기 이전에도 값 할당이 가능하다.

(2) 중복해서 값 할당이 가능하다.

console.log(age);   // ? undefined
age = 4;
console.log(age);   // ? 4
var age;

특징 (1) (2) 로 인해서 var hoisting이 발생하기 때문에 문제를 일으킬 가능성이 높다.

 

여기서 hoising(호이스팅)은?

어디서 선언했는가와 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말한다.

 

 

(3) block scope이 없다.

블록 범위를 철저히 무시한다.

{
  age = 4;
  var age;
}
console.log(age); // ? 4

 

 

 

---

참고

• 모던 JavaScript 튜토리얼: 변수와 상수
• [책] 혼자 공부하는 자바스크립트