Javascript 배열(Array) 핸들링: 스프레드 연산자부터 성능 최적화까지

웹 개발자라면 자바스크립트 배열을 능숙하게 다룰 줄 알아야 해. 오늘은 스프레드 연산자의 활용, 배열 정렬, 필터링 방법, 그리고 성능 최적화까지, 배열 관련 고급 주제를 알아볼거야.

스프레드 연산자로 배열 복사하기

스프레드 연산자 ...는 너가 배열이나 객체를 쉽게 복사하고 확장할 때 쓸 수 있는 친구야. 예를 들어보자.

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

const fruits = ['apple', 'banana', 'orange'];
const moreFruits = [...fruits, 'pear', 'grape'];
console.log(moreFruits); // ['apple', 'banana', 'orange', 'pear', 'grape']

배열 정렬하고 필터링하는 법 알아보기

배열을 정렬하고 필터링하는 건 이제 기본이지. sort()와 filter() 메서드로 손쉽게 할 수 있어.

const mixedNumbers = [5, 3, 8, 1, 2];
const sorted = mixedNumbers.sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3, 5, 8]

const words = ['apple', 'banana', 'grape', 'pineapple'];
const filteredWords = words.filter(word => word.includes('apple'));
console.log(filteredWords); // ['apple', 'pineapple']

배열에서 원하는 요소 찾기

find()나 indexOf()로 배열 속에서 필요한 요소를 빠르게 찾을 수 있어.

const items = ['apple', 'banana', 'cherry'];
const found = items.find(item => item === 'banana');
console.log(found); // banana

const index = items.indexOf('notebook');
console.log(index); // 1

배열 성능 최적화 비교

성능 최적화는 코드를 더 빠르고 효율적으로 만들어주는 방법 중 하나야. 여러 가지 방법이 있지만, 여기서는 for 반복문과 forEach 메서드의 비교를 해볼게.

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

// for 반복문
console.time('for');
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
console.timeEnd('for');

// forEach 메서드
console.time('forEach');
arr.forEach(item => {
  console.log(item);
});
console.timeEnd('forEach');

이렇게 비교해보면 어떤 방법이 더 빠른지 알 수 있을 거야.

마무리

오늘 알아본 내용으로 네 코드를 더 강화해봐. 언제나 더 효율적이고 깔끔한 코드를 작성하는 방법을 찾는 게 중요하니까!