[javascript] 배열 요소의 추가

배열에 요소를 삽입하는 방법은 배열 앞과 뒤에 배열 요소를 추가하는 방법과, 배열 사이에 배열 요소를 추가하는 방법으로 나누어집니다.

배열의 추가, 삭제 시 가장 빠른 방법은 배열의 맨 앞에나 뒤에서 추가, 삭제를 하는 방법입니다.

배열 중간에 요소를 추가, 삭제하는 경우 내부적으로 추가 처리가 필요해지기 때문에 

배열 맨 앞에 요소를 추가하기

shift(), unshift() 메서드는 쌍을 이뤄 배열의 맨 앞에 요소를 추가(unshift), 삭제(shift) 하는 메서드입니다.

먼저 추가한 요소가 높은 인덱스를 가집니다.

Array.unshift(요소);

와 같이 사용합니다.

const arr1 = [];
arr1.unshift('라이언');
arr1.unshift('어피치');
arr1.unshift('콘');
arr1.unshift('네온');
arr1.unshift('무지');
console.log(arr1);

shift() 메서드를 splice() 메서드로 구현하면 다음과 같습니다.

arr1.splice(0, 0, '프로도');

배열 맨뒤에 요소를 추가하기

push(), pop() 메서드는 쌍으로 배열 맨뒤에 요소를 추가(push)하거나 삭제(pop)하는 메서드입니다.

먼저 추가한 요소가 낮은 배열 인덱스를 가집니다.

Array.push(요소);

와 같이 사용합니다.

const arr2 = [];
arr2.push('라이언');
arr2.push('어피치');
arr2.push('콘');
arr2.push('네온');
arr2.push('무지');
console.log(arr2);

push() 메서드를 splice() 메서드로 구현하면 다음과 같습니다.

arr2.splice(arr2.length, 0, '프로도');

배열을 제어하는 고급 메서드의 활용

자바스크립트에는 배열을 합치거나 단순화하는 다양한 메서드들이 제공됩니다.

따라서 배열 요소들을 하나씩 가져와 2개 이상의 배열을 하나로 합치거나하는 방법은 굉장히 비효율적인 방법입니다.

두 배열을 하나로 합치는 방법을 push() 메서드로 구현하면

const arr3 = ['라이언', '어피치', '프로도'];const arr4 = ['팽수', '브라운', '망'];
arr4.forEach(el=>arr3.push(el));
console.log(arr3);

이렇게 되지만, 자바스크립트의 내장 메서드인 concat()으로 더 간편하게 구현할 수 있고, 속도도 더 빠릅니다.

arr5 = arr3.concat(arr4);

push(), pop(), shift(), unshift() 로도 배열을 합치거나 나누는 등의 다양한 작업이 가능하지만, 이미 구현된 내장 메서드가 있을 경우 그걸 사용하는 것을 추천합니다.