arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 입니다.
callback 함수란, 인자로 전달되는 함수라고 생각하시면 됩니다.
arrow function을 조금 더 연습하기 위해 array의 반복문으로 사용되는 map
, forEach
메서드를 함께 보겠습니다.
Array.map()
Array.forEach()
정말 많이 쓰이는 메서드 입니다!
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 된 값으로 치환됩니다.
왼쪽 코드 창에서 map 함수를 다양하게 테스트해봐주세요.
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;
}
});
왼쪽에 직접 작성해서 보고 계신거 맞겠죠?!!!
두 문제 모두
map
메서드와 arrow function을 사용해주세요.
숫자로 구성된 배열을 인자로 받습니다.
100 보다 크거나 같으면, true
를
100 보다 작으면 false
로 요소를 변경하여, 새로운 배열을 return 해주세요.
예를 들어,
nums(input)가
[100, 9, 30, 7]
이라면
return은
[true, false, false, false]
날짜가 담긴 배열을 인자로 받습니다.
날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 return 해주세요.
예를 들어,
dates(input)가
['2019-03-21', '2019-04-21', '2019-05-21']
이라면
return은
['2019년 03월 21일', '2019년 04월 21일', '2019년 05월 21일']