멀티 크리에이터 NoHack의 개발 로그

배열 다루기 🔥

저는 자바스크립트로 코딩을 하면서 생각보다 배열을 많이 사용하기 때문에, 이번에는 본문을 통해 배열을 다룰 때 제가 주로 사용하는 방법을 공유해 보려 합니다. 자바스크립트의 배열 메소드에는 부수 효과가 일어나는 것도 있고, 고차 함수라는 개념도 있어서 한 번 제대로 정리해 두면 이후 배열을 사용할 때 많은 도움이 될 것 같습니다.

 

사실 MDN 같은 공식 가이드에서 소개하는 메소드 위주긴 하지만요 😅

 

 

글을 읽기 전 알아 두면 좋은 도메인 지식 두 가지를 먼저 소개합니다.

 

부수 효과(side effect): 원본 데이터를 변경시키는 효과를 의미합니다.
고차 함수(higher-order function): 함수를 인자로 받거나, 반환하는 함수를 의미합니다.

 

배열 생성하기 ⚡️

배열은 기본적으로 생성자를 호출하는 방식과 리터럴로 만들 수 있습니다.

 

const arr1 = new Array(3);
const arr2 = [1, 2, 3];

console.log(arr1); // [<3 empty items>]
console.log(arr2); // [1, 2, 3]

 

그리고 스프레드 연산자(...)를 사용하는 방법과 Array.from 메소드로 만드는 방법도 있는데, 특히 문자열을 입력 받아 배열로 만들어야 할 때 편리하게 사용할 수 있습니다. Array.from은 인자를 통해 초기값을 설정해줄 수도 있습니다.

 

const arr3 = Array.from('Hello');
const arr4 = Array.from({ length: 3 }, (_, i) => i + 1);
const arr5 = [...'Hello'];

console.log(arr3); // ['H', 'e', 'l', 'l', 'o']
console.log(arr4); // [1, 2, 3]
console.log(arr5); // ['H', 'e', 'l', 'l', 'o']

 

저는 개인적으로 리터럴과 스프레드 연산을 이용해 배열을 만드는 것을 선호하는 것 같아요 😑

 

기본 메소드 🌈

Array.prototype에 정의되어 있는 push, pop 등의 메소드는 부수 효과를 일으켜 원본 데이터를 변경합니다. 사용하면 안 되는 것은 아니지만, 저는 부수 효과를 줄임으로써 프로그램의 안정성을 추구하는 함수형 프로그래밍을 공부하고 있기 때문에 자주 사용하는 편은 아닙니다.

 

그래서 본문에서는 대표적인 배열 메소드인 push, pop, shift, unshift는 소개하지 않겠습니다.

 

1. includes & indexOf

 

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

console.log(arr.indexOf(2));      // 1
console.log(arr.indexOf(2, 2));   // 4
console.log(arr.indexOf(4));      // -1

console.log(arr.includes(2));     // true
console.log(arr.includes(2, 2));  // true
console.log(arr.includes(4));     // false

 

기존에는 배열에 속해 있는 요소를 찾을 때 indexOf를 사용했지만, ES7에 추가된 includes 메소드로 대체할 수 있습니다.

 

2. concat

 

const arr = [1, 2, 3];
const arr2 = [1, 2];

console.log(arr.concat(1, 2));    // [1, 2, 3, 1, 2]
console.log(arr.concat([1, 2]));  // [1, 2, 3, 1, 2]
console.log(arr.concat(arr2));    // [1, 2, 3, 1, 2]
// 원본 배열을 훼손하지 않습니다.
console.log(arr); // [1, 2, 3]

 

concat은 인자로 받은 배열이나 값을 결합하는 메소드로 원본 배열을 변경하지 않습니다.

 

3. splice

 

const arr = [1, 2, 3, 1, 2];
const arr2 = [1, 2, 3, 1, 2];
const arr3 = [1, 2, 3, 1, 2];

console.log(arr.splice(0)); // [1, 2, 3, 1, 2]
console.log(arr); // []

console.log(arr2.splice(1, 3)); // [2, 3, 1]
console.log(arr2); // [1, 2]

const idx = arr3.indexOf(3);
console.log(arr3.splice(idx, 1)); // [3]
console.log(arr3); // [1, 2, 1, 2]

 

splice는 인자로 받은 인덱스 범위 내에서 요소를 제거하고 새로운 요소를 추가하는 메소드이며, 원본 배열을 변경하는 부수 효과를 발생 시킵니다. 인자를 어떻게 설정하냐에 따라 동작이 달라지기 때문에 유의가 필요하며, 주로 indexOf처럼 인덱스를 얻을 수 있는 메소드와 함께 사용합니다.

 

4. slice

 

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

console.log(arr.slice(0)); // [1, 2, 3, 4, 5]
console.log(arr.slice(0, 2)); // [1, 2]
console.log(arr.slice(-1)); // [5]
console.log(arr.slice(-1, 2)); // []

 

slice 메소드는 인자로 받은 인덱스 범위 내의 요소를 배열에 담아 반환하는 메소드입니다. 파이썬에서의 슬라이싱 문법과 동일하게 사용할 수 있으며, 인자로 음수 값을 주게 되면 뒤에서부터 N개의 요소를 배열로 만들어 반환합니다.

 

5. join

 

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

console.log(arr.join(',')); // 1,2,3,4,5
console.log(arr.join('')); // 12345

 

join 메소드는 배열 요소들 사이에 지정한 인자를 삽입해 문자열을 만들어 반환합니다.

 

고차 함수 ⭐️

자바스크립트에 빌트인 되어 있는 배열 관련 고차 함수는 부수 효과를 발생 시키지 않습니다.

 

 

1. sort

 

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

arr.sort((a, b) => {
  return a - b;
});

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

 

sort는 배열 내 요소를 문자 순으로 정렬하는 고차 함수입니다. 하지만 문자 순으로 정렬하기 때문에 숫자를 정렬하는 경우에는 문제가 될 수 있는데, 이 때 비교 조건이 되는 compare 함수를 인자로 전달함으로써 해결할 수 있습니다. compare 함수에서 두 요소의 대소를 비교한 값을 반환하면, 그에 따라 오름차순 또는 내림차순으로 정렬합니다.

 

2. forEach

 

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

// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
  console.log(value, index, array);
});

 

forEach는 배열을 순서대로 순회하는 고차 함수로서, 끝날 때까지 중간에 멈출 수 없습니다.

 

3. map

 

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2);

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

 

map 메소드는 배열의 모든 요소를 순회하면서 인자로 전달 받은 콜백 함수를 반복 호출하는 고차 함수입니다. 그리고 콜백 함수의 반환 값으로 새로운 배열을 구성하는데, 이 때 원본 배열은 변경되지 않습니다.

 

4. filter

 

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((item) => item % 2 == 0);

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

 

filter 메소드는 map과 동일하게 인자로 받은 콜백 함수를 반복 호출하는 고차 함수입니다. map은 반환 결과를 그대로 참조해 배열을 생성하지만, filter는 조건의 결과가 true인 값들만 모아서 배열을 생성합니다. map과 동일하게 원본 배열을 변경하지 않습니다.

 

5. find

 

const arr = [1, 2, 3, 4, 5];
const elem = arr.find((item) => item === 2);

// 2
console.log(elem);

 

find 메소드는 인자로 전달된 콜백 함수를 호출하여 반환 값이 true인 첫 번째 요소를 반환합니다.

 

6. findIndex

 

const arr = [1, 2, 3, 4, 5];
const idx = arr.findIndex((item) => item === 2);

// 1
console.log(idx);

 

findIndex 메소드는 인자로 전달된 콜백 함수를 호출하여 반환 값이 true인 첫 번째 요소의 인덱스를 반환합니다.

 

7. reduce

 

/**
 * reduce(accumulator, currentValue, index, array)
 */
const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

 

reduce는 배열의 모든 요소를 순회하며, 인자로 전달 받은 콜백 함수를 통해 하나의 결과 값을 만들어 냅니다. 첫 번째 인자로 콜백 함수를, 두 번째 인자로는 초기 값을 정할 수 있으며 초기 값은 생략할 수 있습니다.

 

reduce는 다양하게 활용할 수 있습니다.

 

const list = [1, 2, 3, 4, 1, 2, 4, 5];
const newArr = list.reduce((acc, cur, idx, arr) => {
  if (arr.indexOf(cur) === idx) acc.push(cur);
  return acc;
}, []);

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