[자바스크립트] 배열에서 데이터를 추가, 삭제, 복사하는 함수 6가지 (push, pop, unshift, shift, splice, concat)

목차

1. push: 뒤에서부터 데이터 추가
2. pop: 뒤에서부터 데이터 삭제
3. unshift: 앞에서부터 데이터 추가
4. shift: 앞에서부터 데이터 삭제
5. splice: 인덱스번호로 데이터 삭제, 추가
6. concat: 두 배열을 합쳐서 새로운 배열을 생성

 

배열에서 데이터를 추가, 삭제, 복사하는 함수

1. push()

배열 뒤에서부터 데이터를 추가해주는 함수로 배열의 새로운 길이가 리턴된다. 기존 배열 값이 변한다.

Array.push(뒤에서 추가할 데이터);

👉  예제

const alphabet = ['a', 'b', 'c'];

const result = alphabet.push('d');

console.log(alphabet);
// ["a", "b", "c", "d"]

console.log(result);
// 4
// 배열의 새 길이를 의미한다

 

2. pop()

배열 뒤에서부터 데이터를 삭제해주는 함수로 삭제된 데이터가 리턴된다. 기존 배열 값이 변한다.

Array.pop();

👉  예제

const alphabet = ['a', 'b', 'c'];

const result = alphabet.pop();

console.log(alphabet);
// ["a", "b"]

console.log(result);
// "c"

 

3. unshift()

배열 앞에서부터 데이터를 추가해주는 함수로 배열의 새로운 길이가 리턴된다. 기존 배열 값이 변한다.

Array.unshift(앞에서 추가할 데이터);

👉  예제

const alphabet = ['a', 'b', 'c'];

const result = alphabet.unshift('d');

console.log(alphabet);
// ["d", "a", "b", "c"]

console.log(result);
// 4
// 배열의 새 길이를 의미한다

 

4. shift()

배열 앞에서부터 데이터를 삭제해주는 함수로 삭제된 데이터가 리턴된다. 기존 배열 값이 변한다.

Array.shift();

👉  예제

const alphabet = ['a', 'b', 'c'];

const result = alphabet.shift();

console.log(alphabet);
// ["b", "c"]

console.log(result);
// "a"

 

5. splice()

인덱스번호로 배열 안에 있는 데이터를 삭제, 추가해주는 함수. 기존 배열 값이 변한다.

Array.splice(start, deleteCount, item1, item2, itemN);

• start: 배열에서 데이터를 삭제, 추가해줄 시작점의 인덱스번호로 두번째 파라미터인 deleteCount가 설정되어 있지 않다면 시작점부터 모든 데이터를 삭제해준다
• deleteCount: 지울 데이터의 수 (선택)
• itermN: 시작되는 데이터에 추가할 아이템 (선택)

👉  예제 1

const months = ['Jan', 'March', 'April', 'June'];

months.splice(2);

console.log(months);
// ["Jan", "March"]

• 데이터의 삭제, 추가를 시작할 인덱스번호: 2 ('April'를 의미한다)
• 지울 데이터의 수: 없음 (시작할 인덱스번호 이후에 있는 모든 데이터를 삭제)
• 추가할 데이터: 없음

→ index가 2번인 'April'에서부터 모든 데이터를 삭제한다.

 

👉  예제 2

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');

console.log(months);
// ["Jan", "Feb", "March", "April", "June"]

• 데이터의 삭제, 추가를 시작할 인덱스번호: 1 ('March'를 의미한다)
• 지울 데이터의 수: 0
• 추가할 데이터: 'Feb'

→ index가 1번인 'March'에서부터 0개의 데이터를 삭제하고 데이터 'Feb'를 추가해준다.

 

6. concat()

두 배열을 합쳐서 새로운 배열을 생성해주는 함수. 기존 배열 값이 변하지 않는다.

새로운배열 = 배열1.concat(배열2);

👉  예제

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array1);
// ["a", "b", "c"]

console.log(array2);
// ["d", "e", "f"]

console.log(array3);
// ["a", "b", "c", "d", "e", "f"]