TIL.22 Array methods

Array method

배열 메서드는 callback함수로 사용할때 가장 많이 사용된다.

Callback 함수란

• 콜백함수는 파라미터로 함수를 전달하는 함수이다. 그리고 전달받은 그 함수를 함수의 내부에서 실행시킨다.
• 콜백함수는 전달 받은 즉시 바로 실행이 될 필요가 없고, 함수 내부의 어느 특정시점에 실행한다.

Array method 종류

1. Arr.forEach(callback, thisArg)

• for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다.

const arr = [0,1,2,3,4,5];
arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

2. Arr.map(callback, thisArg)

• map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행한다.
• 다만, callback에서 return 되는 값을 배열로 만들어낸다.

const arr = [0,1,2,3];
let squaredArr = arr.map(function(element){
    return element * element;
});
// 혹은 arrow 함수 가능
squaredArr = arr.map(element => element * element);
console.log(squaredArr); // [ 0, 1, 4, 9 ]

3. map()과 forEach() 차이점!!!

map()과 forEach()는 공통적으로
아래의 세 개의 인자로 호출된다.
1. currentValue (배열 원소의 값)
2. index (현재 요소의 인덱스)
3. array (현재 배열)

• 위에서 잠깐 언급했듯이, forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하지만 새로운 배열을 만들거나 값을 리턴하지 않는다.
• 하지만, 호출하는 배열을 변경할 수는 있다.
• 이와 달리, map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.

//forEach//
let arr = [1, 2, 3, 4, 5];
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]

정리

• forEach()으로 할 수 있는 것은 map()으로도 가능하고 그 반대도 가능하다.
• map()은 메모리를 할당하고 리턴 값을 저장한다. forEach()는 리턴 값을 버리고 항상 undefined를 리턴한다.
• forEach()는 콜백함수로 현재 Array를 변환할 수 있다. 대신에 map()은 새로운 Array를 리턴한다.