[Javascript] shift(), unshift() 배열의 이동 : Programming Story

1. 자바스크립트 배열

저번 포스팅에서 다룬 것처럼 자바스크립트에서 배열은 매우 유연하다.

https://www.programmingstory.com/2024/02/javascript-push-pop.html

push()와 pop()도 가능하고, 오늘 소개하려는 shift()와 unshfit()도 가능하다.

2. shift() - 왼쪽으로 한칸씩 이동

shift()란 배열을 왼쪽으로 한칸씩 이동시키는 것이다. 자연스레 0번째 index에 있던 값은 없어지고 배열의 크기는 1이 작아진다.

예를 들어,

const fruit = ['orange', 'lemon', 'watermelon', 'melon'];

이라는 배열이 있을 때

const fruit = ['orange', 'lemon', 'watermelon', 'melon'];
fruit.shift();
console.log(fruit);

위의 코드처럼 fruit.shift()를 하면 배열이 왼쪽으로 한 칸씩 밀려 배열에서는 orange가 없어지게 된다.

따라서 출력하면

// ['lemon', 'watermelon', 'melon'];

위와 같이 출력이 될 것이다.

3. unshift() - 오른쪽으로 한칸씩 이동

shift()가 왼쪽으로 한칸씩 이동하는 것이라면, 오른쪽으로 한칸씩 이동하는 unshift()도 있다.

하지만 unshift()의 경우 오른쪽으로 한칸씩 이동하는 것이기 때문에 0번째 index가 새로 비게 된다. 따라서 우리는 unshift()를 사용할 때는 괄호 안에 0번째 index에 넣으려는 값을 전달해야 한다.

위와 동일한

const fruit = ['orange', 'lemon', 'watermelon', 'melon'];

배열이 있다고 해보자. 이럴 때 unshift()를 하고 0번째 index에는 새로운 과일을 넣어줘보겠다.

const fruit = ['orange', 'lemon', 'watermelon', 'melon'];
fruit.unshift('grape');

이런식으로 하고 출력을 해보면

const fruit = ['orange', 'lemon', 'watermelon', 'melon'];
fruit.unshift('grape');
console.log(fruit);
//print ['grape', 'orange', 'lemon', 'watermelon', 'melon']

위와 같이 모든 index의 값이 오른쪽으로 한칸씩 밀리고 0번째 index에는 grape가 들어간 것을 확인할 수 있다.