[JavaScript] 내가보려고 작성하는 벨로그 13

29. array methods

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

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

arrow function을 조금 더 연습하기 위해 array의 반복문으로 사용되는 map, forEach 메서드를 함께 보겠습니다.

Array.map()
Array.forEach()
정말 많이 쓰이는 메서드 입니다!

---

29-1. Array.map()
map 메서드는 배열을 반복해주는데,

callback 함수에서 return한 값으로 매(each) 요소를 수정해 줍니다.

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

위의 설명이 전부이지만, 더 자세히 예제를 보려면 아래 글에서 더 공부하거나, 공식 문서를 참고해주세요.

👉 JS Map Function

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

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

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

Array 타입의 데이터를 요소 갯수 만큼 반복합니다.

반복할 때마다 실행할 함수를 parameter로 전달합니다.

그러면 이 callback 함수에서 array의 요소를 인자(x)로 받습니다.

해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,

해당 index의 요소가 return 된 값으로 치환됩니다.

---

29-2. 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 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;
  }
});
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;
  }
});