JS - Array methods

array methods에 대해 알아보고 예제문제를 풀어보기

Array.map()

map메서드는 배열을 반복해주는데 callback 함수에서 return한 값으로 매 요소를 수정해준다.
map메서드의 return 값은 수정된 값으로 다시 생성된 배열이며 원래의 배열은 변화가 없다.

const originalArray = [1,2,3,4,5];

const newArray = originalArray.map(function addOne(number) {
  return number + 1;
});

console.log(originalArray); // [1,2,3,4,5]
console.log(newArray); //[2,3,4,5,6]

arrow function 을 이용하면

const originalArray = [1,2,3,4,5];

const newArray = originalArray.map(number => number + 1);

console.log(originalArray); //[1,2,3,4,5]
console.log(newArray); //[2,3,4,5,6]

< 예제 >

const originalArray = [1, 2, undefined, 3];

const newArray = originalArray.filter(value => {
  return Number.isInteger(value);
}).map(value => {
  return value * 2;
});

console.log(newArray); //[2,4,6]

이는 주어진 값이 정수이면 그 값에다가 2를 곱해서 반환하는 코드이다.
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

예를들어,

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

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

console.log(result);

배열 내 문자열의 길이가 6보다 큰 문자열을 반환하는 코드이다.

ForEach

forEach가 map과 차이가 나는 것은 return 하는게 아무것도 없다는 것이다.
forEach는 함수를 탈출하고 싶을 때 return을 사용한다.

let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});

console.log(startWithNames); //['a','ab','ada']

이 코드는 배열에서 'a' 로 시작하는 문자열이 있다면 이를 startWithNames 라는 빈 배열에 넣어서 startWithNames을 반환하는 것이다.

forEach도 함수 이므로, 중간에 반복문을 탈출하고 싶으면 return;을 해주면 된다.

let hasC = false;
let arr = ['a', 'b', 'c', 'd'];

arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return;
  }
});

console.log(hasC); //true

여기서는 배열 안에서 'c' 가 있다면 true를 반환하는 코드이다.

Reduce

또 다른 map과 비슷한 방법으로는 Reduce Method가 있다.

기본형태
arr.reduce(callback[, initialValue])

만약 reduce() 함수 호출에서
initialValue 를 제공한 경우, accumulator는 initialValue 와 같고 currentValue는 배열의 첫 번째 값과 같다.
initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentvalue는 두 번째와 같다.

initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뛴다. initialValue를 제공하면 인덱스 0에서 시작한다.

const originalArray = [1,2,3,4,5];
const newArray = originalArray.reduce((accumulator, value, index) => {
  accumulator[index] = value *2;
  return accumulator;
},[]);

console.log(newArray); //[2,4,6,8,10]

배열을 새로운 객체로 변경할 때는 map대신 reduce를 사용해야한다.

const myArray = ['a','b','c','d'];

const myObject = myArray.reduce((accumulator, value) => {
  accumulator[value] = true;
}, {});

console.log(myObject); // {a : true, b: true, c: true, d:true}

< 예제 >

let plus = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
},10);

console.log(plus)

reduce()의 두 번째 인수로 초기값을 제공하는 경우에는
reduce()가 결과로 반환하는 값은 20이다.

1번째 호출:
accumulator = 10 , currentValue = 0, 반환값 = 10
2번째 호출:
accumulator = 10, currentValue = 1, 반환값 = 11
3번째 호출:
accumulator = 11, currentValue = 2, 반환값 = 13
...

< 예제2 >

let sum = [0,1,2,3].reduce(function (accumulator, currentValue){
  return accumulator + currentValue;
},0);
//sum is 6

화살표 함수로 작성할 때

let total = [0,1,2,3].reduce(
  (accumulator, currentValue) => accumulator + currentValue,0
  );

배열 안의 모든 값을 합산하는 코드이다.

참고자료 출처:
https://www.robinwieruch.de/javascript-map-array https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce