[JavaScript 기초] 2. Variable

📌 Variable

• 변수(variable)란 변경될 수 있는 값을 의미합니다.
• JavaScript에서 변수 선언을 하기 위해서는 아래 세 가지 키워드를 사용할 수 있습니다.
  • var
  • let
  • const

---

📌 var

• var는 ES6 이전에 사용되었던 키워드로, let 키워드가 등장한 현재는 대부분 사용하지 않고 있습니다.

 

💬 var 키워드를 사용하면 안되는 이유 1

• var 키워드를 사용하지 않는 이유, 그리고 사용을 권장하지 않는 이유 그 첫 번째는 다음과 같습니다.

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

• var 키워드를 사용하면 위처럼 변수 선언보다 먼저 출력을 수행할 수도 있고, 값을 할당할 수도 있습니다. 심지어는 에러조차 발생하지 않습니다.
• 위와 같이 동작할 수 있는 이유는 바로 JavaScript의 "변수 호이스팅" 기능 때문입니다.
• 호이스팅(hoisting)이란 말 그대로 어디에 선언했는지와 상관 없이 항상 선언을 제일 위로 끌어올려주는 것을 말합니다.
• 즉, 위에서 작성한 코드는 사실 변수 호이스팅을 통해 다음과 같이 동작하는 것이죠.

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

 

💬 var 키워드를 사용하면 안되는 이유 2

• 두 번째 이유는 var 키워드가 함수 레벨 스코프를 따르기 때문입니다.

{
    var age;
    age = 4;
}

console.log(age);	// "4"

• 이는 즉, 블록을 철저히 무시하기 때문에 블록을 이용해서 아무리 깊은 곳에 변수를 선언해도 아무 곳에서나 이를 보거나 변경할 수 있다는 의미입니다.
• 즉, 변수의 신뢰성과 안정성이 떨어진다는 의미이죠.

---

📌 let

• let은 ES6에서 추가된 키워드로, var와 다르게 블록 레벨 스코프를 따릅니다.

let name = 'global name';

{
    console.log(name);	// ""
    let name = 'block name';
    console.log(name);	// "block name"
}

console.log(name);	// "global name"

• 즉, 위와 같은 코드를 실행할 경우 let 키워드로 선언된 변수의 경우 블록 레벨 스코프를 따르기 때문에 블록 바깥에 선언된 name 변수와 블록 안에 선언된 name 변수는 서로 다른 메모리 주소를 참조하게 됩니다.
• 이를 통해 변수를 좀 더 안정적으로 사용할 수 있습니다.

---

📌 const

• const는 상수를 선언할 때 사용하는 키워드로, 변수 선언 이후 변경되지 않는 값을 저장하기 위해 사용합니다.

const daysInWeek = 7;
const maxNumber = 5;

• 값이 변경되지 않는 것을 보장하기 때문에 신뢰성이 높고, Thread Safe하며 개발자의 실수를 줄일 수 있다는 특징을 갖고 있습니다.
  • "favor immutable data type always"

---

📌 Variable Type

• JavaScript의 변수 타입에 대해 알아보겠습니다.
• JavaScript에는 다음과 같은 변수 타입들이 존재합니다.
  • number, string, boolean, null, undefined, symbol
  • object, box container
  • function, first-class function

 

💬 number

• 다른 프로그래밍 언어의 경우 숫자 타입 하나를 선언하더라도 int, long, float, double 등 여러가지 방법으로 타입을 선언해줄 수 있습니다.
• 다만, JavaScript의 숫자 타입으로는 number 하나 뿐입니다. 심지어는 따로 타입을 설정해주지 않아도 동적으로 타입이 결정되기 때문에 다음과 같이 사용할 수 있습니다.

let a = 12;
let b = 1.2;

 

💬 undefined

• undefined란 변수가 선언만 되어 있고 값이 할당되지 않은 경우를 말합니다.

 

💬 symbol

• symbol은 이후에 map과 같은 자료구조에서 고유한 식별자가 필요하거나, 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 사용할 수 있습니다.
• 간혹 식별자를 string을 이용해서 주는 경우도 있지만, 이 경우 다른 모듈이나 파일에서 동일한 string을 썻을 때 동일한 식별자로 간주되어 문제가 발생할 수 있습니다.
• 하지만, symbol은 동일한 식별자를 이용해서 선언하여도 서로 다른 식별자로 간주하기 때문에 이러한 문제에서 자유로울 수 있습니다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);	// false

• 만약 동일한 string으로 선언한 식별자를 서로 같은 식별자로 간주하고 싶을 때에는 다음과 같이 Symbol.for를 사용할 수 있습니다.

const symbol1 = Symbol.for('id');
const symbol2 = Symbol.for('id');
console.log(symbol1 === symbol2);	// true

• 추가로 symbol 값을 출력하고 싶을 때에는 반드시 symbol1.description과 같이 string으로 변환한 뒤 출력해주어야 합니다.

console.log(symbol1.description);	// "id"