Here is the infographic prompt for JavaScript Array.filter: **제목:** JavaScript Array.filter() 완전 정복 --- **1. 정의 (What is it?)** `filter()` 메서드는 **주어진 함수의 테스트를 통과하는 모든 요소**를 모아 **새로운 배열**로 반환합니다. - 원본 배열은 변경되지 않습니다 (Immutable). --- **2. 구문 (Syntax)** ```javascript const newArray = array.filter(callback(element[, index[, array]])[, thisArg]); ``` - **callback:** 각 요소에 대해 실행할 함수 (true를 반환하면 유지, false면 제거) - **element:** 처리할 현재 요소 - **index (선택):** 처리할 현재 요소의 인덱스 - **array (선택):** 호출에 사용된 원본 배열 - **thisArg (선택):** callback 실행 시 this로 사용할 값 --- **3. 동작 방식 (How it works)** - 배열의 **각 요소에 대해** callback 함수를 실행합니다. - callback이 **truthy 값을 반환**하면 → 새 배열에 포함 - callback이 **falsy 값을 반환**하면 → 새 배열에서 제외 - 결과적으로 **항상 새 배열**을 반환하며, 빈 배열도 가능합니다. --- **4. 실전 예제 (Examples)** **예제 1: 숫자 필터링** ```javascript const numbers = [1, 2, 3, 4, 5, 6]; const evens = numbers.filter(num => num % 2 === 0); // 결과: [2, 4, 6] ``` **예제 2: 객체 배열 필터링** ```javascript const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 17 }, { name: 'Charlie', age: 30 } ]; const adults = users.filter(user => user.age >= 18); // 결과: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }] ``` **예제 3: 인덱스 활용** ```javascript const fruits = ['apple', 'banana', 'cherry', 'date']; const oddIndexed = fruits.filter((fruit, index) => index % 2 === 1); // 결과: ['banana', 'date'] ``` --- **5. 주의사항 (Key Points)** - ✅ **새 배열 반환** – 기존 배열을 수정하지 않습니다. - ✅ **빈 배열 가능** – 조건을 만족하는 요소가 없으면 `[]` 반환. - ✅ **희소 배열 처리** – 빈 슬롯은 건너뜁니다 (callback 실행 안 함). - ❌ **원본 배열 변경 없음** – filter는 원본을 절대 수정하지 않습니다. - ⚠️ **thisArg 사용** – 화살표 함수에서는 this 바인딩이 다르므로 주의. --- **6. 체이닝 (Chaining)** ```javascript const result = numbers .filter(n => n > 2) .map(n => n * 10) .reduce((sum, n) => sum + n, 0); // 3,4,5,6 → 30,40,50,60 → 합계: 180 ``` --- **7. 한눈에 비교 (filter vs map vs reduce)** | 메서드 | 반환값 | 용도 | |--------|--------|------| | `filter()` | 새 배열 (조건 통과 요소) | 요소 선택/제거 | | `map()` | 새 배열 (변환된 요소) | 요소 변형 | | `reduce()` | 단일 값 | 누적 계산 | --- **8. 꿀팁 (Pro Tips)** - **truthy/falsy 활용:** `array.filter(Boolean)` → falsy 값 제거 - **중복 제거:** `array.filter((v, i, a) => a.indexOf(v) === i)` - **성능:** 대용량 배열에서는 조건을 단순화하여 최적화 --- **마무리:** `filter()`는 데이터 정제의 핵심 도구입니다. 조건만 명확하면 코드가 간결해지고 가독성이 높아집니다. 🚀

Here is the infographic prompt for JavaScript Array.filter: **제목:** JavaScript Array.filter() 완전 정복 --- **1. 정의 (What is it?)** `filter()` 메서드는 **주어진 함수의 테스트를 통과하는 모든 요소**를 모아 **새로운 배열**로 반환합니다. - 원본 배열은 변경되지 않습니다 (Immutable). --- **2. 구문 (Syntax)** ```javascript const newArray = array.filter(callback(element[, index[, array]])[, thisArg]); ``` - **callback:** 각 요소에 대해 실행할 함수 (true를 반환하면 유지, false면 제거) - **element:** 처리할 현재 요소 - **index (선택):** 처리할 현재 요소의 인덱스 - **array (선택):** 호출에 사용된 원본 배열 - **thisArg (선택):** callback 실행 시 this로 사용할 값 --- **3. 동작 방식 (How it works)** - 배열의 **각 요소에 대해** callback 함수를 실행합니다. - callback이 **truthy 값을 반환**하면 → 새 배열에 포함 - callback이 **falsy 값을 반환**하면 → 새 배열에서 제외 - 결과적으로 **항상 새 배열**을 반환하며, 빈 배열도 가능합니다. --- **4. 실전 예제 (Examples)** **예제 1: 숫자 필터링** ```javascript const numbers = [1, 2, 3, 4, 5, 6]; const evens = numbers.filter(num => num % 2 === 0); // 결과: [2, 4, 6] ``` **예제 2: 객체 배열 필터링** ```javascript const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 17 }, { name: 'Charlie', age: 30 } ]; const adults = users.filter(user => user.age >= 18); // 결과: [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 30 }] ``` **예제 3: 인덱스 활용** ```javascript const fruits = ['apple', 'banana', 'cherry', 'date']; const oddIndexed = fruits.filter((fruit, index) => index % 2 === 1); // 결과: ['banana', 'date'] ``` --- **5. 주의사항 (Key Points)** - ✅ **새 배열 반환** – 기존 배열을 수정하지 않습니다. - ✅ **빈 배열 가능** – 조건을 만족하는 요소가 없으면 `[]` 반환. - ✅ **희소 배열 처리** – 빈 슬롯은 건너뜁니다 (callback 실행 안 함). - ❌ **원본 배열 변경 없음** – filter는 원본을 절대 수정하지 않습니다. - ⚠️ **thisArg 사용** – 화살표 함수에서는 this 바인딩이 다르므로 주의. --- **6. 체이닝 (Chaining)** ```javascript const result = numbers .filter(n => n > 2) .map(n => n * 10) .reduce((sum, n) => sum + n, 0); // 3,4,5,6 → 30,40,50,60 → 합계: 180 ``` --- **7. 한눈에 비교 (filter vs map vs reduce)** | 메서드 | 반환값 | 용도 | |--------|--------|------| | `filter()` | 새 배열 (조건 통과 요소) | 요소 선택/제거 | | `map()` | 새 배열 (변환된 요소) | 요소 변형 | | `reduce()` | 단일 값 | 누적 계산 | --- **8. 꿀팁 (Pro Tips)** - **truthy/falsy 활용:** `array.filter(Boolean)` → falsy 값 제거 - **중복 제거:** `array.filter((v, i, a) => a.indexOf(v) === i)` - **성능:** 대용량 배열에서는 조건을 단순화하여 최적화 --- **마무리:** `filter()`는 데이터 정제의 핵심 도구입니다. 조건만 명확하면 코드가 간결해지고 가독성이 높아집니다. 🚀 JavaScript의 array.filter 메서드를 설명하는 인포그래픽을 생성하기 위한 프롬프트로, 사이버펑크 배경과 명확한 코드 예시를 포함합니다.

프롬프트 내용저장복사

Run

사용법

이 프롬프트는 education와 함께 사용하도록 설계되었습니다. 위의 프롬프트 내용을 복사하여 원하는 AI 도구에 붙여넣으세요.

최상의 결과를 얻으려면 자리 표시자(대괄호 또는 대문자로 표시)를 특정 요구 사항으로 사용자 지정할 수 있습니다.

참고 자료

• 분류: education 프롬프트
• 출처: https://x.com/d4m1n/status/1908544212053664050