JavaScript - array methods

arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때이다.

callback 함수란, 인자로 전달되는 함수라고 생각하면 된다.

arrow function에 array의 반복문으로 사용되는 map, forEach 메서드는 정말 많이 쓰이는 메서드이다.

 

---

Array.map()

 

map 메서드는 배열을 반복해주는데, callback 함수에서 return 한 값으로 매(each) 요소를 수정해준다.

map 메서드의 return값은 수정된 값으로 다시 생성된 배열이다.

 

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

 

두번째 줄에서 map함수에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같다.

 

const squares = arr.map(function (x) { 
  return x * x;
});

 

Array 타입의 데이터를 요소 개수만큼 반복한다. 반복할 때마다 실행할 함수를 parameter로 전달한다. 그러면 이 callback 함수에서 array의 요소를 인자(x)로 받는다. 해당 요소를 수정하고 싶은 대로 로직을 구현하고 return 해주면, 해당 index의 요소가 return 된 값으로 치환된다. 

 

---

Array.forEach()

 

forEach는 for 대신 사용하는 반복문이다. map과의 큰 차이는 forEach함수 자체가 return하는 것도 아무것도 없다는 것이다.

그냥 forEach함수를 탈출하고 싶을 때 return을 사용하면 된다.

map은 요소가 수정한 새로운 배열이 return 되었다면, forEach는 아무것도 return하는 것이 없다.

그래서 forEach로 전달되는 callback 함수에서도 return하는 것이 없다. forEach는 단지 for문 대신 사용하는 반복 method이다.

 

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

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

 

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

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

 

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

만약 forEach에서 현재 index를 알고 싶으면 두 번째 인자로 받을 수 있다.

 

let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];

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