이번 포스팅에서는 여러가지 다양한 Array Function들을 간단하게 정리해봅니다 🏃♀️
기존 ES5에서는 배열을 컨트롤할 때 for문이나 each문 등 반목문 안에서 index값을 가지고 처리하곤 했죠. ES6+에서는 배열을 컨트롤하는 다양한 함수들을 제공해주기 때문에 반목문을 사용하지 않고도 배열로 원하는 값을 리턴받는 등의 작업을 쉽게 할 수 있습니다.
1. find
find는 이름 그래도 배열에서 조건에 맞는 요소 중 첫번째 요소를 리턴하는 메서드입니다.
find()메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면undefined를 반환합니다.
MDN document
코드로 확인해봅시다! ⌨️
const email = ['aaa@abc.com', 'helloworld@gmail.com', 'astrogrammer@velog.io', 'helloworld@velog.io', 'hye.on@abc.com'];우선 아래 예제에서도 쓰일 다섯 개의 이메일을 담고 있는 배열을 만들었습니다.
// find
const foundMail = email.find((element, index, currentArray) => element.includes('@abc.com'));
const foudnWithLength = email.find((element, index, currentArray) => element.length > 20)); // 이렇게 조건문을 쓸 수도 있어요
console.log(foundMail); // @abc.com을 포함하는 제일 첫번째 요소인 aaa@abc.com을 리턴합니다find 메서드는 조건에 맞는 모든 값이 아닌 조건에 맞는 최초의 값을 가져옵니다.
🤔 그럼 조건에 맞는 모든 값을 가져오고 싶다면 어떻게 해야하나요?
2. filter
filter는 find와 비슷하게 배열에서 조건에 맞는 요소를 찾지만 첫번째 요소만 리턴하는 것이 아닌 조건에 맞는 요소 전부를 배열로 리턴합니다.
filter()메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
MDN document
이번에도 코드로 확인해볼게요!
// find
const foundAllMail = email.filter(
(element, index, currentArray) => element.includes('@abc.com')
);
const foudnWithLength = email.filter(
(element, index, currentArray) => element.length > 20)
); // 이렇게 조건문을 쓸 수도 있어요
console.log(foundMail); // ['aaa@abc.com', 'hye.on@abc.com']
// @abc.com을 포함하는 모든 요소를 배열에 담아 리턴합니다
3. map
filter와 비슷하면서도 다른 map도 한 번 살펴볼게요!
filter와 map의 가장 큰 차이는 arrow function의 body라고 볼 수 있을 것 같습니다.
filter는 조건에 맞는 요소를 리턴하기 때문에 (callback) 안에 조건이나 boolean을 리턴하는 메서드를 사용하곤 합니다. (예를 들어, 위에서 사용했던 String.includes()나 element.length > 20)
하지만!
map은 특정 규칙이나 로직을 적용하여 변경된 값을 새로운 배열로 리턴해주기 때문에 (callback)안에 element.length나 element * 2와 같은 문장들이 올 수 있습니다. 또, map은 원본 배열과 1:1이므로 배열의 길이가 4이면 똑같이 길이가 4인 배열을 리턴합니다.
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
MDN document
역시 코드로 보는 게 제일 좋겠죠? 👉
const usernames = email.map(
(element, index, currentArray) => item.split('@')[0]
); // @를 기준으로 string을 분리해 index 0인 것만 리턴합니다
console.log(usernames); // ['aaa', 'helloworld', 'astrogrammer', 'hye.on']
const usernamesWithIdx = email.map(
(element, index, currentArray) => ({name: item.split('@')[0], index})
); // 이렇게 {}를 () 로 감싸주면 object array도 리턴할 수 있습니다!
console.log(usernamesWithIdx); // [{name: 'aaa', index: 0}, {name: 'helloworld', index: 1}, {name: 'astrogrammer', index: 2}, {name: 'hye.on', index: 3}]
const numbers = [1, 2, 3, 4, 5];
const twiceNumbers = numbers.map((element, index, currentArray) => element * 2));
console.log(twiceNumbers); // [2, 4, 6, 8, 10]map은 이런 식으로 원본 배열을 일정한 규칙이나 로직을 적용시켜 일괄적으로 변경한 배열을 리턴받을 수 있습니다.
🙋♀️ map에서 리턴하는 요소에 조건을 줄 수 있나요?
// 이런 식으로 조건을 주면 이메일 주소의 길이가 20보다 긴 것은 이메일 주소를, 아닌 것은 주소의 길이를 리턴합니다
const mapWithIf = email.map((item) => (item.length > 20 ? item : item.length));
🙋♀️🙋♀️ map에서 조건에 해당하는 요소들만 리턴할 수 있나요?
// 요렇게 이어서 사용해봅시다!
// filter가 된 배열이 먼저 return되고 그 return된 배열로 map을 순차적으로 실행합니다
const mapWithIf = email.filter((item) => item.length > 20).map((item) => item);참고:
노마드 코더 ES6의 정석
