[Vue.js] 💡알아두면 좋은 Javascript 배열 함수들 (map, filter, forEach 등)

1. map 

배열의 각 요소에 대해 주어진 함수를 실행한 결과를 새로운 배열로 반환

let array = [1, 2, 3];
let newArray = array.map((element) => element * 2);
console.log(newArray); // 출력: [2, 4, 6]

 

새로운 형태로도 바꿀 수 있는데 많이 쓰이는 유형 중 JSON 형태가 있음

array.map((item,index)=>{
    return {
        "number":item,
        "idx":index
    }
});

---

2. filter

배열의 각 요소에 대해 주어진 함수의 조건을 만족하는 요소들로만 이루어진 새로운 배열을 반환

const array = [1, 2, 3, 4];
const evenNumbers = array.filter((element) => element % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

---

3. forEach

배열의 각 요소에 대해 주어진 함수를 실행(for문과 매우 유사함)

const array = [1, 2, 3];
array.forEach((element) => console.log(element));
// 출력: 1, 2, 3

 

** 필요에 따라 map이나 filter와 조합해서 종종 사용한다.

 

🖇️ map X forEach 예제 :

배열의 모든 요소를 변환한 다음, 변환된 값들로 무언가를 처리하는 예시

const array = [1, 2, 3, 4];
const doubledArray = array.map((element) => element * 2);

doubledArray.forEach((element) => {
  console.log(`Doubled value: ${element}`);
});

// 출력:
// Doubled value: 2
// Doubled value: 4
// Doubled value: 6
// Doubled value: 8

 

🖇️ filter X forEach 예제 :

특정 조건에 맞는 요소만 추출하고, 그 요소들에 대해 추가 작업을 수행

const array = [1, 2, 3, 4, 5, 6];
const evenNumbers = array.filter((element) => element % 2 === 0);

evenNumbers.forEach((element) => {
  console.log(`${element} is even`);
});

// 출력:
// 2 is even
// 4 is even
// 6 is even

---

4. includes

배열에 특정 요소가 포함되어 있는지 여부를 확인하여 true 또는 false를 반환

const array = [1, 2, 3, 4];
const includesThree = array.includes(3);
console.log(includesThree); // 출력: true

 

---

5. slice

배열의 일부를 추출하여 새로운 배열로 반환( 원본 배열 변경 X )

array.slice(start, end);

 

• start : 추출을 시작할 위치
• end : 추출을 종료할 위치 (but, end에 해당하는 요소는 포함 X)

 

const array = [1, 2, 3, 4, 5];

// 배열의 2번째부터 4번째 요소까지 추출 (index 1부터 3까지)
const slicedArray = array.slice(1, 4);

console.log(slicedArray); // 출력: [2, 3, 4]
console.log(array);       // 출력: [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

 

---

6. splice

배열의 요소를 추가, 제거 또는 교체하여 배열을 변경( 원본 배열 변경 O ) 

array.splice(start, deleteCount, item1, item2, ...);

 

- splice는 최소 두 개의 인자를 전달받음 : start와 deleteCount.

• start: 배열에서 변경을 시작할 위치
• deleteCount: 제거할 요소의 개수 지정 (추가적으로, deleteCount 이후에 새롭게 추가할 요소들을 인자로 전달 가능)
• 삭제 없이 요소 추가하려면 deleteCount를 0으로 설정

const array = [1, 2, 3, 4, 5];

// 배열의 2번째 요소부터 2개의 요소를 제거하고, 그 자리에 6과 7을 추가
const removedItems = array.splice(1, 2, 6, 7);

console.log(array);       // 출력: [1, 6, 7, 4, 5] (원본 배열이 변경됨)
console.log(removedItems); // 출력: [2, 3] (제거된 요소들)

 

예시#1) 요소 삭제 

const array = [1, 2, 3, 4, 5];

// 배열의 3번째 요소 하나를 삭제
const removedItem = array.splice(2, 1);

console.log(array);       // 출력: [1, 2, 4, 5] (3이 삭제됨)
console.log(removedItem); // 출력: [3]

 

예시#2) 요소 추가

const array = [1, 2, 3, 4, 5];

// 배열의 2번째 위치에 9와 10을 추가 (삭제하지 않음)
array.splice(1, 0, 9, 10);

console.log(array); // 출력: [1, 9, 10, 2, 3, 4, 5]

 

---

7. some

배열에서 하나 이상의 요소가 주어진 조건을 만족하면 true를 반환

const array = [1, 2, 3, 4];
const hasEvenNumber = array.some((element) => element % 2 === 0);
console.log(hasEvenNumber); // 출력: true

---

8. every

배열의 모든 요소가 주어진 조건을 만족하면 true를 반환

const array = [2, 4, 6];
const allEvenNumbers = array.every((element) => element % 2 === 0);
console.log(allEvenNumbers); // 출력: true

---

9. find

주어진 조건을 만족하는 첫 번째 요소를 반환. 없으면 undefined를 반환

const array = [1, 2, 3, 4];
const found = array.find((element) => element > 2);
console.log(found); // 출력: 3

 

---

10. reduce

배열을 순회하며 누적된 결과를 반환. 주로 배열의 모든 값을 합치거나, 복잡한 데이터를 축약하는 데 사용

* 합계, 평균, 최대값/최소값 찾기, 객체 배열의 필드 누적, 중복 제거, 데이터 그룹화 등 다양한 작업 수행 가능

const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 출력: 10

 

• accumulator :  각 반복에서 현재까지의 합 저장
• currentValue:  현재 요소의 값
• initialValue: 0이므로 accumulator는 첫 번째 반복에서 0부터 시작

예시#1) 배열의 최대값 찾기

const numbers = [1, 2, 3, 4, 5];

const max = numbers.reduce((accumulator, currentValue) => {
  return Math.max(accumulator, currentValue);
}, 0);

console.log(max); // 출력: 5

 

 

 

• Math.max를 사용하여 각 요소를 비교하며 최대값 찾기
• accumulator는 현재까지의 최대값을 저장하고, currentValue와 비교하여 더 큰 값을 반환

예시#2) 객체배열에서 값 누적하기

const products = [
  { name: "Laptop", price: 1000 },
  { name: "Phone", price: 500 },
  { name: "Tablet", price: 700 }
];

const totalPrice = products.reduce((accumulator, product) => {
  return accumulator + product.price;
}, 0);

console.log(totalPrice); // 출력: 2200

 

 

예시#3) 배열 요소 중복 제거

const array = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);

console.log(uniqueArray); // 출력: [1, 2, 3, 4, 5]

 

예시#4) 객체 배열 그룹화하기

const people = [
  { name: "Alice", age: 21 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 21 },
  { name: "David", age: 25 }
];

const groupedByAge = people.reduce((accumulator, person) => {
  if (!accumulator[person.age]) {
    accumulator[person.age] = [];
  }
  accumulator[person.age].push(person);
  return accumulator;
}, {});

console.log(groupedByAge);
// 출력:
// {
//   21: [{ name: "Alice", age: 21 }, { name: "Charlie", age: 21 }],
//   25: [{ name: "Bob", age: 25 }, { name: "David", age: 25 }]
// }