자바스크립트의 숨겨진 비밀 : 우리가 몰랐던 JS의 흥미로운 동작들

🔥 1. == vs ===의 충격적인 차이점

자바스크립트에서 동등 연산자(==)와 일치 연산자(===)는 다르게 동작한다

console.log(0 == "0"); // true (자동 형변환)
console.log(0 === "0"); // false (자료형까지 비교)
console.log(false == "0"); // true (자동 형변환)
console.log(false === "0"); // false

📌 왜 그럴까?

• == 연산자는 자동 형변환(coercion)을 수행하여 false와 "0"을 둘 다 숫자 0으로 변환하여 비교한다.
• === 연산자는 자료형까지 엄격하게 비교하므로 false !== "0"이 된다.

✅ 실전 팁: 가능하면 항상 ===를 사용하여 예기치 않은 버그를 방지하자!

 

 

🧐 2. [] + [] 하면 어떤 값이 나올까?

console.log([] + []); // "" (빈 문자열)

📌 이해해보자!

• + 연산자는 문자열 결합과 덧셈 역할을 한다.
• [](배열)는 기본적으로 문자열로 변환될 때 ""(빈 문자열)가 된다.
• 결국 "" + "" = ""가 되어 빈 문자열을 출력한다.

✅ 실전 팁: + 연산자를 사용할 때, 자료형 변환을 항상 고려하자!

 

 

🔥 3. typeof null이 "object"인 이유?

 

console.log(typeof null); // "object"

📌 왜 이런 일이?

• 초기 자바스크립트 설계 오류 때문에 null을 객체로 잘못 분류했다.
• null은 사실 객체가 아니지만, 하위 호환성을 위해 수정되지 않았다.

✅ 실전 팁: null을 확인할 때는 typeof보다 === null을 사용하자.

if(value === null) {
	console.log("This is really null!");
}

 

 

 

🤯 4. 함수도 객체다? 함수에 속성을 추가할 수 있다!

자바스크립트에서는 함수도 객체이므로 속성을 추가할 수 있다.

function hello() {
	console.log("Hello, world!");
}

hello.language = "JavaScript";
console.log(hello.language); // "JavaScript"

📌 이게 가능하다고?

• 함수는 객체로 취급되므로 key-value 형태의 속성을 추가할 수 있다.
• 하지만 일반적으로 이렇게 사용하진 않고, 보통 객체를 활용한다.

✅ 실전 팁: 함수에 속성을 추가하는 것은 특수한 경우에만 사용하자!

 

 

💡 5. setTimeout의 실행 순서, 정말 예상대로일까?

console.log("Start");

setTimeout(() => {
	console.log("Timeout finished!");
}, 0);

console.log("End");

📌 출력 결과는?

Start
End
Timeout finished!

😵‍💫 왜 "Timeout finished!"가 마지막에 출력될까?

• 자바스크립트의 이벤트 루프(Event Loop) 때문!
• setTimeout의 콜백은 비동기적으로 처리되므로, 현재 실행 중인 **동기 코드(= main thread)**가 끝난 후 실행된다.

✅ 실전 팁: setTimeout(fn, 0)도 즉시 실행되지 않으므로, 순서를 예상할 때 주의하자!

 

 

🛠️ 6. console.log()의 의외의 함정

const obj = { value: 10 };
console.log(obj);

obj.value = 20;
console.log(obj);

📌 출력 결과 예상:

{ value: 10 }
{ value: 20 }

😱 하지만, 개발자 콘솔에서 obj를 클릭해 보면 두 개 다 { value: 20 }로 나올 수 있다!

• 이유는 객체는 참조(reference)로 저장되므로, 나중에 변경된 값이 반영되기 때문.

✅ 실전 팁: 만약 특정 시점의 값을 고정하려면, 객체의 복사본을 저장하자!

console.log(JSON.parse(JSON.stringify(obj))); // 깊은 복사 후 로그

 

 

 

🎯 마치며: 자바스크립트를 깊이 이해하자!

자바스크립트는 단순한 언어처럼 보이지만, 그 내부 동작은 예상치 못한 방식으로 작동할 수 있다. 오늘 소개한 몇 가지 사례를 통해 자바스크립트의 독특한 특성을 이해하고, 버그를 줄이는 데 도움이 되길 바란다!

🔥 여러분이 겪었던 예상치 못한 JS 동작이 있다면 댓글로 공유해주세요! 🚀