Array Function

🚂 Array Function

기존 ES5에서는 배열을 컨트롤할 때 for문이나 each문 등 반복문 안에서 index값을 가지고 배열 내 요소들에 대한 작업을 하곤 했다. ES6+에서는 배열을 컨트롤하는 다양한 함수들을 제공해주기 때문에 반복문을 사용하지 않고도 배열로 원하는 값을 리턴 받는 등의 작업을 쉽게 처리할 수 있다.

🔭 find

find는 이름 그대로 배열에서 조건에 맞는 요소 중 첫번째 요소를 리턴하는 메서드이다.

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. MDN document

현재 요소, 현재 요소의 인덱스, 현재 배열을 파라미터로 전달받는다.

const emails = ['aaa@abc.com', 'helloworld@gmail.com', 'astrogrammer@example.io', 'helloworld@example.io', 'hye.on@abc.com'];

아래에서 쭉 사용할 이메일 배열을 만들었다.

// find
const findMail = emails.find((element, index, currentArray) => element.includes('@abc.com'));
const findWithLength = emails.find((element, index, currentArray) => element.length > 20);

console.log(findMail); // aaa@abc.com
console.log(findWithLength); // astrogrammer@example.io

findMail은 @abc.com을 포함하는 첫번째 값인 aaa@abc.com을 리턴하고, findWithLength는 길이가 20이 넘는 첫 번째 값인 astrogrammer@example.io를 리턴한다.
이때 중요한 점은 조건에 부합하는 모든 요소가 아닌 최초의 값만 가져온다는 점이다.

🤔 그럼 조건에 맞는 모든 값을 가져오고 싶다면 어떻게 해야할까?

🧹 filter

filter는 find와 비슷하게 배열에서 조건에 맞는 요소를 찾지만 첫 번째 요소만 리턴하지 않고 조건에 맞는 요소 전체를 배열로 리턴한다.

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. MDN document

마찬가지로 현재 요소, 현재 요소의 인덱스, 현재 배열을 파라미터로 전달받는다.

const findAllMail = emails.filter(
    (element, index, currentArray) => element.includes('@abc.com')
);
const findAllWithLength = emails.filter(
    (element, index, currentArray) => element.length > 20
);

console.log(findAllMail); // ['aaa@abc.com', 'hye.on@abc.com']
console.log(findAllWithLength); // ['astrogrammer@example.io', 'helloworld@example.io']

findAllMail에는 @abc.com을 포함하는 이메일 주소인 aaa@abc.com과 hye.on@abc.com을 배열로 리턴했고, findAllWithLength는 길이가 20이 넘는 모든 이메일 주소들을 배열로 리턴했다.

🗺 map

map은 filter와 비슷하면서도 다른 메서드이다. 둘의 가장 큰 차이는 arrow function의 body 부분이다. filter는 조건에 맞는 요소를 리턴하기 때문에 위에서 사용한 String.includes()나 element.length > 20과 같은 (callback) 안에 조건문이나 boolean을 리턴하는 메서드를 사용하곤 한다.
하지만
map은 특정 규칙이나 로직을 적용하여 변경된 값을 새로운 배열로 리턴해주기 때문에 (callback)안에 element.lenght나 element * 2와 같이 어떤 연산이나 작업을 수행하는 문장이 올 수 있다. 또, map은 원본 배열과 1:1이므로 원본 배열의 길이가 4이면 작업이 수행된 후 리턴되는 배열의 길이 또한 4이다.

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. MDN document

const usernames = emails.map(
    (element, index, currentArray) => element.split('@')[0]
); // @를 기준으로 string을 분리해 index 0인 것만 리턴
console.log(usernames); // ['aaa', 'helloworld', 'astrogrammer', 'helloworld', 'hye.on']

const usernamesWithIdx = emails.map(
    (element, index, currentArray) => ({name: element.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); // 2를 곱하기
console.log(twiceNumbers); // [2, 4, 6, 8, 10]

map은 위와 같이 원본 배열에 일정한 로직이나 규칙을 적용시켜 일괄적으로 변경한 배열을 손쉽게 리턴 받을 수 있다. 만약, map함수를 쓰지 않고 usernames를 얻고자 한다면 아래와 같이 코드를 작성해야 한다.

let usernames = [];
emails.forEach((element, index, currentArray) => {
    usernames.push(element.split('@')[0]);
});

🙋‍♀️ map에서 리턴하는 요소에 조건을 줄 수 있나요?
아래와 같이 작성하면 이메일 주소의 길이가 20보다 긴 것은 이메일 주소를, 아닌 것은 주소의 길이를 리턴하게 된다.

const mapWithIf = emails.map((item) => (item.length > 20 ? item : item.length));

🙋‍♀️ map에서 조건에 해당하는 요소들만 리턴할 수 있나요?
두 가지 Array Function을 함께 사용하면 처리할 수 있다. 아래 코드는 20보다 길이가 긴 메일 주소 앞에 My email is라는 문장을 붙여 리턴한다.

const mapOnlyIf = emails.filter((item) => item.length > 20).map((item) => `My email is ${item}`);

---

원글
Array Functions