JavaScript - 배열의 값을 수정하는 방법

1. 배열에 값을 추가하는 방법

Array.prototype.push(element)

• push()메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let count = fruits.push('watermelon');

console.log(count); // 5
console.log(fruits);
// ['cherry', 'blueberry', 'apple', 'banana', 'watermelon']

Array.prototype.unshift(element)

• unshift()메서드는 새로운 요소를 배열의 앞에 추가하고, 새로운 길이를 반환합니다.

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let count = fruits.unshift('peach');

console.log(count); // 5
console.log(fruits); 
// ['peach', 'cherry', 'blueberry', 'apple', 'banana']

---

2. 배열의 값을 제거하는 방법

delete Array[index]

• delete로 값 삭제 시 요소는 그대로 남아있으며, 값만 삭제됩니다.

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
delete fruits[2];

console.log(fruits);
// ['cherry', 'blueberry', empty, 'banana']

Array.prototype.shift()

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

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let shifted = fruits.shift();

console.log(fruits); // ['blueberry', 'apple', 'banana']
console.log(shifted); // 'cherry'

---

3. 배열의 값을 수정하는 방법

Array[index]

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];

fruits[1] = 'strawberry';

console.log(fruits);
// ['cherry', 'strawberry', 'apple', 'banana']

Array.prototype.slice(begin, end)

• slice() 메서드는 어떤 배열의 begin부터 end까지 (end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let results = fruits.slice(1, 3);
// 1번 인덱스부터 3번 인덱스의 전인 2번 인덱스까지 반환

console.log(fruits);
// ['cherry', 'blueberry', 'apple', 'banana']
console.log(results);
// ['blueberry', 'apple']

(얕은 복사본과 깊은 복사본에 대한 포스트 링크 예정)

Array.prototype.splice(start[, deleteCount[, Item1[, Item2[, ...]]])

• splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

//아무것도 삭제하지 않고 2번 인덱스에 요소를 추가하는 경우

let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let removed = fruits.splice(2, 0, 'melon', 'durian');

console.log(fruits);
// ['cherry', 'blueberry', 'melon', 'durian', 'apple', 'banana']

console.log(removed); // []
// 아무것도 삭제하지 않아 빈 배열이 반환된 것을 확인할 수 있다.

--- 
  
// 시작인덱스에 음수를 넣은 경우
  
let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let removed = fruits.splice(-2, 1);

console.log(fruits);
// ['cherry', 'blueberry', 'banana']

console.log(removed);
// ['apple']
// -2번 인덱스의 요소인 애플이 삭제되었고 반환된 것을 확인할 수 있다.

---
  
// 시작 인덱스 값만 넣은 경우
  
let fruits = ['cherry', 'blueberry', 'apple', 'banana'];
let removed = fruits.splice(2);

console.log(fruits); // ['cherry', 'blueberry']
console.log(removed); // ['apple', 'banana']
//시작 인덱스인 2번 애플을 포함하여 후반부가 모두 삭제된 것을 볼 수 있습니다.