📘 14.2.2 filter() 실전 활용하기 - 복잡한 조건과 데이터 정리
안녕하세요, 여러분. 이전 시간에 우리는 filter() 도구의 기본적인 사용법을 배웠습니다. 이제는 진짜 현실에서 사용하는 filter() 활용법을 배워볼 차례입니다.
실제 웹사이트나 앱을 만들 때는 단순한 조건 하나로는 부족합니다. 여러 조건을 함께 사용하고, 복잡한 데이터를 깔끔하게 정리하고, 사용자가 원하는 검색 결과를 정확하게 찾아주는 똑똑한 기능을 만들어야 하지요.
이번 시간에는 filter()를 사용해서 진짜 프로그래머처럼 복잡하고 실용적인 기능들을 만드는 방법을 함께 배워보겠습니다. 마치 탐정이 되어 복잡한 단서들을 모아서 진실을 찾아내는 것처럼 말입니다.
🧠 새로운 단어들과 친해지기
실전에서 자주 사용되는 중요한 단어들을 차근차근 설명해드리겠습니다.
| 단어 | 의미 |
|---|---|
| 검색 기능 | 특정 키워드나 조건으로 원하는 데이터를 찾는 기능입니다. |
| 데이터 정리 | 잘못되거나 빠진 정보를 제거하고 깔끔하게 만드는 일입니다. |
| 여러 조건 합치기 | 조건 여러 개를 '그리고', '또는'으로 연결하는 것입니다. |
| 단계별 거르기 | filter를 여러 번 사용해서 차근차근 조건을 적용하는 것입니다. |
이런 용어들은 실제 프로그래밍에서 개발자들이 매일 사용하는 표현들입니다. 우리도 이제 프로그래머의 언어로 대화할 수 있게 될 거예요.
✨ 실전 filter()의 핵심 개념
실전에서 사용하는 filter()는 기본 버전보다 훨씬 더 똑똑하고 강력합니다. 마치 초급 탐정에서 숙련된 수사관으로 업그레이드되는 것과 같지요.
실제 프로젝트에서는 여러 조건을 동시에 만족하는 데이터를 찾아야 하는 경우가 대부분입니다. 예를 들어, 온라인 쇼핑몰에서 "1만원 이하", "무료배송", "평점 4점 이상", "재고 있음" 같은 조건들을 모두 만족하는 상품만 보여주려면 어떻게 해야 할까요?
또한 잘못되거나 불완전한 데이터를 걸러내는 작업도 정말 중요합니다. 사용자가 입력한 정보 중에서 이름이 비어있거나, 나이가 음수거나, 이메일 형식이 잘못된 것들을 자동으로 제거해야 하거든요. 이런 작업을 데이터 정리라고 부르는데, filter()가 이 일의 전문가랍니다.
따뜻한 비유: 똑똑한 쇼핑 도우미
실전 filter()를 '똑똑한 쇼핑 도우미'에 비유해보겠습니다.
여러분이 대형 쇼핑몰에 가서 쇼핑 도우미에게 이렇게 말했다고 상상해보세요. "예산은 5만원이고, 빨간색이나 파란색이면 좋겠고, 브랜드는 나이키나 아디다스였으면 좋겠어요. 그리고 꼭 무료배송이 가능한 것만 골라주세요!"
처음 일하는 도우미라면 "어... 너무 복잡해요"라고 말하겠지만, 똑똑한 도우미는 다릅니다. 차근차근 조건을 하나씩 확인하면서 "예산 확인, 색상 확인, 브랜드 확인, 배송 확인" 하며 여러분이 원하는 조건을 모두 만족하는 상품들만 골라내어 보여줄 거예요.
만약 어떤 상품에 색상 정보가 없거나 가격이 잘못 표시되어 있다면? 똑똑한 도우미는 "이 상품은 정보가 부족해서 추천하지 않겠습니다"라고 말하며 안전하게 제외시켜 줄 거예요.
실전 filter()도 똑같은 똑똑한 쇼핑 도우미입니다. 복잡한 조건들을 모두 고려하고, 불완전한 데이터는 걸러내어 정말 믿을 만한 결과만 보여주는 거지요.
🎯 실전 filter()를 배우는 이유
실전 filter() 활용법을 배우는 이유는 정말 실용적입니다.
첫 번째로 진짜 웹사이트나 앱 같은 검색 기능을 만들 수 있습니다. 유튜브의 영상 검색, 쇼핑몰의 상품 필터링, 음악 앱의 노래 검색 등 우리가 매일 사용하는 모든 검색 기능들이 이런 원리로 만들어져 있어요.
두 번째로 사용자의 다양한 요구사항에 맞춰줄 수 있습니다. 실제 사용자들은 "이것도 되고 저것도 되는데, 이런 조건은 빼고..." 같은 복잡한 요구를 해요. 이런 요구사항을 코드로 만들 수 있게 되는 거지요.
세 번째로 안전하고 믿을 수 있는 프로그램을 만들 수 있습니다. 불완전한 데이터 때문에 프로그램이 오류를 내거나 이상한 결과를 보여주는 일을 미리 막을 수 있어요.
⚙️ 실전에서 사용하는 방법 살펴보기
실전에서 사용하는 filter() 방법은 기본 버전을 더 강하게 만든 형태입니다.
여러 조건 함께 사용하기:
let filtered = data.filter(item =>
item.price >= minPrice &&
item.price <= maxPrice &&
item.category === targetCategory
);글자 검색 (대소문자 무시):
let searchResult = items.filter(item =>
item.name.toLowerCase().includes(keyword.toLowerCase())
);안전한 속성 접근:
let result = users.filter(user =>
user.profile &&
user.profile.age >= 18 &&
user.profile.city === "서울"
);filter + map 조합:
let processed = data
.filter(item => item.isValid)
.map(item => ({
id: item.id,
name: item.name.toUpperCase()
}));이런 패턴들을 익혀두면 거의 모든 실전 상황에 대응할 수 있습니다.
🧪 예제로 익혀보기
이제 실전 예제를 통해 복잡한 filter() 활용법을 자세히 살펴보겠습니다.
🔹 예제 1: 온라인 쇼핑몰 상품 검색 기능 만들기
첫 번째 예제에서는 실제 쇼핑몰에서 사용할 수 있는 복잡한 상품 검색 기능을 만들어보겠습니다.
// 쇼핑몰 상품 정보 (실제와 비슷한 구조)
let products = [
{ id: 1, name: "아이폰 14", price: 1200000, category: "전자제품", rating: 4.5, inStock: true },
{ id: 2, name: "갤럭시 S23", price: 1000000, category: "전자제품", rating: 4.3, inStock: false },
{ id: 3, name: "나이키 운동화", price: 150000, category: "신발", rating: 4.8, inStock: true },
{ id: 4, name: "애플 워치", price: 500000, category: "전자제품", rating: 4.6, inStock: true },
{ id: 5, name: "아디다스 티셔츠", price: 50000, category: "의류", rating: 4.0, inStock: true }
];
// 쇼핑몰 검색 기능 (여러 조건을 동시에 만족하는 상품 찾기)
function searchProducts(keyword, maxPrice, minRating, category) {
return products.filter(function(product) {
// 1단계: 상품명에 키워드가 포함되어 있는지 확인 (대소문자 상관없이)
let nameMatch = product.name.toLowerCase().includes(keyword.toLowerCase());
// 2단계: 가격이 예산 범위 안에 있는지 확인
let priceMatch = product.price <= maxPrice;
// 3단계: 평점이 기준 이상인지 확인
let ratingMatch = product.rating >= minRating;
// 4단계: 카테고리가 원하는 것인지 확인 (빈 문자열이면 모든 카테고리)
let categoryMatch = category === "" || product.category === category;
// 5단계: 재고가 있는지 확인
let stockMatch = product.inStock === true;
// 모든 조건을 만족해야만 검색 결과에 포함 (그리고 연산)
return nameMatch && priceMatch && ratingMatch && categoryMatch && stockMatch;
});
}
// 검색 테스트해보기
let searchResult = searchProducts("아", 800000, 4.0, "전자제품");
console.log("검색 결과:", searchResult);
// 결과: "아"가 들어가고, 80만원 이하, 4점 이상, 전자제품, 재고 있는 상품들이 과정을 단계별로 살펴보면, 먼저 실제 쇼핑몰과 비슷한 상품 데이터를 준비합니다. 그다음 검색 기능을 만들어서 각 조건을 하나씩 체크하고, 모든 조건을 만족하는 상품만 결과로 반환하지요. 이렇게 하면 사용자가 원하는 정확한 상품만 찾을 수 있어요.
🔹 예제 2: 학생 성적 관리 시스템 (복잡한 조건 처리)
두 번째 예제에서는 학교에서 사용할 수 있는 학생 성적 관리 시스템을 만들어보겠습니다.
// 학생들의 자세한 성적 정보
let students = [
{ name: "김철수", grade: 4, subjects: { math: 85, english: 90, science: 88 }, attendance: 95 },
{ name: "이영희", grade: 5, subjects: { math: 95, english: 92, science: 90 }, attendance: 98 },
{ name: "박민수", grade: 3, subjects: { math: 78, english: 82, science: 75 }, attendance: 85 },
{ name: "정지은", grade: 4, subjects: { math: 92, english: 88, science: 94 }, attendance: 90 }
];
// 우수 학생 찾기 기능 (여러 기준을 동시에 고려)
function findExcellentStudents(targetGrade, minAverage, minAttendance) {
return students.filter(function(student) {
// 1단계: 해당 학년인지 확인
let gradeMatch = student.grade === targetGrade;
// 2단계: 전 과목 평균 점수 계산
let subjects = student.subjects;
let totalScore = subjects.math + subjects.english + subjects.science;
let average = totalScore / 3;
// 3단계: 평균 점수가 기준 이상인지 확인
let averageMatch = average >= minAverage;
// 4단계: 출석률이 기준 이상인지 확인
let attendanceMatch = student.attendance >= minAttendance;
// 모든 조건을 만족해야 우수 학생으로 뽑힘 (그리고 연산)
return gradeMatch && averageMatch && attendanceMatch;
});
}
// 4학년 중에서 평균 85점 이상, 출석률 90% 이상인 학생 찾기
let excellentStudents = findExcellentStudents(4, 85, 90);
console.log("우수 학생 명단:");
excellentStudents.forEach(function(student) {
let avg = (student.subjects.math + student.subjects.english + student.subjects.science) / 3;
console.log(`${student.name}: 평균 ${avg.toFixed(1)}점, 출석률 ${student.attendance}%`);
});이 예제에서는 정보 묶음 안에 다른 정보 묶음이 들어있는 복잡한 구조를 다뤘습니다. 성적 계산, 여러 조건 확인 등 실제 학교에서 필요한 기능들을 만들었답니다.
🔹 예제 3: 데이터 정리하기 (filter + map 조합 활용)
세 번째 예제에서는 사용자가 입력한 불완전한 데이터를 정리하고 안전하게 처리하는 방법을 배워보겠습니다.
// 사용자가 입력한 회원가입 정보 (일부가 불완전할 수 있음)
let userInputs = [
{ name: "김철수", age: 25, email: "chulsoo@example.com", phone: "010-1234-5678" },
{ name: "", age: 30, email: "invalid-email", phone: "010-2345-6789" }, // 이름 없음
{ name: "이영희", age: -5, email: "younghee@example.com", phone: "" }, // 나이 음수, 전화번호 없음
{ name: "박민수", age: 20, email: "", phone: "010-3456-7890" }, // 이메일 없음
{ name: "정지은", age: 28, email: "jieun@example.com", phone: "010-4567-8901" }
];
// 안전한 데이터만 골라내고 표준 형식으로 정리하기
let cleanUserData = userInputs
.filter(function(user) {
// 1단계: 이름이 있고 비어있지 않은지 확인
let hasValidName = user.name && user.name.trim().length > 0;
// 2단계: 나이가 말이 되는 범위인지 확인 (0세 이상 120세 이하)
let hasValidAge = user.age >= 0 && user.age <= 120;
// 3단계: 이메일에 @가 포함되어 있는지 간단 확인
let hasValidEmail = user.email && user.email.includes("@");
// 4단계: 전화번호가 있는지 확인
let hasValidPhone = user.phone && user.phone.trim().length > 0;
// 모든 조건을 만족하는 사용자만 올바른 데이터로 인정 (그리고 연산)
return hasValidName && hasValidAge && hasValidEmail && hasValidPhone;
})
.map(function(user) {
// 올바른 데이터를 보기 좋은 형식으로 바꾸기
return {
displayName: user.name + "님", // 이름에 존댓말 붙이기
ageGroup: user.age >= 20 ? "성인" : "미성년자", // 나이대별 분류
contact: user.email, // 연락처 이메일
phone: user.phone // 전화번호 그대로
};
});
console.log("정리된 사용자 데이터:", cleanUserData);
// 결과: 완전하고 올바른 정보를 가진 사용자들만 보기 좋은 형식으로 정리됨이 예제에서는 filter()로 올바른 데이터만 걸러낸 후, map()으로 깔끔한 형식으로 바꿨습니다. 이런 방식으로 불안전한 데이터를 안전하게 처리할 수 있답니다.
🔄 실전 filter() 사용 과정 정리
실전에서 filter()를 사용하는 과정을 체계적으로 정리해보겠습니다.
첫 번째 단계는 요구사항 분석입니다. 사용자가 정확히 무엇을 원하는지, 어떤 조건들을 만족해야 하는지 명확하게 파악하는 것이지요. 두 번째는 조건 설계 단계입니다. 복잡한 요구사항을 논리적인 조건들로 나누고, 각 조건을 어떻게 검사할지 계획을 세웁니다.
세 번째는 안전성 고려 단계입니다. 데이터가 없거나 잘못되었을 때를 대비해서 안전한 검사 방법을 준비하는 것이에요. 네 번째는 필터 구현 과정입니다. 설계한 조건들을 실제 filter() 기능으로 만들고, 각 조건이 올바르게 동작하는지 확인합니다.
마지막으로 최적화와 테스트 단계입니다. 성능을 개선하고, 다양한 테스트 데이터로 올바른 결과가 나오는지 확인해야 해요.
🧚♀️ 이야기로 다시 배우기: 수사관의 정밀 수사
지금까지 배운 내용을 재미있는 이야기로 다시 정리해볼까요?
어느 큰 도시에 최고의 수사관이 있었습니다. 이 수사관은 복잡하고 어려운 사건도 항상 정확하게 해결하는 것으로 유명했답니다.
어느 날, 시장에서 큰 보석 도난 사건이 발생했어요. 경찰서장이 수사관에게 말했습니다. "용의자는 다음 조건에 맞는 사람이에요. 사건 당일 시장 근처에 있었고, 키가 170cm 이상이며, 검은색 옷을 입고 있었고, 보석에 대한 지식이 있는 사람이에요."
처음 일하는 경찰관들은 "조건이 너무 많아요!"라고 당황했지만, 최고의 수사관은 차분했습니다. 그는 시민 명단을 하나씩 살펴보며 체계적으로 수사를 시작했어요.
"첫 번째, 사건 당일 알리바이가 없는 사람들을 찾아보겠어요." 수백 명의 목록에서 50명으로 줄어들었습니다.
"두 번째, 이 중에서 키가 170cm 이상인 사람들만 골라보겠어요." 50명에서 20명으로 줄어들었습니다.
"세 번째, 검은색 옷을 입고 있었다는 목격자 증언과 일치하는 사람들만 찾겠어요." 20명에서 8명으로 줄어들었습니다.
"마지막으로, 보석 관련 지식이나 경험이 있는 사람들만 확인하겠어요." 최종적으로 3명의 핵심 용의자가 남았어요.
이처럼 실전 filter()도 똑같은 정밀 수사관입니다. 복잡한 조건들을 하나씩 체계적으로 확인해서, 정말로 우리가 찾는 "범인(데이터)"만 정확하게 골라내는 거랍니다.
🧠 자주 하는 실수와 주의할 점
실전에서 filter()를 사용할 때 자주 발생하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있습니다.
❌ 실수 1: 문자열 검색에서 대소문자 구분하지 않기
// 문제가 될 수 있는 예시
let products = [
{ name: "iPhone 14" },
{ name: "iphone case" },
{ name: "IPHONE charger" }
];
let result1 = products.filter(product =>
product.name.includes("iphone") // 소문자 "iphone"만 찾기 때문에 하나만 찾음
);
console.log(result1); // [{ name: "iphone case" }] - 하나만 찾음!// 안전한 방법 - 대소문자를 똑같이 만들어서 비교
let result2 = products.filter(product =>
product.name.toLowerCase().includes("iphone".toLowerCase()) // 모두 소문자로 통일해서 비교
);
console.log(result2); // 모든 iPhone 관련 제품을 찾음이런 실수가 발생하는 이유는 자바스크립트에서 문자열 비교가 대소문자를 구분하기 때문입니다. 사용자는 "iphone"이라고 검색해도 "iPhone"을 찾길 원하는데, 이를 놓칠 수 있어요.
❌ 실수 2: 존재하지 않는 속성에 접근하기
// 위험한 예시 - 에러가 발생할 수 있어요!
let users = [
{ name: "철수", profile: { age: 25 } },
{ name: "영희" }, // profile이 없어요!
{ name: "민수", profile: { age: 30 } }
];
let adults = users.filter(user => user.profile.age >= 18); // 에러 발생!// 안전한 방법 - 존재 여부를 먼저 확인
let safeAdults = users.filter(function(user) {
return user.profile && user.profile.age && user.profile.age >= 18; // 각 단계마다 존재하는지 확인
});중첩된 정보 묶음의 속성에 접근할 때는 각 단계마다 존재하는지 확인해야 합니다. 그렇지 않으면 프로그램이 멈출 수 있어요.
❌ 실수 3: 복잡한 조건을 한 줄에 모두 쓰기
// 읽기 어려운 예시
let result = data.filter(item => item.price >= 10000 && item.price <= 50000 && item.category === "electronics" && item.rating >= 4.0 && item.inStock === true);// 읽기 쉬운 방법 - 조건을 의미있는 변수로 나누기
let betterResult = data.filter(function(item) {
let priceInRange = item.price >= 10000 && item.price <= 50000; // 가격이 범위 안에 있나?
let isElectronics = item.category === "electronics"; // 전자제품인가?
let highRated = item.rating >= 4.0; // 평점이 높은가?
let available = item.inStock === true; // 재고가 있나?
return priceInRange && isElectronics && highRated && available; // 모든 조건 만족?
});복잡한 조건은 의미 있는 변수명으로 나누면 나중에 이해하기 훨씬 쉬워집니다.
✏️ 연습문제로 개념 다지기
이제 우리만의 시간입니다. 새로운 지식을 우리 손으로 직접 만져보고, 실수도 하고, 성공의 기쁨도 느껴보겠습니다. 완벽할 필요는 없어요. 천천히, 우리만의 속도로 나아가면 됩니다.
이제 배운 내용을 연습문제를 통해 확실히 익혀보겠습니다.
Ex1) 영화 목록에서 평점 4.0 이상이고 장르가 "액션"인 영화들을 찾는 "추천 액션 영화 찾기" 해보자
let movies = [
{ title: "어벤져스", genre: "액션", rating: 4.5, year: 2019 },
{ title: "타이타닉", genre: "로맨스", rating: 4.8, year: 1997 },
{ title: "다크나이트", genre: "액션", rating: 4.9, year: 2008 },
{ title: "코미디 영화", genre: "코미디", rating: 3.5, year: 2020 }
];
// 여기에 코드를 작성해보세요.
let actionMovies = movies.filter(function(movie) {
return movie.rating >= 4.0 && movie.genre === "액션"; // 평점 4.0 이상이면서 동시에 액션 장르인지 확인
});
console.log("추천 액션 영화:", actionMovies);
// [{ title: "어벤져스", genre: "액션", rating: 4.5, year: 2019 },
// { title: "다크나이트", genre: "액션", rating: 4.9, year: 2008 }]Ex2) 학생 목록에서 이름에 "수"가 들어가고 3학년 이상인 학생들을 찾는 "'수' 들어간 고학년 찾기" 해보자
let students = [
{ name: "김철수", grade: 4 },
{ name: "이영희", grade: 2 },
{ name: "박민수", grade: 5 },
{ name: "정수진", grade: 3 }
];
// 여기에 코드를 작성해보세요.
let filteredStudents = students.filter(function(student) {
let nameHasSu = student.name.includes("수"); // 이름에 "수"가 들어가는지 확인
let gradeOk = student.grade >= 3; // 3학년 이상인지 확인
return nameHasSu && gradeOk; // 두 조건을 모두 만족하는지 확인
});
console.log("조건에 맞는 학생들:", filteredStudents);
// [{ name: "김철수", grade: 4 }, { name: "박민수", grade: 5 }, { name: "정수진", grade: 3 }]Ex3) 상품 목록을 정리해서 가격과 재고가 모두 있는 상품들만 고르는 "판매 가능한 상품 찾기" 해보자
let products = [
{ name: "상품A", price: 10000, stock: 5 },
{ name: "상품B", stock: 0 }, // 가격 없음
{ name: "상품C", price: 20000, stock: 0 }, // 재고 없음
{ name: "상품D", price: 15000, stock: 3 }
];
// 여기에 코드를 작성해보세요.
let availableProducts = products.filter(function(product) {
let hasPrice = product.price && product.price > 0; // 가격이 있고 0보다 큰지 확인
let hasStock = product.stock && product.stock > 0; // 재고가 있고 0보다 큰지 확인
return hasPrice && hasStock; // 가격과 재고가 모두 있는지 확인
});
console.log("판매 가능한 상품들:", availableProducts);
// [{ name: "상품A", price: 10000, stock: 5 }, { name: "상품D", price: 15000, stock: 3 }]🤔 심화 문제로 실력 확인하기
기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 실전 filter() 활용법을 확인해보겠습니다.
Q1. filter()와 map()을 함께 사용하는 장점을 설명해보세요.
정답: filter()로 필요한 데이터만 먼저 걸러낸 후 map()으로 변환하면, 불필요한 데이터에 대한 변환 작업을 하지 않아서 빨라지고, 코드의 의도도 "거르기 → 변환"의 순서로 명확해집니다. 또한 데이터 처리 과정이 단계별로 나뉘어져 문제 찾기와 유지보수가 쉬워져요.
Q2. 다음 코드에서 문제점을 찾고 개선해보세요.
let users = [{ name: "철수", info: { age: 25 } }, { name: "영희" }];
let adults = users.filter(user => user.info.age >= 18);정답: 두 번째 사용자는 info 속성이 없어서 user.info.age에 접근할 때 에러가 발생합니다. 개선된 코드:
let adults = users.filter(function(user) {
return user.info && user.info.age && user.info.age >= 18; // 각 단계마다 존재하는지 확인
});📚 13단원 복습 - 비동기 처리 기억하기
14단원을 계속 배우기 전에 지난 시간에 배운 비동기 처리에 대해 간단히 복습해볼까요?
복습 문제 1: fetch API 사용하기
// 다음 코드를 async/await 없이 then/catch를 사용해서 써보세요
async function getWeather() {
try {
let response = await fetch('https://api.weather.com/current');
let data = await response.json();
console.log(data);
} catch (error) {
console.log("날씨 정보 가져오기 실패:", error);
}
}
// 정답:
function getWeather() {
fetch('https://api.weather.com/current')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.log("날씨 정보 가져오기 실패:", error);
});
}
// 해설: then/catch 방식도 여전히 많이 사용되므로 둘 다 알아두는 것이 좋습니다.복습 문제 2: 콜백 지옥과 Promise 차이점
// 콜백 지옥의 문제점을 설명하고, Promise가 어떻게 해결하는지 말해보세요
// 콜백 지옥 예시:
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
// 너무 깊어짐...
});
});
});
// Promise 해결 방법:
getData()
.then(a => getMoreData(a))
.then(b => getEvenMoreData(b))
.then(c => console.log(c));
// 정답: 콜백 지옥은 코드가 오른쪽으로 계속 들여쓰기되어 읽기 어려워지지만,
// Promise는 연결하여 코드를 평평하고 읽기 쉽게 만들어줍니다.지금까지 실전 filter() 활용법을 배워보았습니다. 이제 여러분도 진짜 프로그래머처럼 복잡한 조건을 다루고, 안전하게 데이터를 처리할 수 있게 되었어요. 앞으로 어떤 복잡한 검색 기능이나 데이터 정리 작업이 필요할 때도 자신 있게 도전해보세요!
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 실전 filter()의 기본 개념 | ✅ |
| 여러 조건 함께 사용하기 | ✅ |
| 데이터 정리와 안전한 처리 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
📂 마무리 정보
오늘 배운 14.2.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
'14. 고급 배열 마법사 (고급 배열 메서드) > 14.2 배열 필터링 (filter)' 카테고리의 다른 글
| 14.2.1 조건에 맞는 것만 골라내기 - `filter()` 도구 (0) | 2025.07.20 |
|---|