[Javascript] map((element, index) => {}) ,filter()

map() : 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수

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

newArray = array.map((element, i) => {
    return element * 2;
});

console.log(array); // [1,2,3,4,5] (기존 배열은 그대로)
console.log(newArray); // [2,4,6,8,10] (콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만듦)

ex) map()을 통해 배열 [1,2,3,4,,,9]을 만들어보자 / forEach(), map()의 장점 : 함수를 연달아 사용할 수 있다.

Array(9) // 길이 9 짜리 빈 배열 생성 ([empth x 9])
Array(9).fill() // 길이 9짜리 배열을 undefined로 채운다. [undefined, undefined,,, undefined]
Array(9).fill(0) // 길이 9짜리 배열을 0으로 채운다. [0,0,0,0,,,0,0]

Array(9).fill(0).map((element, index) => {
    return index + 1;
})

ex) 숫자로 된 문자열의 각 자릿수를 더하여 리턴해보자

var str = "1234";
var array = str.split("").map(Number); // [1,2,3,4]
var answer = array.reduce(function add(sum, currentValue){
    return sum + currentValue;
}, 0);
    
console.log(answer); // 10

ex) 배열에 저장된 단어의 각 자릿수를 3번씩 반복해보기

var array = ['hello','world'];

for (var i = 0; i < array.length; i++){
    var tempArr = array[i].split("");
    array[i] = tempArr.map(v => v.repeat(3)).join("");
}

console.log(array); // ['hhheeellllllooo', 'wwwooorrrlllddd']

filter() : 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

var array = Array(8).fill().map((element, index) => {
       return index + 1;
    });
    
    var newArr = array.filter((number) => {
        return number % 2 == 0;
    });
    
    console.log(newArr);

ex) filter()을 통해 1~5의 숫자 중 3보다 큰 숫자를 리턴하기

var array = Array(5).fill().map((element, index) => {
    return index + 1;
});
var result = array.filter((element) => {
    if (element > 3){
        return element;
    }
});
    
console.log(result); // [4,5]

var array = Array(5).fill().map((element, index) => {
    return index + 1;
});

var result = array.filter(element => element >3);

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

forEach()와 map()의 차이점 1 : 새로운 배열을 반환하는 map()

• forEach() : 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행한다.
• map() : 배열 내의 모든 요소 각각에 대해 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 리턴한다.

forEach()와 map()의 차이점 2 : 리턴 값

• forEach() : 문밖으로 리턴값을 받지 못한다.
• map() : 리턴값을 출력할 수 있다.

즉, forEach()와 map()의 차이점을 정리해보면,

• forEach() : 기존의 Array를 변경한다.
• map() : 새로운 Array를 반환한다.