[JS] 실무에서 꼭 필요한 Array 메서드

안녕하세요! aloveu입니다.

 

오늘은 이것만 알아도 데이터 바인딩 50%는 먹고 간다고 말할 수 있는 Array 메서드들에 대해서 공부해 볼 겁니다. 

게시판, 상품, 방명록이나 댓글 같은 리스트 형식의 API를 받다 보면 내가 원하는 형태로 가공하고 화면에 뿌릴 줄 알아야 합니다.

그때 쓸 수 있는 그래도 실무에서 자주 쓸만한 메서드들만 정리해 봤습니다.

---

| 목차

• map()
• filter()
• find()
• every()
• some()
• reduce()
• sort()

| map()

맵 메서드는 배열의 모든 요소에 대해 어떤 값을 적용시켜 새로운 배열을 만들 때 씁니다.

arr.map(function(currentValue, index, arr), thisValue)

• currentValue : 현재 처리 중인 요소의 값
• index : 현재 처리중인 요소의 인덱스
• arr : 호출된 map() 매머드의 배열
• thisValue : function 내에서 this로 사용될 값 (선택적)

예를 들어 상품 목록을 받아서 상품 제목만 있는 데이터를 뽑고 싶을 때

const products = [
    {name: '반바지', price: 20000, ...},
    {name: '반팔', price: 10000, ...},
    {name: '긴팔', price: 20000, ...},
    {name: '청바지', price: 30000, ...}
];

const productName = products.map((product) => product.name);

console.log(productName);	// ['반바지', '반팔', '긴팔', '청바지']

 

이런식로 새로운 배열을 만들어 낼 수 있습니다. 

 

| filter()

필터는 말 그대로 원하는 조건에 맞는 데이터를 뽑고 싶을 때 사용합니다.

arr.filter(function(currentValue, index, arr), thisValue)

 

각 인자들에 대한 설명은 이후부터 따로 하지 않겠습니다. 위에 map에서 설명한 것과 거의 동일하거든요.

이전에 깊은 복사, 얕은 복사를 배웠죠?! filter는 기존 배열의 얕은 복사본을 생성합니다. 
같은 메모리를 참조하므로 필터가 된 데이터를 수정하면 원본 데이터도 수정이 돼요. 

 

위의 map 예제에서 쉽게 설명을 해 보자면 내 상품중에 고객이 3만 원보다 비싼 상품을 검색했다고 합시다.

const products = [
    {name: '반바지', price: 20000, ...},
    {name: '반팔', price: 10000, ...},
    {name: '긴팔', price: 20000, ...},
    {name: '청바지', price: 30000, ...}
];

const expensiveProduct = products.filter((product) => product.price >= 30000);

console.log(expensiveProduct);	// [{name: '청바지', price: 30000, ...}]

 

그럴 때는 기존 데이터에서 filter 메서드를 사용해서 3만 원 이상의 상품만 필터링해서 보여줄 수 있어요.

 

| find()

find는 내가 제공한 함수의 조건을 만족한 첫 번째 요소를 반환해줍니다. 

arr.find(function(currentValue, index, arr), thisValue)

 

예를 들어 가격이 20000원인 상품 하나를 찾고 싶을 때 쓰면 됩니다.

const product = products.find((product) => product.price === 20000);

console.log(product);	// {name: '반바지', price: 20000, ...}

 

| every()

every 메서드는 배열의 모든 요소가 내가 제시한 조건에 맞는지 체크할 때 씁니다. 

모두 통과면 true, 하나라도 조건에 맞지 않으면 false를 반환합니다.

모두 맞아???라는 걸로 생각하시면 됩니다.

arr.every(function(currentValue, index, arr), thisValue)

 

이번엔 좀 다른 조건으로 예시를 들어봅시다.  예를 들어 아이언맨 상영하는데 좌석에 사람들이 모두 앉아 있다면 매진으로 표시를 하고 싶습니다.

const ironMan = [
    {name: '1A', seated: true, ...},
    {name: '2A', seated: true, ...},
    {name: '3A', seated: true, ...},
    ...
    {name: '16G', seated: true, ...}
];

const isSoldout = ironMan.every((seat) => seat.seated);

console.log(isSoldout);	// true

 

seated가 모두 true인지만 체크하면 매진인지 알 수 있습니다. 

 

| some()

some 메서드는 every와 반대되는 개념입니다. 배열의 요소 중에 하나라도 조건에 맞으면 true, 맞는 게 하나도 없다면 false를 반환합니다.

하나라도 맞아???로 생각하시면 됩니다.

arr.some(function(currentValue, index, arr), thisValue)

 

어떨 때 많이 쓸까요? 아까 영화 좌석을 예시로 했던 걸 또 예를 들면 자리가 비어있는지 체크를 할 때 쓰면 됩니다. 

그러면 every를 쓰고 !isSoldout 으로 쓰면 똑같지 않느냐?? 하시는데 네 맞습니다.

하지만 코드를 짜다 보면 한눈에 읽히는 코드가 좋은 코드니 상황에 맞는 메서드를 사용하시는 게 좋습니다.

const isPossibleTicketing = ironMan.some((seat) => !seat.seated);

console.log(isPossibleTicketing);	// false

 

| reduce()

리듀스는 배열 요소를 하나씩 처리하면서 누적된 결과를 반환합니다.

그래서 보통 총가격의 합을 구할 때 많이 사용하죠.

arr.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)

• accumulator : 콜백 함수의 이전 반환값
• currentValue : 현재 요소의 값
• currentIndex : 현재 요소의 인덱스 (선택적)
• array : reduce 메서드가 호출된 배열 (선택적)
• initialValue : accumulator의 초기값 (선택적)

예를 들면 장바구니에서 결제를 하려고 체크를 한 상품의 총액을 구하고 싶을 때 사용합니다.

const cart = [
    { product: '반바지', price: 23000, isChecked: true, ...},
    { product: '청바지', price: 30000, isChecked: false, ...},
    { product: '반팔티', price: 10000, isChecked: true, ...},
];

const totalPrice = cart.reduce((acc, curr)=>{
    return curr.isChecked ? acc + curr.price : acc;
}, 0);

console.log(totalPrice);	// 33000

 

| sort()

소트는 말 그대로 정렬입니다. 정렬 순서는 기본적으로 문자열 유니코드 순서를 따르지만 사용자 정의 비교함수를 전달할 수 있습니다.

arr.sort(compareFunction)

 

보통 사용자 정의 함수는 

• 양수반환을 하면 내림차순이 됩니다. 그래서 보통 내림차순은 b - a를 리턴합니다.
• 음수반환을 하면 오름차순이 됩니다. a - b는 오름차순이 됩니다.

소트는 내용이 너무 많아 따로 포스팅하기로 하고 여기서는 기본적인 것만 예시로 들겠습니다.

// 숫자 배열 정렬하기
const numbers = [5, 2, 9, 1, 7];
numbers.sort(function(a, b) {
  return a - b; // 오름차순 정렬
});
console.log(numbers); // [1, 2, 5, 7, 9]

// 문자열 배열 정렬하기
const names = ['Alice', 'Bob', 'Charlie', 'David'];
names.sort();
console.log(names); // ['Alice', 'Bob', 'Charlie', 'David']

// 객체 배열 정렬하기
const people = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];
people.sort(function(a, b) {
  return a.age - b.age; // 나이 순으로 오름차순 정렬
});
console.log(people);
// [{ name: 'Bob', age: 25 }, { name: 'Alice', age: 30 }, { name: 'Charlie', age: 35 }]

 

| 참고 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array