es6 반복문 (map, filter, reduce)

map()

• 맵함수는 입력한 배열의 정보중 한조각을 받아 새로운 값을 반환한다.
• 때로는 정보의 일부를 반환하기도 한다.
• 또는 정보를 변형해서 새로운 값을 반환하기도 한다.
  예를 들면 모든 값을 대문자로 변환하거나 정수를 화폐 단위로 변환해서 새로운 배열로 반환 할수 있다.

let arr = [1,2,3,4,5];

let newArr = arr.map( (val, idx) => val * val );

console.log ( newArr ); // [1,4,9,16,25]

const band = [
	{
        name:'corbett',
        instrument:'guitar'
    },
    {
        name:'evan',
        instrument:'bass'
    },
    {
        name:'sean',
        instrument:'piano'
    },
    {
        name:'brett',
        instrument:'drums'
    },
]

const instruments = band.map(member => member.instrument);
console.log(instruments)
//['guitar','bass','piano','drums']

• 실행결과 배열을 얻게 된다는 사실을 알수 있다. 실행전에 미리 배열을 선언할 필요도 없다.
• 원본 배열과 같은 길이의 배열이 생성된다는 것을 알 수있다.
• 악기만 배열에 담기고 다른 정보는 담기지 않는다는 점을 알수있다.

filter()

• 배열을 순회하면서 조건에 맞는 배열값만 통과시켜서 새로운 배열로 반환한다.
• map() 함수와는 다르게 데이터의 형태는 유지하면서 배열의 길이만 줄인다.

let users = [
  { id: 11, name: 'Adam', age: 23, group: 'editor' },
  { id: 47, name: 'John', age: 28, group: 'admin' },
  { id: 85, name: 'William', age: 34, group: 'editor' },
  { id: 97, name: 'Oliver', age: 28, group: 'admin' }
];
let res = users.filter(it => it.name.includes('oli'));
console.log(res);
// res is []

reduce

• 배열을 줄여서 나가서 하나의 값을 만든다는 컨셉
• let les = arr.reduce( (acc, val, idx) => {}, 초기값); -> 초기모양
• 첫번째 인자는 초기값/누적값
• 두번째 인자는 배열값을 순회하며 처리
• 세번째 인자는 (idx) 인덱스값
• 네번째 인자는 기존배열 그대로 보여줌

//사칙연산
let arr = [ 13, 63, 29, 57];
let sum = arr.reduce((total, val, idx, arr) => total + val, 0);

console.log(sum);// 162

// arr의 최대값과 최소값을 구해보자!
// 초기값이 선언되지 않으면 첫번째 값이 초기값이 된다.
let arr = [ 13, 63, 29, 57];
let isMaxNum = arr.reduce((total, val) => total > val ? total : val);
let isMinNum = arr.reduce((total, val) => total < val ? total : val);

console.log(isMaxNum); // 63
console.log(isMinNum); // 13

//reduce로 배열에 2곱하기 map에 2곱하기
let data = [1, 2, 3];

// 1. reduce 사용예시
let doubled1 = data.reduce(function(acc, value) {
  acc.push(value*2);
  
  return acc;
}, []) // 초기값을 써주는 것을 잊지 말자!

// 2. map 사용예시
let doubledMap = data.map(el => el*2);

console.log(doubled1) // [2, 4, 6]
console.log(doubledMap) // [2, 4, 6]

// 평균값 구하는 누적 계산식
let arr = [1,2,3,4,5];

let res = arr.reduce( (acc, val, idx) => { // acc는 누적값, val은 들어오는 배열값, idx는 인덱스값(순서값)
    let avg = acc + val; // 누적값 + 배열값
    if ( idx == arr.length-1 ){ // 마지막 index에서 나눠서 평균값 계산
        avg = avg / arr.length; 
    }
    return avg; // return 값은 다음 반복의 acc으로 간다.
}, 0); // 0은 초기 acc값

console.log( res ); // 3

코드샌드박스 ->
https://codesandbox.io/s/practical-faraday-yp7wjl?file=/src/index.js:300-413

반복문 리액트에서 활용 ->

https://codesandbox.io/s/bilions-project-forked-86d76u?file=/pages/index.js

연습문제

function biggerThanThree(numbers) {
  /* 3보다 큰 숫자로 이루어진 배열 반환 */
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); // [4, 5, 6, 7]