본문 바로가기

Javascript/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(00'프로도');





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


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.length0'프로도');




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


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

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

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


const arr3 = ['라이언''어피치''프로도'];
const arr4 = ['팽수''브라운''망'];

arr4.forEach(el=>arr3.push(el));

console.log(arr3);



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


arr5 = arr3.concat(arr4);


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





반응형

닫기