2025 / 02 / 11
오늘 수업 시간에는 배열 매서드에 대해 배웠습니다.
자주 사용한 메서드도 있었지만 보기만 하고 사용은 안한 메서드도 있었습니다.
배열은 순회하고 변형하는데 자주 사용된다고 하니 간결하게 정리해보겠습니다.
💌 forEach( )
배열의 모든 요소에 대해 한 번씩 주어진 작업을 실행하는 메서드입니다.
배열을 순회하면서 각 항목에 대해 어떤 작업을 실행할 때 사용됩니다.
1) 특징
- 반환 값 : undefined (새로운 배열을 생성하지 않음)
- 원본 배열을 변경하지 않습니다.
2) 사용 예시
- forEach( )는 배열의 각 항목을 순차적으로 콘솔에 출력합니다.
let num = [1, 2, 3, "hello"];
num.forEach((item, index) => {
console.log(item); // 배열의 각 요소를 출력
});
💌 map( )
배열을 순회하면서 각 항목을 변경하여 새로운 배열을 반환하는 메서드입니다.
기본 배열은 변경되지 않습니다.
1) 특징
- 반환 값 : 새로운 배열 (원본 배열을 변형하지 않음)
- 배열의 각 요소에 대해 변환 작업을 할 때 유용합니다.
2) 사용 예시
- map( )을 사용해 배열의 각 숫자에 10을 더한 새로운 배열을 만들었습니다.
- map( )은 새로운 배열을 생성하기 때문에 원본 배열은 바뀌지 않습니다.
const numbers = [1, 2, 3];
const newNumbers = numbers.map((number) => {
return number + 10;
});
console.log(numbers); // [1, 2, 3] - 원본 배열은 그대로
console.log(newNumbers); // [11, 12, 13] - 새로운 배열 반환💌 filter( )
배열에서 주어진 조건을 만족하는 요소만 추출하여 새로운 배열을 반환하는 메서드입니다.
조건에 맞지 않는 요소는 걸러지고, 새로운 배열만 반환됩니다.
1) 특징
- 반환 값 : 조건에 맞는 요소들로 이루어진 새로운 배열
- 원본 배열을 변경하지 않으며, 조건에 맞는 요소들만 필터링합니다.
2) 사용 예시
- 배열을 순회하며 주어진 조건을 만족하는 요소들만 필터링하여 새로운 배열을 생성합니다.
- 예제에서는 짝수인 숫자들만 추출하여 새로운 배열을 생성했습니다.
const numbers = [1, 2, 3, 4, 5];
// 짝수만 추출
const evenNumbers = numbers.filter((item) => item % 2 === 0);
console.log(evenNumbers); // [2, 4]3) 문자열 배열 필터링
- 배열의 각 요소가 문자열일 때도 filter( )를 사용할 수 있습니다.
- 'p'라는 문자가 포함된 과일만 필터링하는 예시입니다.
- includes( )를 사용하여 각 문자열에 'p'가 포함된 과일만 필터링합니다.
const fruits = ["apple", "banana", "grape", "orange"];
let newFruits = fruits.filter((fruit) => fruit.includes("p"));
console.log(newFruits); // ["apple", "grape"]4) 객체 배열 필터링
- 배열의 각 요소가 객체일 때도 사용됩니다.
- 가격이 100 이상인 제품만 필터링하는 예시입니다.
const products = [
{ name: "apple", price: 100 },
{ name: "banana", price: 90 },
{ name: "grape", price: 75 },
{ name: "orange", price: 120 },
];
let expensiveProducts = products.filter((item) => item.price >= 100);
console.log(expensiveProducts);
// [{ name: "apple", price: 100 }, { name: "orange", price: 120 }]💌 응용 문제
1. 주어진 숫자 배열에서 짝수만 필터링하여 새로운 배열을 만드세요.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let result = numbers.filter((item, index) => item % 2 == 0);
console.log(result);2. 사람들의 나이가 담긴 배열에서 성인(18세 이상)만 필터링하세요.
const ages = [12, 18, 22, 16, 30, 25, 15];
let result1 = ages.filter((item, index) => item >= 18);
console.log(result1);3. 주어진 문자열 배열에서 모든 단어를 대문자로 변환하는 배열을 만드세요.
const words = ["apple", "banana", "cherry"];
let result2 = words.map((item, index) => item.toUpperCase());
console.log(result2);4. 상품 가격이 담긴 배열에서 모든 가격을 10% 할인한 새로운 배열을 만드세요.
const prices = [10000, 25000, 30000, 15000];
let result3 = prices.map((item, index) => item * 0.9);
console.log(result3);5. 배열의 값을 두 배로 만드는 코드를 작성하세요.
const numbers2 = [1, 2, 3, 4, 5]; let result4 = numbers2.map((item, index) => item * 2); console.log(result4);
let result4 = numbers2.map((item, index) => item * 2);
console.log(result4);6. 알파벳 a가 포함된 단어를 제외한 단어 배열을 만드세요.
const words2 = ["apple", "banana", "cherry", "grape", "melon"];
let result5 = words2.filter((item, index) => item.includes("a") == 0);
console.log(result5);25일차 후기
- 저번에 배웠던 부분이고 사용도 해봤던 메서드가 많아서 어렵지는 않았습니다.
- filter 메서드는 로컬스토리지를 사용할 때 한 번 사용해봤는데, 오늘 개념까지 배우고 응용 문제를 다뤄보니 헤매지 않고 할 수 있었는 것 같습니다. ₊·◟(⌯ˇ - ˇ⌯)◜‧
૮꒰ ྀི〃´꒳`〃꒱ა