[javascript] 배열 조작과 자바스크립트 성능 최적화
자바스크립트에서 배열은 많은 데이터를 처리하는 데 유용한 자료 구조입니다. 배열을 적절하게 조작하면 코드의 가독성을 높일 수 있고 성능을 최적화할 수도 있습니다. 이 글에서는 배열 조작에 대한 몇 가지 팁과 자바스크립트 배열 성능 최적화에 대해 알아보겠습니다.
1. 배열 조작 팁
1-1. push 대신 concat 사용하기
push 메서드는 배열에 요소를 추가하는 가장 간단한 방법입니다. 하지만 push는 원본 배열을 직접 변경하기 때문에 함수형 프로그래밍 개념에 어긋날 수 있습니다. 대신 concat 메서드를 사용하면 원본 배열을 변경하지 않고 새로운 배열을 생성할 수 있습니다.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
// push를 사용한 방식
const result1 = array1.push(...array2);
// result1: 6, array1: [1, 2, 3, 4, 5, 6]
// concat을 사용한 방식
const result2 = array1.concat(array2);
// result2: [1, 2, 3, 4, 5, 6], array1: [1, 2, 3]
1-2. splice 대신 slice와 concat 결합하기
배열에서 요소를 제거하는 용도로 splice를 사용할 수 있습니다. 하지만 splice는 원본 배열을 변경하기 때문에 부작용이 발생할 수 있습니다. 대신 slice와 concat을 조합하여 요소를 제외한 새로운 배열을 생성할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
// splice를 사용한 방식
numbers.splice(2, 1);
// numbers: [1, 2, 4, 5]
// slice와 concat을 사용한 방식
const removedItem = numbers.slice(2, 3);
const newNumbers = numbers.concat(removedItem);
// removedItem: [3], newNumbers: [1, 2, 4, 5]
2. 배열 성능 최적화
배열을 다룰 때 성능 최적화에 유의해야 합니다. 아래는 배열 성능을 향상시키기 위한 몇 가지 방법입니다.
2-1. for 루프 대신 forEach 사용하기
배열의 요소에 접근할 때 for 루프를 사용하기 보다는 forEach 메서드를 사용하는 것이 성능상 이점이 있습니다. forEach는 내부적으로 최적화되어 있어서 더 효율적인 반복 작업을 수행할 수 있습니다.
const numbers = [1, 2, 3, 4, 5];
// for 루프를 사용한 방식
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
// forEach를 사용한 방식
numbers.forEach((number) => {
console.log(number);
});
2-2. Map 대신 일반 객체 사용하기
배열을 조작해야 할 때 Map을 사용하는 것보다 일반 객체를 사용하는 것이 성능상 이점이 있습니다. Map은 내부적으로 해시맵 구조를 사용하기 때문에 작은 크기의 데이터에서는 성능이 크게 개선되지 않을 수 있습니다.
// Map을 사용한 방식
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // 'value1'
// 일반 객체를 사용한 방식
const obj = {
key1: 'value1',
key2: 'value2'
};
console.log(obj.key1); // 'value1'