[JS] Array 요소 추가, 제거, 길이 변경 메서드 정리 💛

알고리즘 문제를 풀며 요소를 Array에 마지막에 넣어주던지 처음에 넣어주던지, 삭제 시에도 마찬가지로 순서가 중요함을 느꼈다. Array 요소를 추가하거나 제거하고, 길이를 변경하는 메서드를 정리해 보자!

 

Array의 요소 추가, 제거, 길이 변경 메서드

 

▶ 배열의 시작에서 추가, 제거 - shift, unshift

• Array.prototype.shift() 메서드는 배열에서 첫 번째 요소를 제거! 하고 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변경한다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift>
const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

// shift() Syntax
shift()

 

• Array.prototype.unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가! 하고 배열의 새 길이를 반환한다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift>
const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

// unshift() Syntax
unshift(element0)
unshift(element0, element1)
unshift(element0, element1, /* … ,*/ elementN)

 

▶ 배열의 끝에서 추가, 제거 - push, pop 

• Array.prototype.push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환한다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push>
const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

// push() Syntax
push(element0)
push(element0, element1)
push(element0, element1, /* … ,*/ elementN)

 

• Array.prototype.pop() 메서드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다. 이 메서드는 배열의 길이를 변경한다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop>
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

// pop() Syntax
pop()

 

▶  배열에서 요소를 제거, 교체, 추가하고 싶다면?

• Array.prototype.splice() 메서드는 기존 요소를 제거 또는 교체하거나 제자리에 새 요소를 추가하여 배열의 내용을 변경한다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice>
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

// splice() Syntax
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

 

▶  원래 배열을 수정하지 않고 기존 배열에서 새 배열을 만들고 싶다면?

• Array.prototype.slice() 메서드는 시작(start)부터 끝(end)까지(end는 포함되지 않음) 선택된 새 배열 개체로 배열 부분의 얕은 복사본(shallow copy)을 반환한다. 여기서 시작과 끝은 해당 배열의 항목 인덱스를 나타낸다. 원래 배열은 수정되지 않는다.

// <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice>
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

// slice() Syntax
slice()
slice(start)
slice(start, end)

• start (선택)
  • start 생략 또는 start < -array.length인 경우 0 사용
  • start < 0 이면 start + array.length가 사용
  • start ≥ array.length인 경우 아무것도 추출되지 않음.
• end (선택)
  • 0에서 시작하는 인덱스를 기반으로 end까지 추출하지만 end는 포함되지 않음!
  • end < 0 이면 end + array.length 사용
  • end < -array.length 이면 0 사용
  • end ≥ array.length 또는 end 생략되면 array.length 사용 ⇒ array의 요소 끝까지 추출
  • end가 start보다 전 인덱스이면 아무것도 추출되지 않음.

 

 

🙂 공부하면서 적는 글입니다. 피드백, 공감 해주시면 감사합니다.