Map( ) , forEach( )

배열을 순회하는 방법

✅ Array 관련 메소드

👉 map()과 forEach() 모두 Array 관련 메서드들로써, ES5 부터 등장하였다.
👉 forEach()는 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행.
👉 map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환.
👉 map()과 forEach() 모두 아래 3 개의 인자로 호출됨

• currentValue (배열 원소의 값)
• index (현재 요소의 인덱스)
• array (현재 배열)

---

⏩ 요약

forEach()
: Array 배열 요소를 제공된 함수로 한 번 실행(배열의 각 요소에 대해 callback을 실행).

forEach() 메소드는 아무것도 리턴하지 않는다(undefined).
단지 제공된 함수로 Array 요소를 순회한 후 호출만 한다.

이 콜백은 호출하는 Array를 변경할 수 있다.(원래의 Array에 영향을주고 변경)

const animals = ["lion", "tiger"];
animals.forEach(animal => {
  console.log(animal);
});
// [콘솔 출력 결과]
// lion
// tiger
// ❗ forEach 메소드는 return이 없다(순회한 후 호출만 한다).

map()
: 모든 Array 요소가 제공된 함수로 호출될때 새로운 array를 생성
(배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴).

map() 메소드는 Array안에 요소들을 호출한다.
forEach()와 다른점은 값을 사용하고 Array와 동일한 사이즈의 새로운 Array을 반환한다.(원래 배열은 변경되지 않는다)

/* return이 없는 map()메소드 */
const animals = ["lion", "tiger"];
let rr = animals.map(animal => {
  console.log(animal);
});

console.log(rr); // [undefined, undefined]
// [콘솔 출력 결과]
// [undefined, undefined]

// ❗ map 메소드를 잘 살리려면 return이 있어야 한다.


/* return이 있는 map()메소드 (1) */

const animals = ["lion", "tiger"];
let rr = animals.map(animal => {
  console.log(animal);
  return "mammal " + animal
});
console.log(rr); // ["mammal lion", "mammal tiger"]
// [콘솔 출력 결과]
// ["mammal lion", "mammal tiger"]
// ❗ return을 통해 새로운 배열을 만들어서 출력할 수 있다


/* return이 있는 map()메소드 (2) */

let Array = [
	     {key:1, value:10},
             {key:2, value:20},
             {key:3, value: 30}
             ];

let result = Array.map(function(arr){ 
   let obj = {};
   obj[arr.key] = arr.value;
   return obj;
});
// result는 [{1:10}, {2:20}, {3:30}]
// ❗ new Object에 키값으로 주기 위한 방법 : obj[지정할 key값] = 그에 맞는 value값

✨ 배열을 순회하려면 forEach( ), 배열을 순회 후 새 배열을 얻고 싶다면 map( ) 사용할 것을 권장

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

// forEach 함수 사용
arr.forEach((num, index) => {
  return (arr[index] = num * 2);
});
// arr = [2, 4, 6, 8, 10] 


// map 함수 사용
let double = arr.map(num => {
  return num * 2;
});
// doubled = [2, 4, 6, 8, 10]

// Example of forEach()
const arr = [1, 2, 3, 4, 5];
const mulArr = [];

arr.forEach(num => {
  mulArr.push(num * 3);
});
// ❗  .forEach()는 결과로 array를 가지기 위해서 push를 통해 배열을 만들어줘야함

console.log(mulArr); // [3, 6, 9, 12, 15]

// Example of map()
const arr = [1, 2, 3, 4, 5];
const mulArr = arr.map(num => num * 3);

console.log(mulArr); // [3, 6, 9, 12, 15]

✅ 그 외 메소드

👉 find()

배열에서 하나의 요소를 선택할 때 사용한다. 이 메소드는 특정한 조건을 확인하는 함수를 인자로 받아, 조건을 만족하는 맨 처음 요소를 반환한다.
따라서, 인자에 넘겨지는 함수는 true 혹은 false 를 반환하여야 한다.

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function isCherries(fruit) { 
  return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries)); 
// { name: 'cherries', quantity: 5 }

👉 filter()

배열에서 특정조건에 해당하는 여러 요소를 선택할때 사용한다. find 메소드와 동일하게 boolean 값을 반환하는 함수를 인자로 받는다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); 
// expected output: Array ["exuberant", "destruction", "present"]

👉 reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.
리듀서 함수는 네 개의 인자를 가진다.

• 누산기accumulator (acc) : 콜백의 반환값을 누적
• 현재 값 (cur) : 처리할 현재 요소
• 현재 인덱스 (idx)
• 원본 배열 (src)

let total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
);
// ❗ 0은 초기값 설정. 초기값을 표기해주지 않으면 index 1 부터 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뛴다.

// 예시(1)
const arr1 = [ 1, 2, 3, 4, 5 ];
arr1.reduce((a, b) => a + b); // 15

// 예시(2)
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(array1.reduce(reducer));
// 10 출력 (1 + 2 + 3 + 4)

console.log(array1.reduce(reducer, 5));
// 15 출력 (5 + 1 + 2 + 3 + 4)

✨ 요약
1. 반환값 없이 각 요소 값에 대해서 일련의 action을 취하려면 forEach
2. 새로운 배열을 생성하려면 map
3. 하나의 결과 값을 반환하려면 reduce
4. 하나의 요소를 선택하려면, find
5. 특정 조건을 만족하는 여러개의 요소를 선택하려면 filter