[Javascript] 배열 맨 뒤, 맨 앞에 요소 추가 / push, unshift 기능

자바스크립트의 배열은 요소를 추가할 수도 있고, 수정이나 제거할 수도 있다. 요소 수정의 경우 요소의 인덱스를 활용하여 쉽게 변경할 수 있다. 그렇다면 배열의 맨 뒤와 맨 앞에 요소를 추가하기 위해서는 어떻게 해야 할까?

 

 

 

 

 

목차

1. 배열의 맨 뒤에 요소 추가하기
2. 배열의 맨 앞에 요소 추가하기

 

 

 

 

1. 배열의 맨 뒤에 요소 추가하기

배열의 인덱스는 0부터 시작하기 때문에, 맨 뒤 요소의 인덱스는 항상 배열의 개수보다 1만큼 적다. 이 점을 활용하여 맨 뒤에 요소를 추가할 수 있다.

 

const array1 = ['a', 'b', 'c', 'd']
// 맨 뒤 요소인 'd'의 인덱스는 3, 전체 요소의 갯수(array1.length)는 4

array1[array1.length] = 'e' // 기존 배열에 없는 4번째 인덱스 자리에 'e'를 추가한다.

console.log(array1)

// 결과 : ["a", "b", "c", "d", "e"]

 

 

하지만 더 간단한 방법이 있다. push라는 기능을 사용하면 된다. push를 사용하면 배열 맨 뒤에 원하는 요소를 추가할 수 있다.

 

const array1 = ['a', 'b', 'c', 'd']
array1.push('e');

console.log(array1);

// 결과 : ["a", "b", "c", "d", "e"]

 

 

 

 

 

2. 배열의 맨 앞에 요소 추가하기

위와 같은 방법으로 요소를 맨 앞에 추가한다면 추가가 아닌 수정이 되는 현상이 발생한다.

 

const array2 = ['b', 'c', 'd', 'e'];
array2[0] = 'a';

console.log(array2);

// 결과 : ["a", "c", "d", "e"]

 

 

그렇다면 어떤 방법으로 추가해야 할까? 바로 unshift라는 기능을 사용하면 된다. unshift를 사용하게 되면 맨 앞에 요소가 추가되고 기존에 있던 요소들은 인덱스가 하나씩 뒤로 밀리게 된다.

 

const array2 = ['b', 'c', 'd', 'e'];
array2.unshift('a');

console.log(array2);

// 결과 : ["a", "b", "c", "d", "e"]