[js] 배열 원소 다루기 : delete & splice

delete

delete 연산자는 객체의 속성을 삭제한다.

구문

delete object.property;
delete object[propertyKey];
delete objectName[index];

objectName : 객체 이름

property : 객체에 존재하는 속성

propertyKey : 존재하는 속성을 가리키는 문자열이나 심볼

 

반환값

• delete 연산자로 삭제한 후 해당 속성에 접근할 경우 undefined 반환.
• 속성을 제거할 수 있는 경우에는 true를 반환하고, 제거할 수 없을 땐 false를 반환

예제

delete Math.PI; // false 반환 (설정 불가한 속성 삭제 불가)

const myObj = { h: 4 };
delete myobj.h; // true 반환

 

delete로 배열의 원소 삭제하기

기술적으로는 가능하나 이는 좋은 방법이 아니다. 배열의 속성을 제거해도 배열 길이 속성은 영향을 받지 않으며, 다른 요소의 인덱스도 그대로 남아다. 이걸 의도한다면 단순히 값을 undefined로 덮어쓰는 편이 훨씬 낫다. 실제로 배열을 변형하고자 하면 splice 사용을 권장한다.

 

Splice()

배열의 기존 요소를 삭제/교체. 또는 새 요소를 추가한다.

구문

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

매개변수

start : 배열의 변경을 시작할 인덱스.

• 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정된다.
• 음수인 경우 배열의 끝에서부터 요소를 센다. (-n이면 요소 끝의 n번째 요소를 가리킨다.)
• 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정된다.

deleteCount (Optional) : 배열에서 제거할 요소의 수

• deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제게헌다.
• deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다. 이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

item1, item2, <em>...</em> (Optional) : 배열에 추가할 요소.

• 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

반환 값 : 제거한 요소를 담은 배열.

• 하나의 요소만 제거한 경우 길이가 1인 배열을 반환.
• 아무 값도 제거하지 않았으면 빈 배열을 반환.

예제

하나도 제거하지 않고, 2번 인덱스에 "drum" 추가

var myArray = [0, 1, 2, 3];
var removed = myArray.splice(2, 0, "drum");
removde // [], no elements removed
myArray // [0, 1, "drum", 2, 3]

 

하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가

var myArray = [0, 1, 2, 3];
var removed = myArray.splice(2, 0, "drum", "guitar");
removde // [], no elements removed
myArray // [0, 1, "drum", "guitar", 2, 3]

 

3번 인덱스에서 한 개 요소 제거

var myArray = [0, 1, "drum", 3, 4];
var removed = myArray.splice(3, 1);
removde // [3]
myArray // [0, 1, "drum", 4]

 

2번 인덱스에서 (한 개 요소 제거하고 "trumpet" 추가)

var myArray = [0, 1, "drum", 3];
var removed = myArray.splice(2, 1, "trumpet");
removde // ["drum"]
myArray // [0, 1, "trumpet", 3]

* * 끝에 추가되는 게 아니라 2번 인덱스에서 행해진다는 점에 주의

0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가

var myArray = [0, 1, "trumpet", 3];
var removed = myArray.splice(0, 2, "parrot", "anemone", "blue");]
removde // [0, 1]
myArray // ["parrot", "anemone", "blue", "trumpet", 3

 

-2번 인덱스에서 한 개 요소 제거

var myArray = [0, 1, 2, 3];
var removed = myArray.splice(-2, 1);
removde // [2]
myArray // [0, 1, 3]

 

2번 인덱스를 포함해서 이후의 모든 요소 제거

var myArray = [0, 1, 2, 3];
var removed = myArray.splice(2);
myArray // [0, 1]