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

이번 9편에서는 자바스크립트에서 비동기 동작이나 동등 비교 등에서 발생하는 혼란스러운 상황들을 구체적으로 정리합니다.

✅ 1. async function은 항상 Promise를 반환한다

📌 문제 상황

async function test() {
  return 1;
}

console.log(test()); // Promise { <fulfilled>: 1 }

📌 설명

async 함수는 return 값과 무관하게 항상 Promise를 반환합니다. 동기처럼 보여도 비동기로 동작합니다.

---

✅ 2. Promise.prototype.finally는 값에 영향을 주지 않는다

Promise.resolve(42)
  .finally(() => console.log("done"))
  .then(value => console.log(value));
// done
// 42

📌 설명

.finally()는 전달된 값을 변경하지 않고, 다음 then으로 그대로 전달합니다.

---

✅ 3. undefined == null은 true지만 undefined === null은 false

undefined == null; // true
undefined === null; // false

📌 설명

==은 타입 변환을 허용한 느슨한 비교이기 때문에 null과 undefined는 같다고 평가됩니다. 하지만 ===는 엄격한 비교로 타입이 다르면 false입니다.

---

✅ 4. 객체 리터럴 안에서 중복된 키는 마지막 키로 덮어씌워진다

const obj = {
  a: 1,
  a: 2
};
console.log(obj.a); // 2

📌 설명

동일 키가 여러 번 선언되면 가장 마지막 선언이 유효합니다. 이는 코드 가독성을 떨어뜨리고 실수를 유발할 수 있습니다.

---

✅ 5. 함수 내부에서 선언한 변수는 호이스팅된다

function test() {
  console.log(a); // undefined
  var a = 5;
}

📌 설명

var로 선언된 변수는 함수 스코프 전체로 호이스팅되지만, 값은 할당되지 않기 때문에 초기 접근 시 undefined가 됩니다.

---

✅ 결론

비동기 처리와 비교 연산은 자바스크립트 개발에서 실수가 잦은 영역입니다. 이를 정확히 이해하면 예기치 않은 버그를 줄이고 코드 안정성을 확보할 수 있습니다.