12편에서는 스코프, 클로저, 변수 선언 시 발생하는 전형적인 혼동 사례를 정리합니다.✅ 1. var는 블록 스코프를 가지지 않는다if (true) { var x = 10;}console.log(x); // 10📌 설명var는 함수 스코프만 가지며, 블록({})을 스코프로 인식하지 않습니다.✅ 2. 클로저에서 반복문 변수 캡처 문제var funcs = [];for (var i = 0; i console.log(i));}funcs[0](); // 3funcs[1](); // 3funcs[2](); // 3📌 설명클로저는 동일한 i를 참조하므로 루프 종료 시점의 값이 모두 사용됩니다.📌 대처let을 사용하거나 즉시 실행 함수(IIFE)를 통해 캡처합니다.✅ 3. 중첩 함수의 this는 상위 컨텍스트..

이번 11편에서는 타입 관련 실수와 내장 객체의 오용으로 발생하는 자주 겪는 오류들을 다룹니다.✅ 1. typeof null은 왜 "object"일까?📌 설명자바스크립트 초기 설계 버그로 인해 typeof null은 "object"를 반환합니다. null은 원시 타입이지만 객체처럼 보이는 혼란을 줍니다.📌 대처null 체크는 반드시 value === null로 진행합니다.✅ 2. Math.max()와 Math.min()의 빈 인수 처리Math.max(); // -InfinityMath.min(); // Infinity📌 설명인수가 없는 경우 Math.max()는 최솟값, Math.min()은 최댓값을 반환함으로써 잘못된 비교 결과를 낼 수 있습니다.✅ 3. parseInt는 radix 생략 시 혼란..

이번 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 값을 변경..

이번 9편에서는 자바스크립트에서 비동기 동작이나 동등 비교 등에서 발생하는 혼란스러운 상황들을 구체적으로 정리합니다.✅ 1. async function은 항상 Promise를 반환한다📌 문제 상황async function test() { return 1;}console.log(test()); // Promise { : 1 }📌 설명async 함수는 return 값과 무관하게 항상 Promise를 반환합니다. 동기처럼 보여도 비동기로 동작합니다.✅ 2. Promise.prototype.finally는 값에 영향을 주지 않는다Promise.resolve(42) .finally(() => console.log("done")) .then(value => console.log(value));// done..

이번 8편에서는 자바스크립트 문법 중에서 한눈에 보기에는 명확하지만, 실제 실행 결과는 의외인 사례들을 다룹니다. 이러한 사례들은 코드 리뷰나 디버깅 과정에서도 자주 혼란을 야기하므로 미리 숙지해두면 큰 도움이 됩니다.✅ 1. null >= 0은 true다📌 문제 상황null >= 0; // truenull > 0; // false📌 설명null >= 0 → Number(null) >= 0 → 0 >= 0 → truenull > 0 → Number(null) > 0 → 0 > 0 → false📌 대처비교 연산에서 null, undefined와 같은 특수 값을 비교할 때는 명시적인 체크가 필요합니다.✅ 2. setTimeout 안에서 this는 다르게 작동함📌 문제 상황const obj = { ..

자바스크립트는 다양한 기능을 제공하면서도 그만큼 함정도 많은 언어입니다. 이번 7탄에서는 비교적 흔하지만 간과되기 쉬운 동작들, 그리고 예기치 않게 발생하는 오류를 유발하는 문법 사례들을 다룹니다.✅ 1. Boolean([])과 [] == false는 다른 결과를 가진다📌 문제 상황Boolean([]); // true[] == false; // true📌 설명Boolean([])는 명시적 변환으로 truthy[] == false는 암묵적 형 변환으로 문자열/숫자 변환을 거쳐 true📌 대처논리 연산과 비교 연산이 다르게 평가된다는 점을 이해하고, 비교 연산에는 항상 === 사용을 권장합니다.✅ 2. typeof function() {}와 typeof class {}는 다르다📌 문제..

자바스크립트는 유연한 문법과 다양한 표현 방식으로 인해, 한 줄의 코드가 예상과 다른 동작을 할 수 있습니다. 이번 6탄에서는 더 깊이 들어가 잘 알려지지 않은 예외적인 동작과 그에 대한 이해를 도울 사례들을 소개합니다.✅ 1. Object.is vs ===📌 문제 상황Object.is(NaN, NaN); // trueNaN === NaN; // falseObject.is(0, -0); // false0 === -0; // true📌 설명Object.is는 ===와 유사하지만, NaN 비교와 ±0 비교에서 차이를 보입니다.📌 대처정밀한 비교가 필요할 땐 Object.is()를 고려하고, 일반 비교에서는 ===를 사용합니다.✅ 2. [] == ![]의 놀라..

자바스크립트는 강력하고 유연한 언어이지만, 특유의 관대한 문법으로 인해 실수가 발생하기 쉬운 구조를 가지고 있습니다. 이번 5탄에서는 비교적 간과하기 쉬운 문법적 특성과 그로 인해 발생하는 문제들을 소개합니다.✅ 1. undefined와 null의 오해📌 문제 상황console.log(typeof undefined); // 'undefined'console.log(typeof null); // 'object'📌 설명undefined는 선언만 하고 값이 할당되지 않은 변수의 타입이고, null은 의도적으로 "없음"을 나타내는 객체입니다. 그러나 typeof null은 'object'를 반환하기 때문에 혼동을 줄 수 있습니다.📌 대처타입 체크 시 typeof 외에 === null 같은 구체적 비교를 병..

자바스크립트의 독특한 문법과 유연성은 강력한 도구이지만, 예상과 다른 결과를 유발하기도 합니다. 이번 4탄에서는 자바스크립트 문법 중에서도 더욱 사소해 보이지만 실무에서 문제를 일으킬 수 있는 함정들을 소개합니다.✅ 1. this의 동적 바인딩📌 문제 상황const obj = { name: 'JS', getName: function () { return this.name; }};const getName = obj.getName;console.log(getName()); // undefined (엄격 모드에선 error)📌 설명this는 호출 방식에 따라 동적으로 결정됩니다. 위 코드에서 getName은 객체에서 분리되었기 때문에 this는 전역 객체를 참조하게 됩니다.📌 대처.bind()..

자바스크립트는 다소 관대한 문법 구조로 인해 직관과 다른 결과를 만들어내는 경우가 많습니다. 이번 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 ar..