◟(ᵔ ̮ ᵔ)͜💐 JavaScript I .pop() .shift() .push() .unshift() 를 정리해보자.

 

 

MDN 출처는👇

pop()

shift()

push()

unshift()

 

오늘도 여느날과 같이 문제를 풀다가 이 메서드들을 한 번에 쓸 일이 생겼다.

언제나 존재는 아는데 헷갈리고 까먹고 ... 그래서 mdn에 검색해 사용하곤 했는데, 한 번쯤 다 정리해놓으면 좋겠다 싶었다.

이제 헷갈리는 일이 줄기를 바라면서. 정리 시작!

 

---

 

Array.prototype.pop()

 

pop() 메서드는 Array배열의 마지막 요소를 제거하고, 그 요소-마지막요소-를 반환한다.

주의할 점은 pop()을 사용한다고 해서 마지막 요소를 제거한 배열이 반환되는 건 아니라는 점이다.

그리고 배열은 마지막 요소가 제거된 상태가 되었다는 점 또한 주의하자 !

 

예문 )

const arr = [1, 2, 3, 4, 5];
const last_num = arr.pop(); 

console.log(arr); // [1,2,3,4]
console.log(last_num); // 5

1. 배열 arr 에 pop() 메서드를 사용했다. 

2. 사용해서 반환된 요소 (배열 arr의 마지막 요소) 를 last_num 이라는 변수에 할당했다.

3. 배열 arr은 pop() 메서드로 인해 마지막 요소인 5가 제거 되고 [1,2,3,4]만 남은 상태가 되었다.

3-2. 그리고 이를 확인하기 위해서는 last_num 이 아니라 arr를 확인해야만 한다.

4. last_num에는 제거된 요소이자 가장 마지막 요소인 5가 반환되어 할당되어 있다.

 

 

 

---

 

 

Array.prototype.shift()

 

shift() 메서드는 pop() 메서드와는 반대로 가장 첫 번째 요소를 제거하고, 그 요소-첫번째 요소-를 반환한다.

pop() 메서드와 마찬가지로 배열이 반환되는 게 아니라 제거한 가장 첫 번째 요소를 반환! 한다는 점을 주의하자.

 

 

예문 )

const arr = [1, 2, 3, 4, 5];
const first_num = arr.shift();

console.log(arr); // [2,3,4,5]
console.log(first_num); // 1

 

 

---

 

 

Array.prototype.push()

 

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

 

예문 )

const arr = ["롯데리아","맥도날드"];
arr.push("버거킹", "맘스터치");

console.log(arr);
// ["롯데리아", "맥도날드", "버거킹", "맘스터치"]

 

 

---

 

 

 

Array.prototype.unshift()

 

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

 

예문 )

const arr = ["는", "구황작물이다"];
arr.unshift("감자", "고구마");

console.log(arr);
// ["감자", "고구마", "는", "구황작물이다"]

 

 

 

---

 

 

이 모든 ~ 메서드들을 사용해 푼 문제를 여기서 한 번 더 풀어본다.

프로그래머스 0단계 배열회전시키기

문제이다.

 

 

💭

어떻게 풀까?

 

한 칸씩 이동하고 회전하고 .. 같은 설명을 덧붙이고 있지만 결국 정리해보자면,

 

1. direction === "right" 일 때

numbers 마지막 요소가 맨 앞으로 이동

1-2. direction === "left" 일 때

numbers 첫 번째 요소가 맨 뒤로 이동

 

로 이해했다.

여기서 ! 바로 방금 공부한 메서드들을 사용할 차례다.

 

첫 번째, 마지막 요소가 맨 앞으로 이동

- 마지막 요소를 제거하고, 변수에 저장한다. -> pop() 

- (마지막 요소가 할당된) 변수를 배열의 맨 앞에 추가한다. -> unshift()

 

두 번째, 첫 번째 요소가 맨 뒤로 이동

- 첫 번째 요소를 제거하고, 변수에 저장한다. -> shift()

- (첫 번째 요소가할당된) 변수를 배열의 맨 뒤에 추가한다. -> push()

 

놀랍게도 다 쓰인다 !

해결한 풀이법은 이러하다.

 

function solution(numbers, direction) {
	if (direction === "right") {
    	const last_num = numbers.pop();
        numbers.unshift(last_num);
    } else {
    	const first_num = numbers.shift();
        numbers.push(first_num);
    }
    
    return numbers;
}

 

짜라라 ~

 

 

---

 

 

마지막 정리

pop() : 배열의 마지막 요소 제거, 마지막 요소를 반환

shift() : 배열의 첫 번째 요소 제거, 첫 번째 요소를 반환

pop() <-> shift()

 

push() : 배열의 끝에 하나 이상의 요소 추가.

unshift() : 배열의 가장 앞에 하나 이상의 요소 추가.

push() <-> unshift()

 

 

사실 각각 이해는 했으나 안보면 서로서로 이게 저거고 저게 이거고 .. 이런식으로 헷갈리지만 ༎ຶ‿༎ຶ 

계속계속 쓰다보면 나아지리라 믿는다. 오늘도 파이팅 !