Javasrcipt 시작하기 - 변수

자바스크립트에서 변수를 선언할 때 사용되는 세 가지 키워드인 var, let, const의 차이점을 설명하고, 추가로 자바스크립트의 변수 타입에 대해 알아보겠습니다.

1. var, let, const 차이점

var

• 유효 범위(Scope): var는 함수 스코프(function scope)를 가집니다. 즉, 변수가 함수 내에서 선언되면 함수 전체에서 접근할 수 있습니다. 함수 외부에서 선언된 경우 전역 스코프를 가집니다.
• 호이스팅(Hoisting): var로 선언된 변수는 호이스팅되며, 이는 변수가 선언되기 전에 참조할 수 있음을 의미합니다. 초기화는 선언 위치에서 이루어지기 때문에 선언 이전에 접근하면 undefined 값을 가집니다.
• 재선언 가능: 동일한 스코프 내에서 여러 번 재선언할 수 있습니다.

function exampleVar() {
  console.log(a);  // undefined (호이스팅)
  var a = 1;
  console.log(a);  // 1
}

exampleVar();

var b = 1;
var b = 2;  // 재선언 가능
console.log(b);  // 2

let

• 유효 범위(Scope): let은 블록 스코프(block scope)를 가집니다. 즉, 변수가 선언된 블록({}) 내에서만 접근할 수 있습니다.
• 호이스팅(Hoisting): let으로 선언된 변수도 호이스팅되지만, Temporal Dead Zone (TDZ)에 의해 선언 이전에 접근할 수 없습니다.
• 재선언 불가능: 동일한 스코프 내에서 여러 번 재선언할 수 없습니다.

function exampleLet() {
  // console.log(a);  // ReferenceError (TDZ)
  let a = 1;
  console.log(a);  // 1
}

exampleLet();

let c = 1;
// let c = 2;  // SyntaxError: Identifier 'c' has already been declared
c = 2;  // 재할당은 가능
console.log(c);  // 2

const

• 유효 범위(Scope): const도 블록 스코프(block scope)를 가집니다.
• 호이스팅(Hoisting): const로 선언된 변수도 호이스팅되지만, Temporal Dead Zone (TDZ)에 의해 선언 이전에 접근할 수 없습니다.
• 재선언 불가능: 동일한 스코프 내에서 여러 번 재선언할 수 없습니다.
• 재할당 불가능: 선언 후 값을 변경할 수 없습니다. 하지만 객체나 배열의 경우, 내부 속성은 변경 가능합니다.

function exampleConst() {
  // console.log(a);  // ReferenceError (TDZ)
  const a = 1;
  console.log(a);  // 1
}

exampleConst();

const d = 1;
// const d = 2;  // SyntaxError: Identifier 'd' has already been declared
// d = 2;  // TypeError: Assignment to constant variable.

const obj = { prop: 1 };
obj.prop = 2;  // 객체의 속성은 변경 가능
console.log(obj.prop);  // 2

2. 자바스크립트 변수 타입

자바스크립트는 동적 타입(dynamic typing) 언어로, 변수를 선언할 때 타입을 명시하지 않습니다. 변수가 저장할 수 있는 데이터 타입은 다음과 같습니다:

기본 데이터 타입(Primitive Types)

1. 숫자(Number): 정수와 부동 소수점 숫자 모두를 나타냅니다.

   let num = 42;
   let floatNum = 3.14;

2. 문자열(String): 텍스트 데이터를 나타냅니다.

   let str = "Hello, world!";

3. 불리언(Boolean): 논리적 참(true)과 거짓(false)을 나타냅니다.

   let isTrue = true;
   let isFalse = false;

4. null: 의도적으로 값이 없음을 나타냅니다.

   let nullVar = null;

5. undefined: 값이 할당되지 않은 변수를 나타냅니다.

   let undefinedVar;

6. 심볼(Symbol): 고유하고 변경 불가능한 값을 나타내며, 주로 객체의 속성 키로 사용됩니다.

   let sym = Symbol('unique');

객체 데이터 타입(Object Types)

1. 객체(Object): 속성의 모음으로, 키-값 쌍으로 이루어집니다.

   let obj = { name: "Alice", age: 25 };

2. 배열(Array): 순서가 있는 리스트로, 인덱스로 요소에 접근합니다.

   let arr = [1, 2, 3];

3. 함수(Function): 실행 가능한 코드 블록으로, 독립된 스코프를 가집니다.

   function greet() {
     console.log("Hello, world!");
   }

4. 날짜(Date): 날짜와 시간을 나타냅니다.

   let now = new Date();

5. 정규 표현식(RegExp): 패턴 매칭을 위한 표현식입니다.

   let regex = /hello/i;

6. 맵(Map): 키-값 쌍을 저장하며, 키의 타입에 제한이 없습니다.

   let map = new Map();
   map.set('key', 'value');

7. 셋(Set): 중복되지 않는 값들의 모음입니다.

   let set = new Set();
   set.add(1);
   set.add(2);

자바스크립트에서 변수를 선언할 때는 이러한 키워드와 데이터 타입을 잘 이해하고 사용하는 것이 중요합니다. var, let, const의 특성을 이해하고 적절히 사용하면, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.