Javascript

[JavaScript] 자바스크립트 | 데이터타입 data types | let vs var | hoisting

@leem 2025. 3. 18. 19:43
이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.

 

 

1. 변수 선언 (let vs var vs const)

JavaScript에서 변수를 선언하는 방법에는 let, const, var가 있습니다.

📌 Hoisting (호이스팅)

  • JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미.
  • 즉, 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작함.

1️⃣ 변수 Hoisting

  • var → 호이스팅 O (초기값 undefined)
  • let, const → 호이스팅 O (하지만 TDZ 때문에 초기화 전 접근 불가 → 오류 발생)

2️⃣ 함수 Hoisting

  • 함수 선언문 (function foo() {}) → 완전히 호이스팅 (호출 가능).
  • 함수 표현식 (const foo = function() {}) → Hoisting은 되지만, 변수가 먼저 undefined로 초기화되므로 호출 불가.

1. let (ES6 추가)

let name = 'ellie'; // 변수 선언
console.log(name); // ellie
name = 'hello'; // 값 변경 가능
console.log(name); // hello

✅ 특징

  • 블록 스코프(Block Scope)를 가짐 {} 내부에서만 사용 가능.
  • 값 변경 가능 (mutable).
  • 호이스팅(hoisting)은 되지만 초기화되지 않음 → 사용 전에 반드시 선언해야 함.

2. var (사용 지양)

{
  age = 4; // 선언 없이 할당 가능 (문제 발생 가능)
  var age; // 호이스팅됨
}
console.log(age); // 4 (블록을 빠져나와도 접근 가능)

✅ 문제점

  • 호이스팅(Hoisting) 발생 → 변수 선언이 코드의 최상단으로 끌어올려짐.
  • 블록 스코프가 없음 → {} 내부에서 선언해도 바깥에서 접근 가능.
  • 예기치 않은 오류 발생 가능 → 선언 전에 값을 할당해도 오류 발생 X.

결론:
👉 var 대신 let과 const를 사용해야 함!

3. const (값 변경 불가능)

const daysInWeek = 7;
const maxNumber = 5;

✅ 특징

  • 상수(Constant)로, 값을 변경할 수 없음.
  • 반드시 선언과 동시에 초기화해야 함.
  • 보안, 성능, 오류 방지를 위해 기본적으로 const 사용 권장.

결론:
👉 const는 변경되지 않는 값(상수) 저장에 사용.
👉 변경해야 하는 값이라면 let을 사용.

2. 불변(Immutable) vs 가변(Mutable) 데이터

1. 불변 데이터 타입 (Immutable)

  • 원시 타입 (Primitive Type): number, string, boolean, null, undefined, symbol
  • 객체 동결 (Object.freeze())

2. 가변 데이터 타입 (Mutable)

  • 객체(Object): JavaScript에서는 객체가 기본적으로 변경 가능(mutable).

✅ 불변성을 유지하는 이유

  • 보안(Security): 데이터 조작을 방지.
  • 스레드 안전(Thread Safety): 멀티스레드 환경에서도 안정적으로 작동.
  • 예상치 못한 변경 방지: 코드의 예측 가능성 증가.

3. JavaScript 데이터 타입

원시 타입 (Primitive Types)

number 숫자 (정수, 실수 포함)
string 문자열
boolean 참/거짓 값
null 값이 없음
undefined 값이 할당되지 않음
symbol 고유한 식별자 
const count = 17; // 숫자
const size = 17.1; // 실수
console.log(`value: ${count}, type: ${typeof count}`); // number
console.log(`value: ${size}, type: ${typeof size}`); // number

숫자 타입 (Number)

const infinity = 1 / 0; // 무한대
const negativeInfinity = -1 / 0; // 음수 무한대
const nAn = 'not a number' / 2; // NaN (숫자가 아님)
console.log(infinity); // Infinity
console.log(negativeInfinity); // -Infinity
console.log(nAn); // NaN

📌 Infinity와 NaN(Not a Number) 처리를 잘해야 함!

BigInt (큰 숫자)

const bigInt = 1234567890123456789012345678901234567890n;
console.log(`value: ${bigInt}, type: ${typeof bigInt}`); // bigint

✅ 매우 큰 정수를 처리할 때 사용하지만 아직 일반적인 사용은 비추천!

문자열 (String)

const char = 'c';
const brendan = 'brendan';
const greeting = `hello ${brendan}!`; // 템플릿 리터럴
console.log(`value: ${greeting}, type: ${typeof greeting}`); // string

불리언 (Boolean)

const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`); // boolean
console.log(`value: ${test}, type: ${typeof test}`); // boolean

❌ false로 취급되는 값: 0, null, undefined, NaN, '' (빈 문자열)
✅ 그 외 모든 값은 true로 평가됨.

null vs undefined

let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`); // object (오래된 JS 버그)

let x;
console.log(`value: ${x}, type: ${typeof x}`); // undefined

📌 null은 "값이 없음"을 명시적으로 나타냄, undefined는 "변수가 선언되었지만 값이 할당되지 않음".

심볼 (Symbol) - 유일한 식별자

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false (서로 다른 고유 값)

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true (전역 심볼은 같은 키를 공유)
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

📌 객체의 고유한 키를 만들 때 사용!

4. 동적 타이핑 (Dynamic Typing)

JavaScript는 변수 타입을 동적으로 결정하는 언어입니다.

let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`); // string
text = 1; // 숫자로 변경
console.log(`value: ${text}, type: ${typeof text}`); // number
text = '7' + 5; // 문자열과 숫자를 더하면 문자열이 됨
console.log(`value: ${text}, type: ${typeof text}`); // string
text = '8' / '2'; // 문자열이 숫자로 변환되어 연산 수행
console.log(`value: ${text}, type: ${typeof text}`); // number

📌 JavaScript는 타입이 변할 수 있으므로 예상치 못한 오류가 발생할 수 있음!