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); // 2,4,9
두번째 줄에서 map 메서드에 인자로 넘어간 함수를 원래대로 표현하면 아래와 같습니다.
const squares = arr.map(function (x) { return x * x; });
Array 타입의 데이터를 요소 갯수 만큼 반복합니다.
반복할 때마다 실행할 함수를 parameter로 전달합니다.
그러면 이 callback 함수에서 array의 요소를 인자(x)로 받습니다.
해당 요소를 수정하고 싶은대로 로직을 구현하고 return해주면,
해당 index의 요소가 return 된 값으로 치환됩니다.
📌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); } }); //'a', 'ab', 'ada'
let hasC = false; let arr = ['a', 'b', 'c', 'd']; arr.forEach(el => { if (el === 'c') { hasC = true; return; } }); console.log(hasC) //true
forEach
도 함수 이므로, 중간에 반복문을 탈출하고 싶으면 return;
을 해주면 됩니다.
만약 forEach
에서 현재 index
를 알고 싶으면 두 번째 인자로 받을 수 있습니다.
let idxOfC = -1; let arr = ['a', 'b', 'c', 'd']; arr.forEach((el, idx) => { if (el === 'c') { idxOfC = idx; return; } }); // 2
🔹 두 문제 모두 map
메서드와 arrow function
을 사용해주세요.
nums(input)가 [100, 9, 30, 7] 이라면 return은 [true, false, false, false]
2. formatDate 함수를 구현해 주세요.
• 날짜가 담긴 배열을 인자로 받습니다.
• 날짜의 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일']
📖1번 문제
const moreThan100 = nums => { let arr = nums.map( i => { if (i < 100) { return false; } return true; } ) return arr; } moreThan100([100, 9, 30, 7]);
📖2번 문제
const formatDate = dates => { let str = dates.map(function(arr){ let date = arr.split('-'); console.log(`${date[0]}년 ${date[1]}월 ${date[2]}일` ) return `${date[0]}년 ${date[1]}월 ${date[2]}일`; } ) return str; } formatDate(['2019-03-21', '2019-04-21', '2019-05-21']);