[javascript] Array map(), filter(), reduce()

map(), filter(), reduce() 세 가지 함수는 배열 요소를 나열하거나 특정 조건에 맞게 보여줘야 할 때 자주 쓰인다.

중요한 친구들 다시 한 번 자세하게 정리!!!!!!!

 

 

1. Array.map()

 

callback함수를 각각의 요소마다 실행시켜 리턴값으로 새로운 배열로 반환한다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback : 새로운 배열 요소를 생성하는 함수.

다음 세 가지 인수를 가진다.

• currentValue : 처리할 현재 요소
• index (Optional) : 처리할 현재 요소의 인덱스
• array (Optional) : map()를 호출한 배열
• thisArg (Optional) : callback을 실행할 때 this로 사용할 값

 

사용예시

const arr1 = [1, 4, 9, 16];

const arr2 = arr1.map(x => x * 2);

console.log(arr2);
// [ 2, 8, 18, 32 ]

 

배열 안의 특정 값으로 새로운 배열 만들기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const ages = users.map(user => user.age);

console.log(ages);
// [22, 32, 21, 35]

 

특정요소 재정의하기

const users = [
    { name: 'YD', age: 22 },
    { name: 'Bill', age: 32 },
    { name: 'Andy', age: 21 },
    { name: 'Roky', age: 35 },
];

const newUsers = users.map(user => {
    if (user.name === 'YD') {
        return { ...user, age: 18 };
    }

    return { ...user };
});

console.log(newUsers);
// [{name: "YD", age: 18}, {name: "Bill", age: 32}, {name: "Andy", age: 21}, {name: "Roky", age: 35}]

 

react에 적용

function Contacts() {
    const contactData = [
        { name: "YD", phone: "010-0000-0001" },
        { name: "Bill", phone: "010-0000-0002" },
        { name: "Andy", phone: "010-0000-0003" },
        { name: "Roky", phone: "010-0000-0004" }
    ];

    return (
        <div>
            <h1>Contacts</h1>
            <ul>
                {contactData.map((contact, index) => {
                    return (<li key={index} name={contact.name} phone={contact.phone} />);
                })}
            </ul>
        </div>
    );
}

 

2. filter()

 

원하는 조건에 만족하는 요소들을 새로운 배열로 반환한다.

arr.filter(callback(element[, index[, array]])[, thisArg])

callback : 각 요소를 검사할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버림.

다음 세 가지 인수를 가진다.

• element : 처리할 현재 요소
• index (Optional) : 처리할 현재 요소의 인덱스
• array (Optional) : filter()를 호출한 배열
• thisArg (Optional) : callback을 실행할 때 this로 사용할 값

 

사용예시

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
// [1, 2, 3, 4, 5];

console.log(result);
// [4, 5]

 

const guys = [
    { name: 'YD', money: 500000 },
    { name: 'Bill', money: 400000 },
    { name: 'Andy', money: 300000 },
    { name: 'Roky', money: 200000 }
];

const rich = guys.filter(man => man.money > 300000);

console.log(rich);
// [{name: "YD", money: 500000}]

 

map과 조합하여 사용하기

const guys = [
    { name: 'YD', money: 500000 },
    { name: 'Bill', money: 400000 },
    { name: 'Andy', money: 300000 },
    { name: 'Roky', money: 200000 }
];

const richNames = guys.filter(man => man.money > 300000)
    .map(man => man.name)

console.log(richNames);
// ["YD", "Bill"]

 

다중 조건 적용하기

// money를 300000 이상 가진 name이 YD인 사람을 찾는다.
const rich = guys.filter(man => {
    if (man.money > 300000) {
        if (man.name === 'YD') {
            return true;
        }
    }

    return false;
});

console.log(rich);
// [{name: "YD", money: 500000}]

 

3. reduce()

 

callback함수를 각각의 요소마다 실행시켜 값을 누적하여 결과값을 반환한다.

(주로 그룹 지어진 데이터의 결과를 도출할 때 사용한다.)

arr.reduce(callback[, initialValue])

callback : 배열의 각 요소에 대해 실행할 함수.

다음 네 가지 인수를 가진다.

• accumulator : callback함수의 반환값을 누적
• currentValue : 배열의 현재 요소
• index(Optional) : 배열의 현재 요소의 인덱스
• array(Optional) : 호출한 배열

 

사용예시

const numbers = [1, 2, 3, 4];
const result = numbers.reduce((number1, number2) => number1 + number2);

console.log(result);
// 10;

// 0 + 1 = 1
// 1 + 2 = 3
// 3 + 3 = 6
// 6 + 4 = 10

 

초기값 지정

[0, 1, 2, 3, 4].reduce((accumulator, currentValue) => {
  accumulator + currentValue;
}, 10);

// 20