javascript 배열 처리 함수들

프론트엔드에서 가장 많이 처리되는 배열 데이터 타입을 잘 다루기 위해 유용한 함수들을 정리 해 본다.

배열 생성 및 변경

Array.from(arrayLike, mapFn?, thisArg?): 유사 배열 객체나 이터러블 객체를 배열로 변환합니다.

let arr = Array.from({ length: 5 }, (x, i) = false);
console.log(arr); // [false, false, false, false, false]

console.log(Array.from('foo')); // ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x)); // [2, 4, 6]

Array.isArray(value): 주어진 값이 배열인지 여부를 확인합니다.

console.log(Array.isArray([1, 2, 3])); // true

concat(value01?, value02?, ..., valueN? ): 배열을 결합하여 새 배열을 반환합니다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2, [5, 6, 7], 8, 9);
console.log(arr3); // Array [1, 2, 3, 4, 5, 6, 7, 8, 9]

copyWithin(target, start, end): 배열의 일부를 동일한 배열 내에서 다른 위치로 복사하여 그 배열을 수정합니다.

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

fill(value, start, end): 배열의 시작 인덱스부터 끝 인덱스까지의 모든 요소를 정적 값으로 채웁니다.

let arr = [1, 2, 3, 4];
arr.fill(0, 2);
console.log(arr); // [1, 2, 0, 0]

reverse(): 배열의 요소 순서를 반전시킵니다.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

sort(compareFunction): 배열의 요소를 정렬합니다.

let arr = [4, 2, 5, 1, 3]
           
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4, 5]

arr.sort((a, b) => b - a);
console.log(arr); // [5, 4, 3, 2, 1]

splice(start, deleteCount, item1, item2, ...): 배열의 요소를 추가하거나 제거합니다.

let arr = [1, 2, 3, 4];
arr.splice(2, 1, 'a', 'b');
console.log(arr); // [1, 2, "a", "b", 4]

flat(depth): 다차원 배열을 평평하게 만듭니다.

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

flatMap(callback): 각 배열 요소에 함수를 적용한 후 결과를 새로운 배열로 평평하게 만듭니다.

let arr = [1, 2, 3];
console.log(arr.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]

배열 탐색

indexOf(searchElement, fromIndex?): 배열에서 특정 요소를 찾고 그 첫 번째 인덱스를 반환합니다.

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

// fromIndex 인덱스 부터 탐색 시작
console.log([1, 2, 3, 1].indexOf(1, 2)); // 3

lastIndexOf(searchElement, fromIndex?): 배열에서 특정 요소를 찾고 그 마지막 인덱스를 반환합니다.

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

includes(searchElement, fromIndex?): 배열이 특정 요소를 포함하는지 확인합니다.

console.log([1, 2, 3, 1].includes(2)); // true

find(callback, thisArg?): 조건에 맞는 첫 번째 요소를 반환합니다.

console.log([1, 2, 3, 1].find(x => x > 2)); // 3

//thisArg는 외부 객체를 callbackFn에서 this로 사용할 수 있게 함
const context = { key: 'value' };

console.log([1, 2, 3, 1].find(function(x) {
  console.log(this);
  return x > 2;
}, context)); // 3
// Object { key: "value" }
// Object { key: "value" }
// Object { key: "value" }
// 3

findIndex(callback, thisArg?): 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.

console.log([1, 2, 3, 1].findIndex(x => x > 2)); // 2

every(callback, thisArg?): 모든 요소가 조건을 만족하는지 확인합니다.

console.log([1, 2, 3, 1].every(x => x > 0)); // true

some(callback, thisArg?): 하나 이상의 요소가 조건을 만족하는지 확인합니다.

console.log([1, 2, 3, 1].some(x => x > 3)); // false

배열 순회 및 변환

forEach(callback, thisArg?): 배열의 각 요소에 대해 함수를 실행합니다.

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

map(callback, thisArg?): 각 요소에 대해 함수를 실행하고 새로운 배열을 만듭니다.

let doubled = [1, 2, 3, 4].map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8]

filter(callback, thisArg?): 조건을 만족하는 요소만으로 새로운 배열을 만듭니다.

let filtered = [1, 2, 3, 4].filter(x => x > 2);
console.log(filtered); // [3, 4]

reduce(callback, initialValue): 배열을 단일 값으로 줄입니다.

let sum = [1, 2, 3, 4].reduce((acc, x) => acc + x, 0);
console.log(sum); // 10

reduceRight(callback, initialValue): 배열을 오른쪽에서 왼쪽으로 단일 값으로 줄입니다.

let sumRight = [1, 2, 3, 4].reduceRight((acc, x) => acc + x, 0);
console.log(sumRight); // 10

배열 요소 추가 및 제거

push(...elements): 배열의 끝에 하나 이상의 요소를 추가합니다.

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

pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

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

unshift(value): 배열의 시작에 하나 이상의 요소를 추가합니다.

let arr = [1, 2, 3, 4]
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3, 4]

shift(): 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.

let arr = [0, 1, 2, 3, 4]
let first = arr.shift();
console.log(first); // 0
console.log(arr); // [1, 2, 3, 4]

배열 반환

join(separator): 배열의 모든 요소를 문자열로 결합합니다.

let joined = [1, 2, 3, 4].join("-");
console.log(joined); // "1-2-3-4"

toString(): 배열을 문자열로 변환합니다.

console.log([1, 2, 3, 4].toString()); // "1,2,3,4"