[새싹 성동 2기] 3-2. Javascript 배열 메서드 활용법

목차

 

1. Array.map()    

2. Array.filter()    

3. Array.reduce()

 

 

 

1. map() 메서드

배열의 각 요소를 일정한 규칙에 따라 변환하여 새로운 배열을 반환하며, 원본 배열은 변경되지 않음

const arr1 = [1, 2, 3, 4];

// 배열의 각 요소의 값에 2를 곱한 새로운 배열을 생성 후 출력 - 일반적인 반복문
const arr2 = [];
for (let i = 0; i < arr1.length; i++) {
    arr2[i] = arr1[i] * 2;
}
console.log(arr2);  // [2, 4, 6, 8]

// map() 함수를 사용
const arr3 = arr1.map(value => value * 2);
console.log(arr3);  // [2, 4, 6, 8]

 

 

2. filter() 메서드

배열의 각 요소를 조건에 따라 걸러내어 새로운 배열을 반환하며, 조건에 맞지 않는 요소는 제외됨

const arr = ["프로젝트 문", "로보토미", "라오루", "림컴", "김지훈은", "슈나쟝","자극적인 귀여움"];

// 네 글자 이상인 단어만 추출해서 출력 - 일반적인 반복문
const results1 = [];
for (let i = 0; i < arr.length; i++) {
    if(arr[i].length >= 4) {
        results1.push(arr[i]);
    }
}
console.log(results1);  // ['프로젝트 문', '로보토미', '김지훈은', '자극적인 귀여움']

// filter() 함수를 사용
const result2 = arr.filter(value => value.length >= 4);
console.log(result2);   // ['프로젝트 문', '로보토미', '김지훈은', '자극적인 귀여움']

// 글자 길이가 홀수인 단어만 추출해서 출력
console.log(arr.filter(v => v.length % 2 === 1)); // ['라오루', '슈나쟝']

 

 

3. reduce() 메서드

배열의 모든 요소를 하나의 값으로 줄이는데 사용하며, 누적 값을 계산하거나 배열 데이터를 조합할 때 유용함

const num = [1, 5, 7, 10, 32, 54, 97, 102];

// 배열 데이터의 합을 구해서 출력 - 일반적인 반복문
let sum1 = 0;
for (let i = 0; i < num.length; i++) {
    sum1 += num[i];
}
console.log(sum1);  // 308

// reduce() 함수를 사용
let sum2 = num.reduce((p, c) => p + c, 0);  // p는 previous, c는 current 이고 0은 p의 초기값을 의미한다.
console.log(sum2);  // 308

 

 

 

※ 위의 개념들을 함께 조합해서도 사용할 수 있음

const num = [1, 5, 7, 10, 32, 54, 97, 102, 66, 88, 777];

// num 배열의 각 항목의 값에 3을 곱한 결과 중 짝수의 합을 구하시오
// num 배열의 각 항목의 값에 3을 곱한 = map()
// 결과 중 짝수 = filter()
// 합 = reduce()

const mapFunc = v => v * 3;
const filterFunc = v => v % 2 === 0;
const reduceFunc = (p, c) => p + c;

const result = num.map(mapFunc).filter(filterFunc).reduce(reduceFunc);
console.log(result);    // 1056