함정에 빠지기 쉬운 자바스크립트 문법5

자바스크립트는 강력하고 유연한 언어이지만, 특유의 관대한 문법으로 인해 실수가 발생하기 쉬운 구조를 가지고 있습니다. 이번 5탄에서는 비교적 간과하기 쉬운 문법적 특성과 그로 인해 발생하는 문제들을 소개합니다.

---

✅ 1. undefined와 null의 오해

📌 문제 상황

console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object'

📌 설명

undefined는 선언만 하고 값이 할당되지 않은 변수의 타입이고, null은 의도적으로 "없음"을 나타내는 객체입니다. 그러나 typeof null은 'object'를 반환하기 때문에 혼동을 줄 수 있습니다.

📌 대처

타입 체크 시 typeof 외에 === null 같은 구체적 비교를 병행합니다.

---

✅ 2. instanceof는 서로 다른 context에서 실패할 수 있음

📌 문제 상황

const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const xArray = window.frames[0].Array;
const arr = new xArray();

console.log(arr instanceof Array); // false

📌 설명

instanceof는 prototype 체인을 기준으로 작동하므로 서로 다른 실행 컨텍스트(예: iframe)에서는 실패할 수 있습니다.

📌 대처

Array.isArray() 같은 안전한 내장 함수 사용을 권장합니다.

---

✅ 3. Object.assign은 깊은 복사를 하지 않는다

📌 문제 상황

const obj1 = { nested: { a: 1 } };
const obj2 = Object.assign({}, obj1);
obj2.nested.a = 999;
console.log(obj1.nested.a); // 999

📌 설명

Object.assign()은 얕은 복사(shallow copy)를 수행합니다. 참조형 속성은 그대로 공유됩니다.

📌 대처

깊은 복사가 필요할 땐 structuredClone() 또는 재귀 기반의 유틸 함수를 사용합니다.

---

✅ 4. 숫자 비교 시 정밀도 문제

📌 문제 상황

0.1 + 0.2 === 0.3; // false

📌 설명

자바스크립트는 IEEE 754 부동소수점 방식을 사용하므로, 소수점 연산에서 정밀도 문제가 발생할 수 있습니다.

📌 대처

소수점 계산 후 오차를 허용하는 범위로 비교:

Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON

---

✅ 5. eval()은 가능한 사용하지 말 것

📌 문제 상황

eval('var x = 10');
console.log(x); // 10

📌 설명

eval()은 문자열을 코드로 실행시키며, 스코프 오염 및 보안 이슈를 유발할 수 있습니다.

📌 대처

JSON.parse, Function, 또는 명확한 로직 분기로 대체하는 것이 바람직합니다.

---

✅ 결론

자바스크립트의 유연함은 종종 예상치 못한 결과를 만들어냅니다. 특히 타입 판별, 복사 방식, 숫자 연산 등은 실수하기 쉬운 영역입니다. 이 글에서 소개한 사례들을 이해하고 명확한 로직 작성 습관을 갖춘다면, 오류를 줄이고 더 안정적인 코드 작성이 가능할 것입니다.