자바스크립트 map, filter, reduce 함수

개념: 자바스크립트 배열(Array) 객체의 내장함수들

map() - 배열 안의 각 원소를 변환할 때 사용되고, 이 과정에서 새로운 배열이 만들어진다.
즉, 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 것

filter() - 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
즉, 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 생성

reduce() - 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과 값을 반환

1. 자바스크립트 - map 함수 활용 예제

let numbers = [1,2,3,4,5];
 // function이 여기서 콜백함수!!!, map이 실행될때 자동으로 실행되는 함수~
 //map은 넘버스 배열안에 값을 하나씩 가져온다. 그래서 num은 이름이고, numbers 의 배열 안의 값을 의미함
let result = numbers.map(function(num){  
    return num * 2;
    //result = numbers => num * 2 ;
});
console.log(result);  
// 결과값-> [ 2, 4, 6, 8, 10 ]  map함수는 새로운 배열로 만들때 

같은 의미를 for문으로 작성

let numbers = [1,2,3,4,5];
let result = [];
let j = 0;  // result 배열의 index 값을 0번으로 초기화
for(let i=0; i<numbers.length; i++){
      result[j] = numbers[i] * 2;
        j++ ;  
    }
    console.log(result); 

같은 코드:화살표 함수로 변환하기 (function,return을 빼면됨)

let numbers = [1,2,3,4,5];
let result = numbers.map(num)=> num * 2);
 console.log(result); 
 // numbers 배열을 그대로있고, result라는 새로운 배열 생성
 */

자바스크립트 - map함수(메소드)활용 예제
first name, lastname의 데이터 값을 결합하여 완전한 이름 만들기

// [ ] 배열안에 {} 객체를 만듬
let users = [
    {firstName:'Kim', lastName:'sundong'},
    {firstName:'Park', lastName:'taeho'},
    {firstName:'Lee', lastName:'duhee'},
];

let userFullname = users.map(function(element){
    //return element.firstName + ' ' + element.lastName

    // 템플릿문자열= 백틱 ` `으로 묶어서 해결
     return `${element.firstName} ${element.lastName}`
});
console.log(userFullname);  
//결과: [ 'Kim sundong', 'Park taeho', 'Lee duhee' ]
 

2.자바스크립트 - filter 함수 활용 예제

const numbers = [1,2,3,4,5,6,7,8,9,10];
const result = numbers.filter(function(num){
    return !(num%2 === 0) ;
});
/*const result = numbers.filter(num => num%2 === 0);
=> 화살표함수로 재작성*/
console.log(result);

for문의로 재작성

const numbers = [1,2,3,4,5,6,7,8,9,10];
const result = [];  // 2의 배수 값만 받을 새로운 배열
let j=0;  // result 배열의 인덱스를 j 로 만듬
for(let i=0; i<10; i++){
    if(numbers[i]%2 === 0) {
        result[j] = numbers[i];
        j++;
    }
}
console.log(result);

3.자바스크립트 reduce() 함수 활용예제?
=>배열요소를 결합해서 하나의 결과를 생성하는 경우에 유용한 함수

[문제]
영업사원이 30명이 있다면, 각 영업사원들의 7월 영업매출액의 합산하여
총 매출액을 산출하여라.

let salesman = [
    { 사원번호:1001, 사원명:'김종호', 매출액:20000000},
    { 사원번호:1002, 사원명:'박태호', 매출액:35000000},
    { 사원번호:1003, 사원명:'오수철', 매출액:60000000},
    { 사원번호:1004, 사원명:'안재홍', 매출액:40000000},
    { 사원번호:1005, 사원명:'손유일', 매출액:80000000},
];
let total_sales_amount = salesman.reduce
((accumulator, salesperson)=>accumulator + salesperson.매출액,0);

//function으로 재작성
let total_sales_amount = salesman.reduce(function(accumulator, salesperson){
return accumulator + salesperson.매출액},0);

console.log(total_sales_amount);  // 235000000

자바스크립트의 reduce() 함수의 활용예제

let numbers= [10,20,30,40,50];
let sum = numbers.reduce(function(accumulator, currentValue){
     return accumulator + currentValue;
},0);

//화살표 함수로 재작성
let sum=numbers.reduce((accumulator,currentValue) => accumulator+currentValue ,0);
console.log(sum);