이번 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..

자바스크립트의 유연한 문법은 개발자에게 자유를 주는 동시에, 예상치 못한 함정을 만들어내기도 합니다. 이번 편에서는 실무에서 종종 발견되지만 이해하지 않으면 의도치 않은 결과를 초래할 수 있는 자바스크립트 문법 사례들을 추가로 소개합니다.✅ 1. [] + [] 는 왜 빈 문자열이 되는가?📌 문제 상황console.log([] + []); // ''📌 원인자바스크립트에서 + 연산자는 피연산자가 문자열이면 문자열 덧셈을 수행합니다. 배열은 기본적으로 문자열로 변환되며, [].toString()은 빈 문자열 ''이므로 결과도 ''입니다.📌 대처연산 전에 명확한 형 변환을 적용하거나, 타입을 정확히 확인합니다.✅ 2. parseInt('08')는 왜 8이 아닌가?📌 문제 상황parseInt('08'); ..

자바스크립트는 유연하고 관대한 문법 특성 덕분에 초보자에게 진입 장벽이 낮은 언어입니다. 하지만 이로 인해 실수하거나 오해하기 쉬운 문법들도 많습니다. 이 글에서는 실무에서 자주 마주치지만, 주의하지 않으면 버그로 이어질 수 있는 자바스크립트 문법 사례들을 소개합니다.✅ 1. == vs === (느슨한 비교와 엄격한 비교)📌 문제 상황0 == false // true0 === false // falsenull == undefined // truenull === undefined // false📌 해결 방법항상 ===를 사용하여 타입까지 비교하도록 습관을 들이는 것이 좋습니다.✅ 2. typeof null은 왜 "object"인가?📌 문제 상황typeof null; // "object"📌..

연관글2025.04.18 - [Programing/javascript] - 💰 숫자를 한글로 금액 단위로 표현2025.04.18 - [Programing/javascript] - 💻 숫자를 한글 숫자 표기로 변환웹 서비스나 전자문서에서 금액을 숫자가 아닌 한글로 표기해야 하는 경우가 종종 있습니다. 예를 들어 "₩12500"이라는 금액을 "일만이천오백원"과 같이 표기하고자 할 때, MySQL에서 이 기능을 구현하는 방법에 대해 정리합니다.✅ 기본 전제MySQL은 기본적으로 숫자를 한글로 변환하는 내장 함수는 제공하지 않습니다. 따라서 다음과 같은 대안 중 하나를 사용해야 합니다:애플리케이션 레벨에서 처리 (권장)스토어드 함수나 프로시저로 직접 구현✅ 방법 1: 애플리케이션 레벨 처리 (PHP 예시)f..