[JavaScript] 배열 내장 함수

이번 포스팅에서는 배열의 내장 함수 종류들의 대해서 다뤄보겠습니다.

배열이란?

배열은 간단하게 변수 하나에 여러 가지 데이터를 담아두는 것을 말합니다.

const arr = [1, 2, 3, 4, 5];
console.log(arr); // [1, 2, 3, 4, 5]

forEach

forEach 메서드는 배열을 한 번씩 순회하며 각각의 요소에 대해서 실행하는 함수입니다.

const arr = [1, 2, 3, 4, 5];

arr.forEach((value) => {
  console.log(value);
});
// 1
// 2
// 3
// 4
// 5

forEach를 이용해 다른 배열에 데이터를 넣어줄 수 있습니다.

const arr = [1, 2, 3, 4, 5];
const newArr = [];

arr.forEach((value) => {
  newArr.push(value);
});

console.log(newArr); // [1, 2, 3, 4, 5]

다른 배열에 데이터를 넣어주는 메서드로 map도 있습니다.

map

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

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value) => {
  return value * 2;
});

console.log(newArr); // [2, 4, 6, 8, 10]

각각의 요소들의 2를 곱해서 newArr 변수에 반환해주는 구조입니다.

includes

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.

const arr = [1, 2, 3, 4, 5];
const number = 3;
const number2 = 6;

console.log(arr.includes(number));  // true
console.log(arr.includes(number2)); // false

이는 forEach 메서드를 이용해서 같은 값을 얻어낼 수 있지만 비효율적이라고 생각합니다. 한번 작성해보시고 코드를 열어서 제가 작성한 것과 동일한지 다른지 비교해보는 것도 좋습니다. 제가 작성한 코드가 정답은 아닙니다!!

const arr = [1, 2, 3, 4, 5];
const number = 3;

arr.forEach((value) => {
  if (value === number) {
    console.log(true);
  }
});

indexOf

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

const arr = [1, 2, 3, 4, 5, 3];
const number = 3;
const number2 = 6;

console.log(arr.indexOf(number));  // 2
console.log(arr.indexOf(number2)); // -1

배열의 순서는 0부터 시작하기 때문에 2가 나왔습니다. number2는 배열 안에 존재하지 않기 때문에 -1이 반환된 것을 확인할 수 있습니다. arr 배열에 3이 두 개지만 2가 반환된 이유는 첫 번째부터 순서대로 찾기 때문에 가장 먼저 찾은 요소의 자릿수를 반환합니다.

findIndex

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const arr = [
  { color: 'red' },
  { color: 'yellow' },
  { color: 'blue' },
  { color: 'green' }
];

console.log(
  arr.findIndex((value) => {
    return value.color === 'blue';
  })
); // 2

findIndex 메서드도 같은 값이 여러 개일 때 가장 앞에 있는 요소의 순서를 반환해줍니다.

indexOf와 findIndex의 차이점이라면 indexOf는 단순히 주어진 요소로 찾는다면 findIndex는 조건을 부여해서 찾는다고 생각하면 될 것 같습니다.

find

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

const arr = [
  { color: 'red' },
  { color: 'yellow' },
  { color: 'blue' },
  { color: 'green' }
];

console.log(
  arr.find((value) => {
    return value.color === 'blue';
  })
); // { color: 'blue' }
console.log(
  arr.find((value) => {
    return value.color === 'white';
  })
); // undefined

filter

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

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'yellow' },
  { num: 3, color: 'blue' },
  { num: 4, color: 'blue' },
  { num: 5, color: 'green' }
];

console.log(arr.filter((value) => value.color === 'blue'));
// [ { num: 3, color: 'blue' }, { num: 4, color: 'blue' } ]

조건에 맞는 요소가 없다면 빈 배열( [] )을 반환합니다.

내가 원하는 요소만 제거해서 출력할 수도 있습니다. filter 메서드는 이런 식으로 자주 사용되니 익혀두시는 것을 추천드립니다.

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'yellow' },
  { num: 3, color: 'blue' },
  { num: 4, color: 'blue' },
  { num: 5, color: 'green' }
];

console.log(arr.filter((value) => value.color !== 'blue'));
/*
  [
    { num: 1, color: 'red' },
    { num: 2, color: 'yellow' },
    { num: 5, color: 'green' }
  ]
*/

slice

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'yellow' },
  { num: 3, color: 'blue' },
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' }
];

console.log(arr.slice(0, 4));
/*
  [
    { num: 1, color: 'red' },
    { num: 2, color: 'yellow' },
    { num: 3, color: 'blue' },
    { num: 4, color: 'green' }
  ]
*/

slice 메서드의 첫 번째 parameter는 이상을 뜻하고 두 번째 parameter는 미만을 뜻하기 때문에 0 ~ 3까지의 요소가 반환된 것을 알 수 있습니다.

concat

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 특징으로 원본 배열은 바뀌지 않습니다. 배열을 합쳐서 계속 사용할 거라면 새 변수를 만들어 담아두는 것을 추천드립니다.

const arr = [
  { num: 1, color: 'red' },
  { num: 2, color: 'yellow' },
  { num: 3, color: 'blue' }
];
const arr2 = [
  { num: 4, color: 'green' },
  { num: 5, color: 'blue' }
]
const newArr = arr.concat(arr2);
console.log(newArr);
/*
  [
    { num: 1, color: 'red' },
    { num: 2, color: 'yellow' },
    { num: 3, color: 'blue' },
    { num: 4, color: 'green' },
    { num: 5, color: 'blue' }
  ]
*/

sort

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 특징으로 원본 배열이 변경됩니다.

const arr = ['나', '하', '다', '카', '아'];
const numbers = [999, 23, 1, 234, 1920, 5];

arr.sort();
numbers.sort();

console.log(arr);     // [ '나', '다', '아', '카', '하' ]
console.log(numbers); // [ 1, 1920, 23, 234, 5, 999 ]

보시는 것처럼 한글은 정렬이 됐지만 숫자는 생각한 것과 다르게 정렬된 것을 보실 수 있습니다. 이는 위에 설명한 것처럼 유니코드의 코드 포인트를 따라서 정렬이 됐기 때문입니다. 그렇다면 저희가 원하는 오름차순 내림차순으로 정렬하는 방법에 대해서 알아보겠습니다.

const numbers = [999, 23, 1, 234, 1920, 5];
const numbers2 = [999, 23, 1, 234, 1920, 5];

numbers.sort((a, b) => a - b);
numbers2.sort((a, b) => b - a);

console.log(numbers);  // [ 1, 5, 23, 234, 999, 1920 ]
console.log(numbers2); // [ 1920, 999, 234, 23, 5, 1 ]

 

a - b는 오름차순, b - a는 내림차순으로 정렬하게 됩니다.

join

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const arr = ['티스토리', '블로그', '입니다.'];

console.log(arr.join());    // 티스토리,블로그,입니다.
console.log(arr.join(' ')); // 티스토리 블로그 입니다.

join 메서드 parameter에 아무것도 넣지 않는다면 ,로 이어지고 다른 요소를 넣으면 그 요소에 맞춰서 출력이 됩니다.