자바스크립트 기초: .push, .pop, .shift 및 .unshift를 사용하여 배열 조작하기

Javascript에서 가장 먼저 배울 것 중 하나는 가장 기본적인 수준에서 배열을 사용하고 조작하는 방법입니다. 이 기사에서는 사용할 네 가지 방법에 대해 빠르게 설명합니다.

1. 푸시

배열의 끝에 무언가를 추가하고 싶을 때 .push를 사용합니다. 이 방법을 사용하면 배열 끝에 하나 이상의 항목을 추가할 수 있습니다. push 메서드는 배열의 새 길이를 반환합니다.

배열 끝에 하나의 항목 추가

let numbers = [1,2,3,4]
numbers.push(5)

console.log(numbers) // [1,2,3,4,5] 

배열 끝에 하나 이상의 항목 추가

let numbers = [1,2,3,4]
numbers.push(5,6,7,8)

console.log(numbers) // [1,2,3,4,5,6,7,8]

.push 반환 값 사용

let letters = ["a","b","c","d"]
console.log(letters.length) // 4

let newLength = letters.push("e")
console.log(newLength) // 5
console.log(letters) // ["a","b","c","d", "e"]
console.log(letters.length) // 5

2. 팝

배열의 끝에서 무언가를 제거하고 싶을 때 .pop을 사용합니다. .pop 메서드는 제거된 항목을 반환합니다. 배열이 비어 있으면 undefined를 반환합니다.

let fruits = ["🍏", "🍊", "🍌"]

fruits.pop() // "🍌"
console.log(fruits) // ["🍏", "🍊"]

fruits.pop() // "🍊"
console.log(fruits) // ["🍏"]

fruits.pop() // "🍏"
console.log(fruits) // []

fruits.pop() // undefined
console.log(fruits) // []

3. 이동 해제

배열의 시작 부분에 무언가를 추가하고 싶을 때 .unshift를 사용합니다. 이 방법을 사용하면 배열의 시작 부분에 하나 이상의 항목을 추가할 수 있습니다. .unshift 메서드는 배열의 새 길이를 반환합니다.

배열의 시작 부분에 하나의 항목 추가

let numbers = [2,3,4]
numbers.unshift(1)

console.log(numbers) // [1,2,3,4] 

배열의 시작 부분에 둘 이상의 항목 추가

let numbers = [4,5,6,7,8]
numbers.unshift(1,2,3)

console.log(numbers) // [1,2,3,4,5,6,7,8]

.unshift 반환 값 사용

let letters = ["b","c","d","e"]
console.log(letters.length) // 4

let newLength = letters.unshift("a")
console.log(newLength) // 5
console.log(letters) // ["a","b","c","d", "e"]
console.log(letters.length) // 5

4. 시프트

배열의 시작 부분에서 무언가를 제거하고 싶을 때 .shift를 사용합니다. .shift 메서드는 제거된 항목을 반환합니다. 배열이 비어 있으면 undefined를 반환합니다.

let fruits = ["🍏", "🍊", "🍌"]

fruits.shift() // "🍏"
console.log(fruits) // ["🍊", "🍌"]

fruits.shift() // "🍊"
console.log(fruits) // ["🍌"]

fruits.shift() // "🍌"
console.log(fruits) // []

fruits.shift() // undefined
console.log(fruits) // []

이것들은 Javascript에서 배열을 조작할 때 사용할 수 있는 기본 배열 방법 중 4개에 불과합니다. 더 많은 배열 방법은 MDN을 참조하십시오.

항상 그렇듯이 자세한 내용은 MDN을 참조하세요.
.푸시: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
.팝: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
.unshift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
.시프트: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

질문, 피드백(좋든 나쁘든)에 대해 언제든지 내 소셜에 연락하거나 연결/인사하기 👋.