[JavaScript] 자바스크립트 배열에 요소 추가 / 삭제하는 다양한 방법
일반적으로 길이가 고정적인 다른 프로그래밍 언어와는 달리 자바스크립트에서 배열은 동적인 데이터 구조로, 프로그램의 상태나 사용자의 입력에 따라 배열의 내용을 추가하거나, 삭제할 수 있습니다. 이번 포스팅에서는 자바스크립트의 배열에 요소를 추가, 삭제하는 방법에 대해 알아보도록 하겠습니다.
자바스크립트 배열 요소 추가
push - 배열 맨 끝에 요소 추가
See the Pen push by wjdxo513 (@wjdxo513) on CodePen.
자바스크립트 array에 push 메서드를 사용하면 배열 끝에 요소를 추가할 수 있습니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 push 하여 총 4개의 요소를 가진 배열이 된 것을 보실 수 있습니다.
unshift - 배열 맨 앞에 요소 추가
See the Pen unshift by wjdxo513 (@wjdxo513) on CodePen.
배열의 끝이 아니라 맨 앞에 요소를 추가하고 싶다면 unshift 메서드를 사용하시면 됩니다. 위의 예제에서 1, 2, 3 있었던 배열에 new라는 값을 unsift 메서드를 사용하여 맨 앞에 추가한 것을 보실 수 있습니다.
스프레드 연산자 사용하기
See the Pen 스프레드 연산자 by wjdxo513 (@wjdxo513) on CodePen.
자바스크립트에서는 별도의 함수 없이 연산자만으로도 요소를 추가할 수 있는 스프레드 연산자가 있습니다. 위의 예제처럼 ...연산자 뒤에 [추가할 배열]을 명시해 주고 앞이나 뒤에 값을 전달하면 배열에 값을 추가하실 수 있습니다.
자바스크립트 스프레드 연산자(Spread Operator)는 ...로 표시하는 연산자로, ES6(ECMAScript 2015)에서 신규로 도입된 기능입니다. 스프레드 연산자는 배열이나 객체와 같은 동적객체의 요소들을 개별적으로 분리하여 함수 호출, 배열, 객체 리터럴 등의 다양한 위치에 전달할 수 있게 해 줍니다.
자바스크립트 배열 요소 삭제
pop - 배열 맨 끝에 요소 제거
See the Pen pop by wjdxo513 (@wjdxo513) on CodePen.
배열의 가장 마지막 요소를 삭제하려면 pop() 메서드를 사용합니다. 위의 예제를 보시면 1,2,3,4의 요소가 있었던 배열에서 가장 마지막에 있던 4가 제거된 것을 보실 수 있습니다.
shift - 배열의 맨 앞에 요소 제거
See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.
배열의 가장 첫 번째 요소를 삭제하려면 shift() 메서드를 사용합니다. 위의 예제를 보시면 1,2,3,4의 요소가 있었던 배열에서 가장 첫 번째에 있던 1이 제거된 것을 보실 수 있습니다.
splice - 원하는 인덱스의 요소 삭제
//사용법
배열.splice(시작 인덱스, 제거할 요소의 숫자)
- 시작 인덱스 : 삭제할 요소가 있는 인덱스를 의미합니다. 입력하지 않으면 아무 일도 일어나지 않습니다.
- 제거할 요소의 숫자 : 삭제할 요소의 숫자를 말하며 1이라고 입력하면 1개가 삭제되고, 입력하지 않으면 시작 인덱스 이후의 모든 요소들이 제거됩니다.
See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.
splice 메서드를 사용하면 배열에서 원하는 인덱스의 값을 제거할 수 있습니다. splice 메서드의 첫 번째 인자값은 제거하려는 인덱스의 위치이고, splice의 두 번째 인자값은 제거하려는 요소의 숫자입니다. 두번째 인자값은 생략이 가능한데 이 경우. 이후 요소들을 모두 삭제합니다.