map 메서드는 배열을 반복해주는데, callback 함수에서 return한 값으로 매(each) 요소를 수정한 결과를 모아 새로운 배열로 return(반환) 합니다.
const arr = [1, 2, 3];
const squares = arr.map(num => num * num);
// map 메서드에 인자로 넘어간 함수를 ES5 문법으로 표현하면 아래와 같다.
const squares = arr.map(function(num){
return num * num;
})
Array 타입의 데이터를 요소 갯수만큼 반복합니다.
반복할 때마다 실행할 함수를 parameter로 전달합니다.
그러면 이 callback 함수에서 array의 요소를 인자(num)로 받습니다.
해당 요소를 수정하고 싶은대로 callback 함수를 구현하고 return해주면, 해당 index의 요소가 return 된 값으로 치환되어 새로운 배열로 반환됩니다.
forEach는 배열의 모든 요소를 순회하면서 요소 각각을 callback 함수에 인자로 전달하며 반복 호출하는 배열 메서드입니다.
map과의 큰 차이는 새로운 배열을 return(반환)하지 않는다는 점입니다.
forEach 메서드를 활용해 위 map 메서드를 활용한 예시와 동일한 결과를 얻으려면 다음과 같이 할 수 있습니다.
const arr = [1, 2, 3];
const squares = [];
// forEach는 새로운 배열을 반환하지 않는다 그래서 빈 배열에 담아주기 위해 새로운 빈배열 변수를 만듬
arr.foreach(num => {
squares.push(num * num);
})
console.log(squares)
숫자로 구성된 배열을 인자로 받습니다.
100 보다 크거나 같으면 true,
100 보다 작으면 false 로 요소를 변경하여 새로운 배열을 반환해주세요. 예를 들어,
// 인자가
[100, 9, 30, 7]
// 이라면,
// 반환값은
[true, false, false, false]
정답 :
const checkNums = (num) => {
return num.map(num => num >=100)
// arrow function을 사용하여 callback 함수를 사용, callback함수란 함수에 인자로 전달되는 함수
}
console.log(checkNums([100, 9, 30, 7]))
// [true, false, false, false]
// 해당 배열의 요소마다 수정한 결과를 모아 새로운 배열로 반환
날짜가 담긴 배열을 인자로 받습니다.
날짜의 data type은 string이며, 보내는 날짜 타입은 'YYYY-MM-DD' 입니다.
해당 날짜의 형식을 'YYYY년 MM월 DD일' 로 바꿔서, 새로운 배열을 반환해주세요.
예를 들어,
// 인자가
['2022-03-21', '2022-04-21', '2022-05-21']
// 이라면
// 반환값은
['2022년 03월 21일', '2022년 04월 21일', '2022년 05월 21일']
// 입니다.
정답 :
const formatDate = (date) => {
date.map(date => {
const newDate = date.split('-');
// split을 하게되면 나눠지는 시점(-)부터 배열의 인덱스가정햐지며, split은 string값을 배열로 나눠줄때만 쓸 수 있다.
})
return dateArr[0]+'년 ' + dateArr[1]+'월 ' + dateArr[2]+'일'
}
console.log(formatDate(['2022-03-21', '2022-04-21', '2022-05-21']))
//['2022년 03월 21일', '2022년 04월 21일', 2022년 05월 21일']