[JS] 자바스크립트 배열 push(), pop(), shift(), splice()

목차

Array는 JavaScript 객체의 어떠한 데이터를 순차적으로 저장하거나 조회하는데 유용하게 사용된다.

배열의 기초

var arr = ['a', 'b', 'c'];

 

var arr = [1, 2, 3];

// 배열 요소에 접근하기
arr[0];  // 1
arr[2];  // 3

// 배열 요소의 개수 확인하기
arr.length  // 3

// 마지막 요소에 접근
arr[arr.length - 1]; //=> 3

 

배열의 요소에 새로운 값을 할당하기 위해서는 대입 연산자를 이용해 배열의 요소에 새로운 값을 할당할 수 있다.

arr[2] = 4;
console.log(arr);  // [ 1, 2, 4 ]

 

배열의 메서드

손쉽게 배열을 조작할 수 있도록 다양한 메서드를 제공한다.

Array 메서드

Array.from()

유사 배열 혹은 반복가능한 객체로부터 새 Array 인스턴스를 만듭니다.

Array.from(arrayLike[, mapFn[, thisArg]])

이 메서드를 이용하면 함수의 arguments를 배열로 손쉽게 변경할 수 있습니다.

Array.isArray()

인자로 전달받은 객체가 배열이면 true, 그렇지 않으면 false를 리턴하여 해당 객체가 배열인지 확인 합니다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false

 

원본 배열을 수정하는 메서드

아래의 메서드들은 원본 배열을 바로 수정하는 메서드들 입니다. 따라서 사용에 주의해야 하며, 원본 데이터의 변경 없이 배열 조작의 결과값이 필요할 경우에는 다른 메서드들을 사용해야 합니다.

배열 요소 추가 제거 메서드 - push, pop, unshift, shift

배열의 처음 혹은 마지막에 요소를 추가하거나 제거하는 메서드

• push 메서드 : 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• pop 메서드 : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환
• unshift 메서드 : 배열의 첫 번째 자리에 새로운 요소를 추가한 후, 변경된 배열의 길이를 반환
• shift 메서드 : 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환

var arr = [1, 2, 3];

// 배열의 마지막 요소 제거, 제거된 요소 리턴
arr.pop();  // 3

// 배열 마지막에 요소 추가, 배열의 크기 리턴
arr.push("new");  // 3
console.log(arr);  //-> [ 1, 2, 'new' ]

// 배열의 첫번째 요소 제거, 제거된 요소 리턴
arr.shift();  // 1

// 배열의 처음에 요소 추가, 배열의 크기 리턴
arr.unshift("new");  // 3
console.log(arr);  //-> [ 'new', 2, 'new' ]

 

splice 메서드 - 배열 요소 추가 삭제

Array.prototype.splice() 메서드는 배열의 특정 위치에 배열 요소를 추가하거나 삭제하는데 사용한다.

array.splice("시작위치", "제거건수")

splice 함수는 원하는 위치에서 하나 이상의 요소를 제거 할 수 있다.

 

array.splice("시작위치", "제거건수", ["요소1", "요소2" ... ])

splice 함수는 요소를 제거 후 해당 위치에 새로운 요소를 추가할 수 있다.

 

리턴값은 삭제한 배열 요소이다.

삭제한 요소가 없더라도 빈 배열을 반환한다.

 

splice 예제 1

/* 배열 임의의 위치에 요소 추가 제거 */
// start - 수정할 배열 요소의 인덱스
// deleteCount - 삭제할 요소 개수, 제거하지 않을 경우 0
// el - 배열에 추가될 요소
arr.splice(start, deleteCount, el);

var arr = [1, 5, 7];
arr.splice(1, 0, 2, 3, 4);  // [], arr: [1, 2, 3, 4, 5, 7]
arr.splice(1, 2);           // [2, 3], arr: [1, 4, 5, 7]

splice 예제 2

var arr = ['a', 'b', 'c', 'e', 'f'];

// arr = ['a', 'b', 'e', 'f']
arr.splice(2, 1); // index 2 부터 1개의 요소('c')를 제거

// arr = ['a', 'f']
arr.splice(1, 2); // index 1 부터 2개의 요소('b', 'e')를 제거

// arr = ['a']
removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음

// removed = 'f'