[...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법 AI 생성 이미지: [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법 JavaScript로 배열을 다룰 때는 중복 요소를 제거 해야 할 일이 흔히 생깁니다. API 응답이나 폼 입력, 로그 데이터 같은 곳에서 동일한 값이 반복되면 집계나 렌더링 로직에 오류가 발생할 수 있습니다. 실무에서는 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법을 우선적으로 고려하는 경우가 많습니다. 이 글에서는 Set을 사용하는 간단한 패턴 과 filter()와 indexOf를 조합한 패턴 을 중심으로, 각각의 동작 원리와 장단점을 실무 관점에서 정리합니다. 1. Set을 활용한 배열 중복 제거 Set 은 중복을 허용하지 않는 컬렉션 입니다. 배열을 Set으로 바꾸면 중복 항목이 즉시 제거됩니다. 그런 다음 다시 배열로 변환하면 중복이 제거된 새로운 배열을 얻습니다. 간단하고 성능도 합리적입니다. 사실 [...new Set(arr)]로 JavaScript 배열 중복 제거하는 가장 간단한 방법은 바로 이 흐름을 말합니다. 1-1. 기본 예제 const arr = [1, 2, 3, 3, 4, 5, 5]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5] 위 예제는 new Set(arr) 로 중복을 제거하고, 전개 연산자 ... 로 다시 배열로 풀어냅니다. 결과적으로 uniqueArr 에는 중복이 제거된 값만 남습니다. 코드가 매우 직관적이라 유지보수가 쉽습니다. ...

JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 AI 생성 이미지: JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 안녕하세요 — 타입과 런타임 동작을 좋아하는 개발자입니다. 코드를 작성하다 보면 문득 이렇게 묻게 됩니다. "문자열인데 왜 instanceof String 이 false일까?" 특히 Java나 다른 정적 타입 언어 경험이 있으면 더 혼란스러울 수 있습니다. 이 글은 JavaScript 문자열 타입 정리: typeof vs instanceof, String 객체의 함정 을 바탕으로, 원시 문자열(primitive string) 과 String 래퍼 객체 의 차이, 그리고 typeof 와 instanceof 를 실제로 언제, 왜 사용해야 하는지를 예제와 함께 명확히 설명합니다. 1. 🔍 자바스크립트 instanceof 연산자는 무엇을 확인하는가? instanceof 는 값이 특정 생성자(또는 클래스)의 인스턴스인지 판별합니다. 핵심은 객체의 프로토타입 체인에 해당 생성자의 prototype이 포함되어 있는지 여부입니다. 동작 원리: 좌변 객체의 프로토타입 체인을 거슬러 올라가며 우변 생성자의 prototype과 일치하는지 검사합니다. 2. 🤯 문자열에서 instanceof String 이 false가 나오는 이유 ...

FRONTEND ENGINEERING JavaScript undefined vs null: 차이점 분석과 엔터프라이즈 타입 체크 전략 자바스크립트의 모호한 개념인 undefined와 null의 기술적 차이를 명확히 규명하고, 데이터 무결성을 위한 커스텀 typeOf 및 isEmpty 유틸리티 함수 구현 방법을 제시합니다. 📑 목차 1. undefined: 할당되지 않은 상태 2. null: 의도적인 값의 부재와 주의점 3. 엄격한 비교와 데이터 무결성 4. 한계 극복: Custom typeOf 구현 5. 실무 적용: 범용 isEmpty 유틸리티 6. 요약 및 Best Practice 1. undefined: 할당되지 않은 상태 undefined 는 변수가 선언되었으나 아직 값이 할당되지 않은 상태 를 의미합니다. 이는 자바스크립트 엔진이 변수 초기화 단계에서 메모리 공간을 확보한 후, 자동으로 부여하는 기본값입니다. var testVar; alert(testVar); // undefined alert(typeof testVar); // "undefined" 변수 선언 외에도 객체에 존재하지 않는 프로퍼티에 접근하거나, return 문이 없는 함수를 호출했을 때 엔진은 undefined 를 반환합니다. 2. null: 의도적인 값의 부재와 주의점 null 은 개발자가 의도적으로 '값이 없음'을 명시 할 때 사용합니다. 이는 해당 변수가 더 이상 유효한 객체나 값을 참조하지 않음을 코드 레벨에서 표현하는 중요한 수단입니다. var testVar = null; alert(typeof te...

JAVASCRIPT / ENGINEERING 자바스크립트 클로저(Closure) 완벽 가이드: 원리부터 jQuery 실전 패턴까지 클로저의 핵심 원리인 스코프 체인과 상태 유지를 이해하고, 메모리 누수 방지법과 jQuery 플러그인 확장 등 실무 레거시 코드 분석에 필요한 핵심 패턴을 정리합니다. 📑 목차 1. 클로저(Closure)의 핵심 개념과 원리 2. 상태 유지와 캡슐화: 카운터 예제 3. 메모리 누수(Memory Leak) 관리 4. 실전 응용: jQuery 플러그인과 IIFE 패턴 1. 클로저(Closure)의 핵심 개념과 원리 자바스크립트에서 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)의 조합 을 의미합니다. 쉽게 정의하면, 내부 함수가 외부 함수의 변수(스코프)를 기억하고, 외부 함수가 종료된 후에도 계속 접근할 수 있는 메커니즘 입니다. 다음은 가장 기본적인 클로저의 형태입니다. function test(name) { var text = name + ' 님'; // 내부 함수(클로저)가 외부 변수 text를 참조 var tk = function() { console.log(text); }; return tk; } var myFunc = test('개발자'); myFunc(); // 출력: "개발자 님" 위 코드에서 test 함수는 실행이 끝났지만, 반환된 tk 함수는 여전히 text 변수를 기억하고 있습니다. 이는 함수가 생성될 때의 스코프 체인 을 유지하기 때문입니다. 2. 상...