[JS] 배열 관련 메서드 push pop shift splice

javascript 배열 관련 메서드 push pop

 

 

Array.prototype.pop()

 

기능

pop()  메서드는 배열에서 마지막 요소를 제거하여 그 값을 호출자(caller)에게 반환합니다.

 

문법

arr.pop()

 

반환값

배열에서 제거한 나머지 요소.
빈 배열의 경우 undefined 반환 .

 

예시

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop()); // "tomato"
console.log(plants); // Array ["broccoli", "cauliflower", "cabbage", "kale"]

 

 

 

 

Array.prototype.push()

 

기능

push()  메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
배열을 닮은 객체에 call() 또는 apply()로 사용될 수 있습니다. (예시 참고)
만약 length 속성이 숫자로 변환 될 수 없다면 인덱스는 0을 사용합니다.

 

문법

arr.push(element1[, ...[, elementN]])

 

매개변수

elementN : 배열의 끝에 추가할 요소.

 

반환값

호출한 배열의 새로운 length 속성.

 

예시

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');

console.log(count); // 4. 두 개를 추가하면 5
console.log(animals); // Array ["pigs", "goats", "sheep", "cows"]

 

여러 배열을 합치기 : 두 번째 배열의 모든 element를 push하기 위해 apply() 사용

var vegetables = ['설탕당근', '감자'];
var moreVegs = ['셀러리', '홍당무'];

Array.prototype.push.apply(vegetables, moreVegs);
console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무']

 

 

 

 

 

Array.prototype.shift()

 

기능

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
이 메서드는 배열의 길이를 변하게 합니다.

shift 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한 칸씩 앞으로 당기고 제거된 값을 반환 합니다. 만약 배열의 length가 0이라면 undefined를 리턴 합니다.

 

문법

arr.shift()

 

반환값

배열에서 제거한 요소.
빈 배열의 경우 undefined 를 반환합니다.

 

예시

const array1 = [1, 2, 3];
const firstElement = array1.shift();

console.log(array1);// Array [2, 3]
console.log(firstElement); // 1

 

배열에서 한 요소 제거하기

 

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('myFish before: ' + myFish);
// angel,clown,mandarin,surgeon"

var shifted = myFish.shift(); 

console.log('myFish after: ' + myFish); 
// clown,mandarin,surgeon" 

console.log('Removed this element: ' + shifted); 
// "angel"

 

shift() 메서드는 while 문의 조건으로 사용되기도 합니다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복됩니다.

 

var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John

 

 

 

 

 

 

Array.prototype.unshift()

 

기능

unshift() 메서드는 주어진 값인 새로운 요소를 배열 형태의 객체 시작점에 삽입하고, 새로운 길이를 반환합니다.
 

 

문법

arr.unshift([...elementN])

 

매개변수

메서드를 호출한 배열의 새로운 length 속성.

 

반환값

메서드를 호출한 배열의 새로운 length 속성.

 

예시

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));  // 5  
console.log(array1); //  Array [4, 5, 1, 2, 3]

 

 

 

 

 

 

 

Array.prototype.splice()

 

기능

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 

 

문법

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 

매개변수

start : 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.

deleteCount (옵션기능) : 배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

item1, item2, ... (옵션기능) : 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

 

반환값

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다. 만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라집니다.

 

예시

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');  // inserts at index 1
console.log(months); //Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May'); / replaces 1 element at index 4
console.log(months); / Array ["Jan", "Feb", "March", "April", "May"]

 

 

 

 

참고 : https://developer.mozilla.org/