Array 객체 내장 함수

Introduction

일반적으로 클라이언트에서 서버에 데이터 요청을 하게 되면 요청한 데이터가 목록 형태인 경우 배열 형태로 넘어오게 된다.
그리고 이렇게 배열로 넘어온 데이터를 조작해야 하는 경우가 실무에서 가장 많이 발생하게 되는데, 배열이 가지고 있는 내장 함수에 대해서 정확히 이해하고 있어야 효율적인 코드를 작성할 수 있게 된다.
이번 포스팅에서는 배열이 가지고 있는 내장 함수에 대해서 자세히 알아보자.

push

배열의 끝에 새로운 요소를 추가하고, 배열의 길이를 반환

let brands = ['애플', '구글', '아마존', '마이크로소프트', '메타'];

console.log(brands.push('테슬라')); // 6
console.log(brands); // ['애플', '구글', '아마존', '마이크로소프트', '메타', '테슬라']

pop

배열에서 마지막 요소를 제거를 하고, 그 요소를 반환

let brands = ['애플', '구글', '아마존', '마이크로소프트', '메타'];

console.log(brands.pop()); // 메타
console.log(brands); // ['애플', '구글', '아마존', '마이크로소프트']

unshift

배열의 제일 앞에 요소를 추가하고, 배열의 길이를 반환

let brands = ['애플', '구글', '아마존', '마이크로소프트', '메타'];

console.log(brands.unshift("삼성전자")); // 6
console.log(brands); // ['삼성전자', '애플', '구글', '아마존', '마이크로소프트', '메타']

shift

배열의 첫번째 요소를 제거하고, 그 요소를 반환
이벤트 큐에 차례대로 등록된 작업 목록에서 들어온 순서대로 하나씩 빼면서 작업 처리

let brands = ['애플', '구글', '아마존', '마이크로소프트', '메타'];

console.log(brands.shift()); // 애플
console.log(brands); // ['구글', '아마존', '마이크로소프트', '메타']

join

join은 파라미터로 전달된 문자가 요소 사이사이 마다 삽입이 되어서 하나의 문자열로 결합되는 기능을 한다.
음료리스트를 html에 출력하는 간단한 예제를 살펴보자.

<table>
  <thead>
    <tr>
      <th>음료명</th>
      <th>음료가격</th>
    </tr>
  </thead>
  <tbody id="tbBody">
  </tbody>
</table>

const drinkList = [
  {
    name: '오렌지',
    price: 1000,
  },
  {
    name: '파워레이드',
    price: 1400,
  },
  {
    name: '커피',
    price: 700,
  },
];

// 예전에는 이렇게 사용
// let trTags = "";
// for (const drink of drinkList) {
//   trTags += "<tr>";
//   trTags += "<td>" + drink.name + "</td>";
//   trTags += "<td>" + drink.price + "</td>";
//   trTags += "</tr>";
// }

// push와 join 사용
let trTags = [];
for (const drink of drinkList) {
  trTags.push('<tr>');
  trTags.push(`<td>${drink.name}</td>`);
  trTags.push(`<td>${drink.price}</td>`);
  trTags.push('</tr>');
}
trTags = trTags.join('');

document.getElementById('tbBody').innerHTML = trTags;

splice

배열의 특정 위치에 새로운 요소를 추가.
추가할 때 기존 요소 삭제하면서 추가할 수 도 있음.

let brands = ['애플', '구글', '아마존'];

// 첫번째 파라미터 - 새로운 요소를 추가할 인덱스 번호
// 두번째 파라미터 - 요소를 추가하기전에 삭제할 요소 수
// 나머지 파라미터 - 추가할 요소들
brands.splice(1, 0, '마이크로소프트', '메타');
console.log(brands); // ['애플', '마이크로소프트', '메타', '구글', '아마존']

slice

배열의 요소를 잘라내서 배열 형태로 반환 (slice는 splice와 다르게 기존의 배열에 영향 X)

let arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
let arr2 = arr1.slice(1, 3);

console.log(arr1); // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
console.log(arr2); // ['B', 'C']

concat

2개 이상의 배열을 하나의 배열로 결합. (기존의 배열은 건드리지 않음)

let arr1 = ['A', 'B'];
let arr2 = ['C', 'D'];
let arr3 = ['E', 'F', 'G'];
let arr4 = arr1.concat(arr2, arr3);

console.log(arr1); // ['A', 'B']
console.log(arr4); // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

sort

배열의 요소를 정렬해주는 함수

// 문자는 정렬 가능
let brands = ['애플', '구글', '아마존', '마이크로소프트', '메타'];

console.log(brands.sort()); // ['구글', '마이크로소프트', '메타', '아마존', '애플']

// 숫자는 정렬 불가능
let points = [40, 100, 1, 5, 25, 10];

console.log(points.sort()); // [1, 10, 100, 25, 40, 5]

숫자 정렬은 사용자 정의를 이용해야 한다.

let points = [40, 100, 1, 5, 25, 10];

// 오름차순 정렬
const ascPoints = points.sort(function (a, b) {
  // a - 40, b - 100
  // [40, 100, 1, 5, 25, 10]
  // a - 100, b - 1
  // [40, 1, 100, 5, 25, 10]
  // a - 100, b - 5
  // [40, 1, 5, 100, 25, 10]
  // a - 100, b - 25
  // [40, 1, 5, 25, 100, 10]
  // ...
  // ...
  // [1, 5, 10, 25, 40, 100]
  
  // 양수 or 음수
  // if (a > b) return 1;
  // else if (a < b) return -1;
  // else 0;
  
  return a - b;
});

console.log(ascPoints); // [1, 5, 10, 25, 40, 100]

// 내림차순 정렬
const descPoints = points.sort(function (a, b) {
  return b - a;
});

console.log(descPoints); // [100, 40, 25, 10, 5, 1]

filter

배열에서 특정 조건에 맞는 요소만 찾아서 새로운 배열로 반환한다. (필터링)

let drinkList = [
  {
    name: '오렌지',
    price: 1000,
  },
  {
    name: '파워레이드',
    price: 1400,
  },
  {
    name: '커피',
    price: 700,
  },
];

let availableProduct = [];
const inputCoin = 1000;

availableProduct = drinkList.filter(function (drink) {
  return drink.price <= inputCoin;
});

console.log(availableProduct);
// [{name: "오렌지", price: 1000}, {name: "커피", price: 700}]

map

배열이 가지고 있는 요소가 오브젝트인 경우, 오브젝트가 가지고 있는 key-value쌍이 있는데, 새로운 오브젝트 형태로 변경해서 새로운 배열을 반환한다.

let userList = [
  {
    firstName: '재석',
    lastName: '유',
    email: 'ryu@gmail.com',
  },
  {
    firstName: '종국',
    lastName: '김',
    email: 'kim@gmail.com',
  },
];

let newUserList = userList.map(function (user) {
  return {
    fullName: user.lastName + user.firstName,
    email: user.email,
  };
});

console.log(newUserList);
// [{fullName: "유재석", email: "ryu@gmail.com"}, {name: "김종국", email: 'kim@gmail.com'}]

reduce

배열이 주어졌을 때, 배열 안의 원소를 모두 이용해 계산할 때 유용하다.

let points = [40, 100, 1, 5, 25, 10];
// reduce(function (){}, 초기값)
// 첫번째 accumulator - 누적 값
// 두번째 currentValue - 현재 배열 요소
// 세번째 currentIndex - 현재 배열 인덱스 번호 (생략가능)
// 네번째 arr - 전체 배열 (생략가능)

let sum = points.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 181

let userList = [
  {
    firstName: '재석',
    lastName: '유',
    email: 'ryu@gmail.com',
  },
  {
    firstName: '종국',
    lastName: '김',
    email: 'kim@gmail.com',
  },
  {
    firstName: '제동',
    lastName: '김',
    email: 'kim2@gmail.com',
  },
];

let kims = userList.reduce(function (users, user) {
  if (user.lastName === '김') {
    users.push(user);
  }
  return users;
}, []);

console.log(kims);
//	[{firstName: "종국", lastName: "김", email: 'kim@gmail.com'},
//	{fullName: "제동", lastName: "김", email: "kim2@gmail.com"}]

결론

Array 내장 함수에 대해서 알아봤다.
외우기보다는 이해하는데 중점을 두고, 프로그래밍을 할때 내장 함수들을 어떻게 활용할 수 있을지 생각해 봐야겠다.