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

자바스크립트는 다소 관대한 문법 구조로 인해 직관과 다른 결과를 만들어내는 경우가 많습니다. 이번 3편에서는 복잡하거나 덜 알려진 문법적 특성으로 인해 실수하기 쉬운 코드 사례들을 더 살펴보겠습니다.

---

✅ 1. Object.keys가 순서를 보장하지 않는 경우

📌 문제 상황

const obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(obj)); // ['2', '7', '100']

📌 설명

자바스크립트 객체의 key가 숫자처럼 생긴 문자열이면 정렬된 순서로 반환됩니다. 일반 문자열 key는 삽입 순서가 유지됩니다.

📌 대처

Map 객체를 사용하면 삽입 순서를 보장받을 수 있습니다.

---

✅ 2. for...in과 for...of의 차이

📌 문제 상황

const arr = ["a", "b", "c"];
for (let i in arr) {
  console.log(i); // '0', '1', '2'
}
for (let v of arr) {
  console.log(v); // 'a', 'b', 'c'
}

📌 설명

• for...in은 인덱스(또는 객체의 key)를 순회
• for...of는 값(value)를 순회

📌 대처

배열을 순회할 때는 for...of를 사용하는 것이 의도에 더 적합합니다.

---

✅ 3. new Array(3)과 [undefined, undefined, undefined]는 다르다

📌 문제 상황

const a = new Array(3);
const b = [undefined, undefined, undefined];
a.map(x => 1); // [ <3 empty items> ]
b.map(x => 1); // [1, 1, 1]

📌 설명

new Array(3)은 실제로 값을 채운 것이 아닌 비어 있는 슬롯을 가진 배열입니다. 따라서 .map()이나 .forEach() 같은 메서드는 동작하지 않습니다.

📌 대처

실제로 빈 값을 채운 배열을 만들려면 Array.from 또는 .fill()을 사용합니다.

Array(3).fill(undefined);

---

✅ 4. with 문은 쓰지 않는 것이 좋다

📌 문제 상황

with (obj) {
  console.log(key); // 어떤 스코프의 변수인지 명확하지 않음
}

📌 설명

with 문은 스코프 체인을 모호하게 만들어 디버깅과 최적화를 어렵게 합니다. 'strict mode'에서는 사용조차 불가능합니다.

📌 대처

명시적인 변수 참조를 통해 코드를 명확하게 유지합니다.

---

✅ 5. setTimeout의 최소 지연 시간은 0이 아니다

📌 문제 상황

setTimeout(() => console.log('Hi'), 0);

📌 설명

지연 시간이 0이어도 브라우저 환경에서는 최소 4ms의 지연이 발생할 수 있습니다. 이는 이벤트 루프와 태스크 큐의 특성 때문입니다.

📌 대처

즉시 실행처럼 보이게 하려면 queueMicrotask 또는 Promise.resolve().then()을 사용하는 것도 고려할 수 있습니다.

---

✅ 결론

자바스크립트는 언뜻 보기에는 단순해 보여도, 내부 동작을 정확히 이해하지 않으면 미묘한 오류를 낼 수 있습니다. 이번 편에서도 다양한 예제와 함께 자바스크립트 문법상의 함정을 살펴보았습니다. 특히 배열, 반복문, 비동기 처리 관련 로직은 실수하기 쉬우니 반복적으로 확인해보는 것이 좋습니다.