array method
array function은 callback 함수로 가장 많이 활용할 수 있다.
callback 함수란, 함수에 인자로 전달되는 함수, 즉 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 이는 필요에 따라 즉시 실행할 수도, 나중에 실행할 수도 있다.
이 포스트에서는 array의 반복문으로 사용되며 배열 관련 작업을 할 때 많이 쓰이는 Array.map()과 Array.forEach()를 살펴볼 것이다.
1. Array.map()
map 메서드는 배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 수정하고 그 결과를 보아 새로운 배열로 반환한다.
//ES6
const arr = [1, 2, 3];
const squares = arr.map(num => num * num)
//ES5
const squares = arr.map(function (num) {
return num * num;
});
console.log(arr) // [1, 2, 3]
console.log(squres) // [1, 4, 9]Array 타입의 데이터를 요소 갯수만큼 반복하고, 반복할 때마다 실행할 함수를 parameter로 전달한다. 그러면 이 callback 함수에서 array의 요소를 (num)로 받는다.
해당 요소를 수정하고 싶은대로 callback 함수를 구현하고 return 하면, 해당 index의 요소가 return된 값으로 치환되어 새로운 배열로 반환된다.
2. Array.forEach()
forEach는 배열의 각각의 요소에 대해 함수를 호출한다. 배열의 모든 요소를 각각 순회하며 callback 함수에 인자로 전달하며 반복 호출하는 배열 메서드이다.
map은 호출 후 반환까지 하는 메서드라면 forEach는 함수를 호출할 뿐, 새로운 배열을 반환하지는 않는다.
forEach 메서드를 활용하여 1번의 map 메서드를 활요한 예시와 동일한 결과를 얻기 위해서는 아래와 같이 할 수 있다.
const arr = [1, 2, 3];
const squares = [];
arr.forEach(num => {
squares.push(num * num);
});forEach 메서드는 주어진 callback 함수를 배열에 있는 모든 요소 각각에 대해 오름차순으로 실행하기 때문에 callback 함수를 실행하는 중간에 반복을 탈출할 수 없다. 따라서 실행을 중간에 멈춰야한다면 forEach는 적절하지 않을 수 있다. 대신 for 반복문, every, some과 같은 메서드를 활용해 조기에 반복을 종료할 수 있다.
Assignment
두 문제 모두 map 메서드와 arrow function을 사용해주세요.
1. checkNums 함수를 구현해 주세요.
숫자로 구성된 배열을 인자로 받습니다.
100 보다 크거나 같으면 true,
100 보다 작으면 false 로 요소를 변경하여 새로운 배열을 반환해주세요.
예를 들어,
인자가 [100, 9, 30, 7] 이라면,
반환값은 [true, false, false, false]
내가 처음 작성한 코드는 아래와 같다.
const checkNums = nums => {
let check = nums.map(x => {
if (x >= 100) {
return true
} else {
return false
}
})
return check
}
위 코드를 작성할 때 꽤나 애먹었던 부분 중 하나는 (x => { ... }) 부분이었다.
과제에서 요구하는 arrow function을 사용하려면 =>를 어디엔가 써야할텐데 어디에 적어야할지, 어떤 인자를 사용해야하는지, 소괄호로 감싸야하는지, 중괄호로 감싸야하는지 아직 개념이 제대로 잡히지 않아 깜빡이는 커서만을 바라보며 고민하다 구글링을 하여 문제를 풀게 되었다.
MDN Array.prototype.map()에 방문하여 보니 이러한 예가 쓰여있었다.
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
여기에서 힌트를 얻어 코드를 작성하였다.
일단 (x => ...)를 보고 배열의 인자를 x로 표현한다는 것을 알게 되어 x를 사용하였고, if문을 사용해야할 것 같아 if문 전에 중괄호를 먼저 써보고, 이후 내가 자주 썼던 if문을 그대로 써서 과제를 풀었다.
쓰고 나니 뭔가 코드가 복잡해보이는 기분이 들어... if문 축약형을 찾아보았고, condition ? expr1 : expr2을 활용하여 코드에 적용했다. 이를 적용한 코드는 아래와 같다.
const checkNums = nums => {
let check = nums.map(x => {
return (x >= 100) ? true : false
})
return check
}훨씬 간단하고 보기 좋아서 앞으로도 자주 사용할 것 같다!
- condition: 조건을 나타내는 표현식(true, false로 나타낼 수 있는 표현식)
- expr1: 참일 때 반환되는 표현식
- expr2: 거짓일 때 반환되는 표현식
(22/11/16 추가)
위 문제를 다시 풀어본 후의 코드를 추가해본다.
const checkNums = nums => {
return nums.map(x => x>= 100)
}2. 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일']입니다.
일단 새로운 배열을 반환해야하니 return을, 과제에서 map과 arrow function을 사용하길 원하니 dates.map(x => 까지 적은 후 고민해보았다. '-'가 공통으로 들어가니 split() 메서드를 사용하여 문자열을 나누어야겠다고 생각했고, 바로 전 포스트에서 작성한 back tick과 ${}를 사용해야겠다고 생각했다. 이를 토대로 작성한 코드는 다음과 같다.
const formatDate = dates => {
return dates.map(x => `${x.split('-')[0]}년 ${x.split('-')[1]}월 ${x.split('-')[2]}일`)
}Array method는 정말 많다. 한번 보고 이해했다고 넘겼다가는 며칠 뒤, 아니, 당장 다음날 다른 문제를 풀 때 다시 고난에 빠진다... 이 포스트를 다시 보게 될 때마다 MDN Array에 들어가서 한번씩 복기하여야겠다.
