[JavaScript] 배열 앞, 뒤에 요소 추가, 삭제하기 - unshift(), push(), shift(), pop()

 

 

배열의 앞과 뒤에 요소를 추가, 삭제하는 방법을 알아보겠습니다.

 

 

• 배열의 맨 앞에 요소 추가: unshift()
• 배열의 맨 앞에 요소 삭제: shift()
• 배열의 맨 뒤에 요소 추가: push()
• 배열의 맨 뒤에 요소 삭제: pop()
• 배열의 중간에 요소 추가, 삭제: splice()

배열의 앞, 뒤에 요소 추가하기

unshift()

arr.unshift([...elementN]);

unshift() 메서드는 주어진 값을 배열의 맨 앞쪽에 추가하고, 배열의 새로운 길이를 반환합니다.

 

elementN

배열 맨 앞에 추가할 요소

 

반환값

인자(매개변수, Parameter)로 전달된 요소가 추가된

배열의 새로운 길이를 반환합니다.

 

const arr = ["apple", "banana"];
arr.unshift('cherry');

console.log(arr); // ['cherry', 'apple', 'banana'];
console.log(arr.length); // 3

arr.unshift("cherry");

 

unshift() 메서드를 이용해 배열의 맨 앞에 "cherry"을 추가하였고

새로운 길이인 3을 리턴하고, arr는 ['cherry', 'apple', 'banana']값을 가지게 되었습니다.

 

 

const arr = ["축구","야구"];
arr.unshift("수영","배구");
console.log(arr); // ['수영', '배구', '축구', '야구']
console.log(arr.length); // 4

arr.unshift(["배드민턴"]); 
console.log(arr); // [["배드민턴"], '수영', '배구', '축구', '야구']
console.log(arr.length); // 5

unshift() 메서드를 이용해 배열의 맨 앞에 여러 개의 값을 추가할 수도 있습니다.

 

 

---

 

 

push()

arr.push(element1[, ...[, elementN]])

push() 메서드는 주어진 값을 배열의 끝에 추가하고, 배열의 새로운 길이를 반환합니다.

 

elementN

배열의 끝에 추가할 요소

 

반환값

인자로 전달된 요소가 추가된

배열의 새로운 길이를 반환합니다.

 

const arr = ["축구", "야구"];
const length = arr.push("수영");

console.log(arr); // ['축구', '야구', '수영']
console.log(length); // 3

const length = arr.push("수영");

push() 메서드를 이용해 맨 뒤에 "수영"을 추가하였고

새로운 길이인 3을 리턴하고, arr는 ['축구', '야구', '수영'] 값을 가지게 되었습니다.

 

 

const arr = ["축구", "야구"];
const length = arr.push("수영", "배구");

console.log(arr); // ['축구', '야구', '수영', '배구']
console.log(length); // 4

push() 메서드를 이용해 배열의 맨 뒤에 여러 개의 값을 추가할 수도 있습니다.

 

 

---

 

 

배열의 앞, 뒤에 요소 삭제하기

shift()

arr.shift();

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.

이 메서드는 배열의 길이를 변하게 합니다.

 

반환값

배열에서 제거한 요소

빈 배열의 경우 undefined를 반환합니다.

 

const arr = ["축구", "야구", "수영"];

console.log(`arr before: ${arr}`);
// 제거전 arr 배열: 축구,야구,수영

let removed = arr.shift();

console.log(`arr after: ${arr}`);
// 제거후 arr 배열: 야구,수영

console.log(`Removed this element: ${removed}`);
// 제거된 배열 요소: 축구

첫 번째 요소를 제거하기 전 arr배열은 "축구", "야구", "수영" 값을 가지고 있습니다.

let removed = arr.shift();

배열의 첫 번째 원소를 삭제하여 "야구", "수영" 값이 남게 되었고 

삭제한 원소인 "축구"를 반환합니다.

 

removed = arr.shift();
console.log(`arr after: ${arr}`); 
// 제거후 arr 배열: 수영
console.log(`Removed this element: ${removed}`);
// 제거된 배열 요소: 야구

removed = arr.shift();

배열의 첫 번째 원소를 한번 더 삭제하여

배열에서"야구"가 삭제되고 "수영"이 남게 됩니다.

 

removed = arr.shift();
console.log(`arr after: ${arr}`); 
// 제거후 arr 배열: 빈 배열
console.log(`Removed this element: ${removed}`); 
// 제거된 배열 요소: 수영

removed = arr.shift();

배열의 첫 번째 원소를 한번 더 삭제하여

배열에서 "수영"이 삭제되고, arr배열은 빈값이 됩니다.

 

removed = arr.shift();
console.log(`arr after+2: ${arr}`); 
// 제거후 arr 배열: 빈 배열
console.log(`Removed this element: ${removed}`); 
// 제거된 배열 요소: undefined

removed = arr.shift();

배열에서 첫 번째 원소를 한번 더 삭제하였더니

arr배열이 빈값이기 때문에

삭제된 값은 undefined를 반환합니다.

 

 

---

 

 

pop()

arr.pop();

pop() 메서드는 배열에서 마지막 요소를 제거하고, 제거된 요소를 반환합니다.

 

반환값

배열에서 제거한 요소

빈 배열의 경우 undefined를 반환합니다.

 

const arr = ["축구", "야구", "수영"];

let removed = arr.pop();

console.log(arr);
// 제거후 arr 배열: 축구, 야구

console.log(removed);
// 제거된 배열 요소: 수영

let removed = arr.pop();

배열의 마지막 원소를 삭제하여 

배열에서 "수영"이 삭제되고,

"축구", "야구" 값이 남게 되었습니다.

 

removed = arr.pop();
console.log(arr);
// 제거후 arr 배열: 축구

console.log(removed);
// 제거된 배열 요소: 야구

removed = arr.pop();

배열의 마지막 원소를 한번 더 삭제하여

배열에서"야구"가 삭제되고 "축구"가 남게 됩니다.

 

removed = arr.pop();
console.log(arr);
// 제거후 arr 배열: 빈 배열

console.log(removed);
// 제거된 배열 요소: 축구

removed = arr.pop();

배열의 마지막 원소를 한번 더 삭제하여

배열에서 "축구"가 삭제되고, arr배열은 빈값이 됩니다.

 

removed = arr.pop();
console.log(arr);
// 제거후 arr 배열: 빈 배열

console.log(removed);
// 제거된 배열 요소: undefined

removed = arr.pop();

배열에서 마지막 원소를 한번 더 삭제하였더니

arr배열이 빈값이기 때문에

삭제된 값은 undefined를 반환합니다.

 

 

배열의 맨 앞에 요소를 추가하는 unshift(), 배열의 맨 앞에 요소를 삭제하는 shift()

배열의 맨 뒤에 요소를 추가하는 push(), 배열의 맨 뒤에 요소를 삭제하는 pop()

메서드를 알아보았습니다.

 

 

배열 중간에 요소를 추가, 삭제할 수 있는 splice() 메서드를 알아보기

[JavaScript] 배열 중간에 요소 추가, 삭제하기 - splice()