JS 배열 다루기: 원본을 변경하지 않는 메서드 (Non-Destructive)

원본 배열을 변경하지 않는 메서드들

concat()

하나 이상의 배열을 현재 배열에 연결하여 새 배열을 반환합니다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2); 

// array1 ['a', 'b', 'c']
// array2 ['d', 'e', 'f'];
// newArray ['a', 'b', 'c', 'd', 'e', 'f']

 

slice()

배열의 일부분을 얕게 복사하여 새 배열로 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
const citrus = fruits.slice(1, 3);

// fruits ['apple', 'banana', 'orange']
// citrus ['banana', 'orange']

 

join()

배열의 모든 요소를 문자열로 변환하고, 이들을 연결하여 하나의 문자열로 반환합니다.

const elements = ['Fire', 'Air', 'Water'];
const joined = elements.join();

// elements ['Fire', 'Air', 'Water']
// joined 'Fire,Air,Water'

 

indexOf() / lastIndexOf()

배열에서 지정된 요소를 찾고, 그 위치를 반환합니다.

const fruits = ['apple', 'banana', 'apple', 'mango'];
const index = fruits.indexOf('apple'); // 0
const lastIndex = fruits.lastIndexOf('apple'); // 2

// fruits ['apple', 'banana', 'apple', 'mango']
// index 0
// lastIndex 2

 

find() / findIndex()

주어진 테스트 함수를 만족하는 배열의 첫 번째 요소의 값을 반환합니다(find) 또는 그 인덱스를 반환합니다(findIndex).

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(element => element > 10); // 12
const foundIndex = numbers.findIndex(element => element > 10); // 1

// numbers [5, 12, 8, 130, 44]
// found 12
// foundIndex 1

 

filter()

주어진 함수를 만족하는 모든 요소로 이루어진 새 배열을 생성합니다.

const numbers = [1, 2, 3, 4];
const filtered = numbers.filter(n => n > 2);

// numbers [1, 2, 3, 4]
// filtered [3, 4]

 

map()

배열의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새 배열을 생성합니다.

const numbers = [1, 4, 9];
const roots = numbers.map(Math.sqrt);

// numbers [1, 4, 9]
// roots [1, 2, 3]

 

reduce() / reduceRight()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, val) => acc + val, 0);

// numbers [1, 2, 3, 4]
// sum 10

 

every() / some()

배열의 모든 요소(every) 또는 일부 요소(some)가 주어진 테스트 함수를 만족하는지 여부를 반환합니다.

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
const everyResult = array1.every(isBelowThreshold); // true
const someResult = array1.some(isBelowThreshold); // true

// array1 [1, 30, 39, 29, 10, 13]
// everyResult true
// someResult true

 

forEach()

배열의 각 요소에 대해 주어진 함수를 실행합니다.

const items = ['item1', 'item2', 'item3'];
items.forEach(item => console.log(item));

// 'item1'
// 'item2'
// 'item3'

 

추가로,reduce, map, filter, forEach 등의 메서드는 배열을 변경하지 않지만, 콜백 함수 내에서 배열을 변경할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter((value, index, arr) => {
    arr.pop(); // 원본 배열 변경
    return value % 2 === 0;
});
console.log(numbers); // [1, 2, 3], 원본 배열이 변경됨
console.log(filtered); // [2], 새 배열

 

단, 원본 배열을 변경하는 것은 원본 데이터의 무결성이 깨지므로 유의해야합니다.