🎨 템플릿 리터럴, Symbol, BigInt – 자바스크립트 특수 타입 완전 정리

🎨 템플릿 리터럴, Symbol, BigInt – 자바스크립트 특수 타입 완전 정리

ES6 이후 자바스크립트에는 보다 정밀하고 안전한 코드를 위한 특수 타입이 도입되었습니다.
이 글에서는 실무에서 잘 알려지지 않았지만 중요한 세 가지 특수 타입인 템플릿 리터럴, Symbol, BigInt를 정리합니다.

---

1. 템플릿 리터럴 (Template Literal)

백틱(``)을 사용하여 문자열 보간, 다중 줄 문자열, HTML 생성 등에 활용합니다.

const name = "Alice";
const greeting = `Hello, ${name}!`; // 👉 Hello, Alice!

const html = `
  <div>
    <h1>Welcome</h1>
  </div>
`;

✅ 특징:

• 줄바꿈 유지 가능
• 표현식 보간 가능 (${ })
• 태그드 템플릿 함수와 결합 가능

---

2. Symbol – 유일무이한 식별자 (ES6)

Symbol은 절대로 중복되지 않는 고유 값을 생성하며,
객체의 숨겨진 키로도 활용됩니다.

const id1 = Symbol("userId");
const id2 = Symbol("userId");

console.log(id1 === id2); // 👉 false (항상 고유)

const user = {
  name: "Bob",
  [id1]: 1234
};

console.log(user[id1]); // 👉 1234
console.log(Object.keys(user)); // 👉 ["name"] → Symbol 키는 안 나옴

✅ 특징:

• 📌 문자열로 변환 불가 (id + "" 하면 TypeError)
• 📌 for...in 또는 Object.keys에 포함되지 않음
• 📌 접근은 반드시 대괄호 표기법으로만 가능

---

3. BigInt – 정수 오버플로우 방지용 초대형 숫자 (ES2020)

BigInt는 정수 범위를 넘어서는 아주 큰 숫자를 정확하게 표현할 수 있는 타입입니다.
끝에 n을 붙여 생성하며, Number와 혼용 불가합니다.

const normal = 9007199254740991;      // Number 최대 안전 정수
const big = 9007199254740993n;        // BigInt

const result = big + 2n;              // 👉 9007199254740995n

✅ 주의사항:

• BigInt끼리만 연산 가능 → Number + BigInt ❌
• typeof는 "bigint"
• Math 객체와는 호환되지 않음 (Math.sqrt(big) 불가)

---

4. 실무 활용 팁

• 🧩 템플릿 리터럴: 문자열 조합, 동적 SQL, HTML 조각 생성 등
• 🔐 Symbol: 은닉된 객체 속성, 내부용 메타데이터 키 관리
• 🧮 BigInt: 금액 계산, 블록체인 ID, 고정 정밀 정수 처리

---

📌 마무리

템플릿 리터럴, Symbol, BigInt는 자바스크립트의 표현력과 안정성을 크게 향상시킨 기능입니다.
초기에는 잘 안 쓰이는 것처럼 보이지만, 특정 상황에서 매우 유용하며 문제 해결 능력의 범위를 넓혀줍니다.

다음 글에서는 async generator, Promise.allSettled 등 ES2021~ES2023의 비동기 처리 개선 기능을 소개하겠습니다.