자바스크립의 배열에 값을 추가하는 방법은 여러가지가 있습니다. 만약 배열의 맨 앞에 값을 추가하거나 삭제하는 방법을 알아보려고 합니다.


# 자바스크립트 배열의 맨 앞 또는 맨 뒤에 값을 추가하기
자바스크립트의 배열에는 다양한 내장 함수가 존재하며 이 중에서 배열 맨 앞에 사용하는 함수가 존재합니다. 바로 shift(), unshift()입니다.

shift() // 배열 맨 앞의 값 삭제
unshift(값) // 배열 맨 앞의 값 추가


배열의 맨 앞의 값을 추가하거나 제거하는데 가장 쉽고 빠르게 사용할 수 있는 방법입니다.

먼저 shift()는 배열 맨 앞의 값을 제거합니다. 그리고 삭제한 값을 반환하게 됩니다.
다음으로 unshift()는 배열 앞에 새로운 값을 추가합니다. 그리고 배열의 전체 개수를 반환합니다.

그럼 아래에 간단한 예제를 만들어보겠습니다.


! 배열 맨 앞에 새로운 값 추가 및 삭제 예제
먼저 변수 mySite라는 배열 값을 만들고 맨 앞에 새로운 값을 추가하려고 합니다. 그 다음 추가한 값을 다시 삭제하는 방법입니다.
let mySite = ['is', 'free'];

mySite.unshift('web');
// 3을 출력함

// 실행결과 mySite 값
['web', 'is', 'free']

위와 같이 unshift()를 사용하여 배열의 맨 앞에 새로운 값을 추가하였습니다. 이제 추가한 맨 앞의 값을 반대로 삭제하기 위해서 shift()를 사용하려고 합니다.
let mySite = ['web', 'is', 'free'];

mySite.shift();
// 삭제한 'web'을 출력함

// 실행결과 mySite 값
['is', 'free']

결과는 예상대로 'web'이 삭제된 값을 가지게 되었습니다.


여기까지 배열에서 자주 사용되는 내장함수 shift(), unshift()를 알아보았습니다. 참고로 보통 값을 추가하거나 제거할 때 slice(), splice()가 많이 쓰이죠. 맨 앞에만 전제로 하는 경우라면 이 방법보다 더 쉽게 사용할 수 있는 장점이 있습니다.