🚀 초보자를 위한 자바스크립트 배열 고급 메소드 완전 정복!
안녕하세요, 지난번에 배열의 기본 개념을 살펴봤는데요. 오늘은 한 단계 더 나아가 자바스크립트 배열의 고급 메소드들을 알아보겠습니다! 이 메소드들은 처음에는 어려워 보일 수 있지만, 실용적인 예시와 함께라면 금방 이해할 수 있을 거예요! 😊
📚 고급 배열 메소드란?
자바스크립트의 고급 배열 메소드들은 배열을 더 효율적으로 조작하고 가공할 수 있게 도와주는 특별한 함수들입니다. 이 메소드들은 코드를 더 간결하고 읽기 쉽게 만들어 줍니다!
1. 🔍 map() - 배열의 모든 요소 변환하기
map() 메소드는 배열의 모든 요소를 변환하여 새로운 배열을 만듭니다. 마치 공장에서 원재료를 새로운 제품으로 바꾸는 것과 같아요!
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// 실생활 예시: 상품 가격에 10% 할인 적용하기
const prices = [1000, 2500, 800, 4500];
const discounted = prices.map(price => price * 0.9);
console.log(discounted); // [900, 2250, 720, 4050]
2. 🧹 filter() - 조건에 맞는 요소만 선택하기
filter() 메소드는 특정 조건을 만족하는 요소만 선택하여 새 배열을 만듭니다. 마치 체를 이용해 원하는 것만 걸러내는 것과 같아요!
const scores = [85, 40, 92, 65, 30, 77];
const passingScores = scores.filter(score => score >= 60);
console.log(passingScores); // [85, 92, 65, 77]
// 실생활 예시: 완료된 할 일만 필터링하기
const todos = [
{task: '운동하기', completed: true},
{task: '쇼핑하기', completed: false},
{task: '책읽기', completed: true}
];
const completedTasks = todos.filter(todo => todo.completed);
3. 💰 reduce() - 배열의 값들을 하나로 합치기
reduce() 메소드는 배열의 모든 요소를 순회하며 하나의 결과값으로 줄여줍니다. 마치 여러 재료를 넣고 하나의 요리를 만드는 것과 같아요!
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
// 실생활 예시: 장바구니 상품 총액 계산하기
const cart = [{name: '노트북', price: 1200000}, {name: '마우스', price: 35000}];
const totalPrice = cart.reduce((total, item) => total + item.price, 0);
4. 🔎 find() - 조건에 맞는 첫 번째 요소 찾기
find() 메소드는 조건을 만족하는 첫 번째 요소를 반환합니다. 마치 바늘 더미에서 특정 바늘을 찾는 것과 같아요!
const users = [
{id: 1, name: '철수', age: 25},
{id: 2, name: '영희', age: 17},
{id: 3, name: '민수', age: 32}
];
const adult = users.find(user => user.age >= 18);
console.log(adult); // {id: 1, name: '철수', age: 25}
5. ✅ every() & some() - 조건 검사하기
- every(): 모든 요소가 조건을 만족하는지 확인 (AND 연산)
- some(): 하나라도 조건을 만족하는지 확인 (OR 연산)
const teamAges = [24, 30, 18, 20, 22];
const allAdults = teamAges.every(age => age >= 18); // true
const anyTeenager = teamAges.some(age => age < 20); // true
6. 🔄 forEach() - 각 요소에 대해 함수 실행하기
forEach() 메소드는 배열의 각 요소에 대해 함수를 실행합니다. map()과 달리 새 배열을 반환하지 않아요!
const fruits = ['🍎', '🍌', '🍊'];
fruits.forEach((fruit, index) => {
console.log(`${index+1}번째 과일: ${fruit}`);
});
// 출력: "1번째 과일: 🍎" "2번째 과일: 🍌" "3번째 과일: 🍊"
7. 🧩 flatMap() - 매핑 후 평탄화하기
flatMap() 메소드는 map()을 실행한 후 결과를 1단계 평탄화합니다. 중첩된 배열을 다룰 때 유용해요!
const sentences = ['안녕하세요!', '자바스크립트 배열 메소드는 정말 편리해요.'];
const words = sentences.flatMap(sentence => sentence.split(' '));
// ['안녕하세요!', '자바스크립트', '배열', '메소드는', '정말', '편리해요.']
🌟 메소드 체이닝 - 여러 메소드 연결하기
고급 배열 메소드의 진정한 힘은 메소드 체이닝을 통해 발휘됩니다! 여러 메소드를 연결해서 복잡한 작업을 간단하게 처리할 수 있어요!
const products = [
{name: '노트북', price: 1200000, inStock: true},
{name: '키보드', price: 45000, inStock: false},
{name: '마우스', price: 35000, inStock: true},
{name: '모니터', price: 350000, inStock: true}
];
// 재고 있는 상품만 골라서 가격에 10% 할인 적용 후 총액 계산
const totalDiscounted = products
.filter(p => p.inStock)
.map(p => p.price * 0.9)
.reduce((total, price) => total + price, 0);
🏆 실생활 활용 사례
- 📊 데이터 필터링 및 변환
- 설문 응답 중 특정 조건을 만족하는 데이터만 추출
- 가격 데이터를 다른 통화로 변환
- 📝 통계 계산
- 배열 요소의 합계, 평균, 최대/최소값 구하기
- 특정 조건을 만족하는 항목의 개수 세기
- 🛒 데이터 정렬 및 그룹화
- 상품을 가격별로 정렬
- 사용자를 나이대별로 그룹화
🎁 마무리
이러한 고급 배열 메소드들은 처음에는 복잡해 보일 수 있지만, 익숙해지면 코드를 훨씬 더 효율적으로 작성할 수 있게 해줍니다. 복잡한 반복문을 사용하지 않고도 데이터를 쉽게 처리할 수 있죠! 😄
가장 좋은 학습 방법은 직접 코드를 작성해보는 것입니다. 이 메소드들을 자신의 프로젝트에 적용해보세요! 어떤 메소드가 어떤 상황에서 가장 효과적인지 알게 될 거예요.
다음에는 배열과 관련된 최신 자바스크립트 기능들(구조 분해, 전개 연산자 등)에 대해 알아보겠습니다. 궁금한 점이 있으면 댓글로 남겨주세요! 💬
