JavaScript 배열 방법 - Shift, Unshift, Push 및 Pop

👋 여러분 와섭 여러분 또 저에요! 내 게시물에 이모티콘을 추가하는 방법을 배웠으니 이제 과도하게 사용하지 않는 방법을 배워야 합니다...

오늘은 "SUPP"라는 두문자어를 부여한 4가지 JavaScript(JS) 배열 메서드에 대해 이야기하겠습니다. 네 가지 방법은 .shift() , .unshift() , .push() 및 .pop() 입니다.

이 네 가지 방법은 비교적 짧기 때문에 금방 익힐 수 있습니다. 네 가지 방법 모두 어레이의 시작 또는 끝에서 어레이를 수정하는 데 사용됩니다.

참고: 이러한 메서드는 .call() 또는 .apply() 를 사용하여 배열과 같은 객체에 사용할 수 있습니다. 배열과 배열과 같은 객체(😵)의 차이점에 대한 정보는 여기Stack Overflow Question를 확인하십시오.

Array.prototype.shift()

.shift() 메서드는 배열의 첫 번째 요소, 즉 0번째 인덱스 요소를 제거하고 반환합니다. 이 방법은 배열을 변경하고 길이는 ...1 만큼 줄어듭니다. 이동된 요소로 작업을 수행하려는 경우 변수를 할당할 수 있습니다.

Array.prototype.unshift()

.unshift() 메서드를 사용하면 배열의 시작 부분에 요소를 추가할 수 있으며 호출자에게 배열의 새 길이를 반환합니다.

예시 -

const rainbowColors = ["red", "orange", 
"yellow", "green", "blue", "indigo", 
"violet"];

// Shift Example

const shiftedElement = rainbowColors.shift();

console.log(shiftedElement + " was removed"); 
// "red was removed"
console.log(rainbowColors); 
// ["orange", "yellow", "green", "blue", "indigo", "violet"]

// Unshift Example

const newRed = "bright red";
const newLength = rainbowColors.unshift(newRed, "light orange");

console.log(newLength); // 8
console.log(rainbowColors); 
// ["bright red","light orange","orange", "yellow", "green", "blue", "indigo", "violet"]

Array.prototype.pop()

.pop() 메서드는 배열 끝에 있는 요소를 제거하고 반환합니다. 제거된 요소를 나중에 사용하려면 변수로 저장하면 됩니다.

Array.prototype.push()

.push() 메서드를 사용하면 배열 끝에 요소를 추가할 수 있으며 배열의 새 길이를 반환합니다.

예 - (배열형 객체에 대한 예를 보여드리겠습니다.)

// function that returns arguments
function getArguments() {
  return arguments;
}

const passedArguments = getArguments("one", "two", "three", "four" );

// calling .pop() on an Array-like Object

const poppedElement = Array.prototype.pop.call(passedArguments)
console.log(poppedElement); // "four"


// calling .push() on an Array-like Object

console.log(Array.prototype.push.call(passedArguments, "five", "six")); // 5

JS에는 함수에 전달된 인수를 포함하는 배열과 같은 객체인 내장 객체arguments가 있습니다. 객체에 배열 메서드를 직접 사용할 수 없으므로 .call()를 사용하고 위의 예에서와 같이 배열과 같은 객체를 첫 번째 인수로 전달해야 합니다. 또는 Array-like Object에서 배열을 만들고 배열 메서드를 직접 호출할 수 있습니다. 다음에는 배열 생성/변경에 대한 강의를 할 것 같습니다.

요약

SUPP는 배열(또는 배열과 같은 객체)의 시작 또는 끝에 요소를 추가/제거하려는 경우 매우 유용하므로 학습할 때 반드시 연습하십시오. 😁

자세한 내용과 더 많은 예제는 MDN Web Doc에서 언제든지 설명서를 참조할 수 있습니다.
읽어주셔서 감사합니다. 의견/의견이 있으시면 알려주세요.