TIL27.array methods

다양한 배열 메소드를 사용해보고, 차이점을 알아보자.

array methods

자바스크립트에는 유용한 어레이 메소드가 존재하고, 기존의 반복문을 통해서 만들어지는 많의 양의 코드를 어레이 메소드를 통해서 좀 더 직관적이게 만들 수 있다. 콜백함수를 통해 각 요소에 대한 정보를 전달해준다.
가장 많이 사용되는 대표적인 것들로는 Array.map()/Array.forEach()/Array.filter()가 있다.

array.map()

• array.map(function(currentValue, index, arr), thisValue)
  -모든 array요소가 제공된 함수로 호출될 때 새로운 array를 생성한다. foreach()와 다른 점은 값을 사용하고 array와 동일한 길이의 새로운 배열을 반환한다.

  const arr = [1, 2, 3, 4, 5];
  //forEach
  arr.forEach((num, index) => {
   return (arr[index] = num * 2);
  });
  arr // [ 2, 4, 6, 8, 10 ]

//map
const times = arr.map(num => {
return num * 2;
});
times // [ 2, 4, 6, 8, 10 ]

#### array.forEach()
- arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
- 아무것도 리턴하지않고 배열 요소를 제공된 함수로 한 번 실행한다. 
- forEach는 for 대신 사용하는 가장 기본적인 반복문메소드이다. forEach의 콜백 함수의 첫번째 인자로 각 요소의 값이 사용하기때문에 for문(arr[i])과 비교하면 깔끔한 방법으로 각 요소를 값을 얻을 수 있다.

let sum = 0;
const numbers = [10, 20, 30, 40];
numbers.forEach(myFunction);

function myFunction(item) {
sum += item;
return sum;
}
sum // 100

//현재 인덱스를 알고 싶다면, 두 번째 인자로 받을 수 있다.
let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach((el, idx) => {
if (el === 'c') {
idxOfC = idx;
return;
}
});

idxOfC // 2

#### map과 forEach 비교하기
- 속도면에서 map()이 빠르다.
- forEach는 기존의 배열을 변경하고, map은 기존의 배열을 변경하지않고, 새로운 배열을 반환한다.
즉, forEach는 자기자신을 바꾸고, map은 자기자신은 바꾸지 않고 새로운 객체를 반환한다고 생각하자.
- forEach는 DB에 저장하거나 로그아웃하는 등의 작업에 적합하고, map()은 데이터를 변경할 때 사용될 수 있다. 
- 다른 메소들을 함께 사용할 때는 forEach보다는 map을 사용하는 것이 더 적절하다.

let const = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);

// arr2 = [6, 8, 10]

#### filter()
- array.filter(function(currentValue, index, arr), thisValue)
-배열 안의 요소들을 걸러낼 때 사용한다.
-콜백함수는 '불린값'을 리턴하고, true요소들만 모아서 새로운 배열을 만든다. 생략한다면 리턴은 undefined이므로 false가 리턴된다. 만족하는 요소가 없을경우, 빈 배열이 반환된다.

const ages = [15, 40 , 59];
const checkAdult = ages.filter(age => age >= 18);

console.log(checkAdult) // [40, 59]

//빈배열 리턴
const ages = [15, 40 , 59];
const checkAdult = ages.filter(age => age >= 60);

console.log(checkAdult) // []