JavaScript - array methods

HYUK·2022년 12월 30일
0

1. Array.map()

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 된 값으로 치환되어 새로운 배열로 반환됩니다.

2. Array.forEach( )

forEach는 배열의 모든 요소를 순회하면서 요소 각각을 callback 함수에 인자로 전달하며 반복 호출하는 배열 메서드입니다.
map과의 큰 차이는 새로운 배열을 return(반환)하지 않는다는 점입니다.

forEach 메서드를 활용해 위 map 메서드를 활용한 예시와 동일한 결과를 얻으려면 다음과 같이 할 수 있습니다.

 const arr = [1, 2, 3];
 const squares = []; 
 // forEach는 새로운 배열을 반환하지 않는다 그래서 빈 배열에 담아주기 위해 새로운 빈배열 변수를 만듬
 
 arr.foreach(num => {
 	squares.push(num * num); 
 })
 
 console.log(squares)

Assignment

두 문제 모두 map 메서드와 arrow function을 사용해주세요.

  1. checkNums 함수를 구현해 주세요.
  • 숫자로 구성된 배열을 인자로 받습니다.

  • 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]
// 해당 배열의 요소마다 수정한 결과를 모아 새로운 배열로 반환
  1. formatDate 함수를 구현해 주세요.
  • 날짜가 담긴 배열을 인자로 받습니다.

  • 날짜의 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일']
profile
step by step

0개의 댓글