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

이번 10편에서는 자바스크립트에서 데이터 구조와 참조 처리에서 실수할 수 있는 대표적인 사례들을 정리합니다.

✅ 1. 객체를 비교하면 항상 false?

📌 문제 상황

const a = { x: 1 };
const b = { x: 1 };
console.log(a === b); // false

📌 설명

두 객체는 내용이 같더라도 메모리 주소가 다르기 때문에 참조 비교 결과는 false가 됩니다.

📌 대처

객체의 값을 비교하려면 JSON.stringify를 이용하거나 lodash의 isEqual 같은 유틸 함수를 사용합니다.

---

✅ 2. 배열의 길이는 자동 조절된다

📌 문제 상황

const arr = [1, 2, 3];
arr.length = 1;
console.log(arr); // [1]

📌 설명

배열의 length 값을 변경하면 배열 크기에 영향을 주며, 잘린 요소는 삭제됩니다.

---

✅ 3. for...in은 배열 순회에 적합하지 않다

📌 문제 상황

const arr = ['a', 'b', 'c'];
arr.test = 'extra';

for (let key in arr) {
  console.log(key); // '0', '1', '2', 'test'
}

📌 설명

for...in은 객체 속성까지 순회하기 때문에 배열 요소만 순회하려면 for, forEach, for...of를 사용하는 것이 좋습니다.

---

✅ 4. 문자열은 불변(immutable)이다

📌 문제 상황

let str = "hello";
str[0] = "H";
console.log(str); // "hello"

📌 설명

문자열은 불변이기 때문에 직접 인덱스를 수정할 수 없습니다. 새로운 문자열로 재할당해야 합니다.

---

✅ 5. arguments와 rest parameter는 다르다

📌 문제 상황

function test() {
  console.log(arguments);
}

test(1, 2);

📌 설명

arguments는 유사 배열 객체이며, 화살표 함수에서 사용할 수 없습니다. ES6의 rest parameter(...args)는 배열로 동작합니다.

---

✅ 결론

데이터 구조와 참조 관련된 개념은 자바스크립트를 정확히 이해하는 데 필수입니다. 특히 객체와 배열의 비교 및 조작에 익숙해지면 예상치 못한 오류를 방지할 수 있습니다.