[심화] 02. Symbol·Number·String

JavaScript 심화

Symbol·Number·String: ‘기본형’을 심화스럽게 쓰는 법

키 충돌을 피하는 Symbol, 소수점/NaN 함정, 문자열 처리 메서드를 한 번에 정리합니다.

형태 요약노트 대상 심화 포커스 함정/자주 쓰는 메서드

그림 1. Symbol로 키 충돌을 피하는 방식

Symbol: 키 충돌을 피하는 가장 간단한 방법

객체에 속성을 추가할 때, 문자열 키는 다른 코드와 충돌할 가능성이 있습니다. 이럴 때 Symbol()을 키로 쓰면 유일한 키를 만들 수 있습니다.

const id = Symbol('id');

const user = {
  name: 'Soo',
  [id]: 1234,
};

console.log(user[id]);

자주 나오는 포인트

• Symbol.for('key'): 전역 레지스트리에서 같은 Symbol을 공유합니다.
• 일반 순회(for..in, Object.keys)에서는 Symbol 키가 빠질 수 있습니다.

Number / Math: 숫자와 소수점 함정

자바스크립트의 숫자는 기본적으로 IEEE 754 부동소수점 기반이라, 소수점 연산에서 작은 오차가 생길 수 있습니다. ‘왜 이 값이 0.30000000000000004가 나오지?’ 같은 상황을 예방하려면 아래 패턴을 기억해 두시면 좋습니다.

• 정확한 비교: 소수점 비교는 오차 허용 범위를 두는 방식이 안전합니다.
• NaN 체크: Number.isNaN()을 사용하시면 의도대로 판별하기 좋습니다.

const x = 0.1 + 0.2; 
console.log(x); // 0.30000000000000004

const EPS = 1e-10;
console.log(Math.abs(x - 0.3) < EPS); // true

String: 실무에서 자주 쓰는 메서드들

문자열은 UI/로그/포맷팅에서 정말 많이 사용됩니다. 아래 메서드는 실무에서 사용 빈도가 높으니, 최소한의 ‘감’만 잡아두셔도 도움이 됩니다.

• includes / startsWith / endsWith
• slice / substring (미묘한 차이점 존재)
• padStart / padEnd (자리 맞추기)
• 템플릿 리터럴: `Hello ${name}`

const n = 7;
console.log(String(n).padStart(3, '0')); // 007

참고 링크

• MDN: Symbol
• MDN: Number
• MDN: Math
• MDN: String