[JS001 - 002] 배열의 삭제 + 추가, 교체

javascript의 배열을 다뤄보기!

• 기초적인 push / pop / shift / unshift
• 추가적으로 splice / slice / concat / delete를 알아보았다.
• slice와 concat을 제외한 이 곳에서 다룬 메소드는 원본 배열 데이터를 수정 및 조작하는 것이다. (⭐⭐⭐)

* 배열의 접근

• 순서는 항상 0부터 시작한다.
• -1이라면 배열 끝의 마지막 요소를 말한다.
• undefined를 주시하자.

var nums = [100, 200, 300, 400, 500];

---

1. push (추가) & pop (삭제)

=> 배열에 마지막 요소 1개를 추가하거나(push) 삭제(pop)한다.

push

nums.push(600);
// 반환값 6 (length를 반환)
// nums는 [100, 200, 300, 400, 500, 600]

pop

• 빈 배열에 pop을 하면 undefined가 반환된다!

nums.pop();
// 반환값 500 (삭제된 값)
// nums는 [100, 200, 300, 400]

---

2. unshift (추가) & shift (삭제)

=> 배열의 맨 앞에 요소 1개를 추가하거나(unshift) 삭제(shift)한다.

• shift : [동사] (장소를) 옮기다, 이동하다[되다]; 자세를 바꾸다

unshift

nums.unshift(600);
// 반환값 6 (length를 반환)
// nums는 [600, 100, 200, 300, 400, 500]

shift

nums.shift();
// 반환값 500 (삭제된 값)
// nums는 [200, 300, 400, 500]

---

3. splice

=> 배열의 원하는 위치(index)에 원하는 개수만큼 요소(들)를 추가 / 삭제 / 교체를 할 수 있다.

• 최소 하나의 parameter를 받는다.
• 세번째 param에는 요소와 더불어, 배열 또는 객체도 가능하다.

(start, deleteCount (Optional), item1, item2, ... (Optional)

splice를 이용한 *삭제

nums.splice(3);
// 반환값 [400, 500]
// nums는 [100, 200, 300]

nums.splice(3, 2);
// 반환값 [400, 500]
// nums는 [100, 200, 300]

splice를 이용한 *추가 (삽입)

nums.splice(2, 0 , 250, 280);
// 반환값 [] (**그냥 배열 대괄호가 나온다!)
// nums는 [100, 200, 250, 280, 300, 400, 500]

splice를 이용한 *교체

nums.splice(2, 2 , 1000);
// 사라지는 요소인, index 2부터 2개의 요소들을 반환한다.
// 반환값 [300, 400]
// nums는 [100, 200, 1000, 500]

---

4. delete

=> delete라는 js operator로도 요소를 삭제할 수 있으나, array에 undefined hole이 생기므로, pop이나 shift를 사용하자.
(그러니까, 이런게 있다~ 라는 걸 알면 되겠다.)

delete nums[0];
// nums는 [undefined, 200, 300, 400, 500]

---

5. slice와 concat

=> slice는 글자 그대로 원본 배열에서 자르는 메소드이고, concat은 concatenate의 줄임으로 원본 배열에서 merge(병합)하는 메소드이다.
왜 둘이 묶었냐면, 둘 다 반환값을(연산한 배열) '새로운 배열'을 반환한다.
nums에 slice또는 concat을 연산한 값은 nums의 요소가 버무려진 어떤 새로운 배열이라는것

---

6. shift와 splice 비교

The best way to remove the first element of an array in Javascript — shift() vs splice()
splice로 앞/뒤 상관없이 추가, 삭제, 교체가 가능한데, 여기저기 splice를 써도 되지 않을까? 싶기도 하지만,당연히 절대적으로 '좋은'것은 없을거라는 생각이 든다. 위 블로그에서 발췌한 내용을 참고해보자!

배열 첫번째 요소를 삭제하는 shift()는 같은 행위를 하는 splice()의 10%나 적은 시간이 소요된다.
ECMAScript specifications에 따르면 다음과 같다. (블로그 번역, 오역 있을수 있음)

shift()

1. firstItem을 array\[0\]으로 설정
2. 모든 다음 요소들(array\[1\], array\[2\], …)의 index는 1씩 줄어든다. array\[1\]은 array\[0\]로, array\[2\]는 array\[1\]과 같이
3. 배열의 마지막 요소를 삭제한다. array\[length — 1\]
4. firstItem를 반환

splice()

1. 표현식 new Array()로 새로운 배열인 A를 생성
2. A[0]는 array[0]으로 설정
3. 모든 다음 요소들(array\[1\], array\[2\], …)의 index는 1씩 줄어든다. array\[1\]은 array\[0\]로, array\[2\]는 array\[1\]과 같이
4. 배열의 마지막 요소를 삭제한다. array\[length — 1\]
5. 배열 A를 반환

두 메서드의 차이점은, 1 & 2 단계에서 차이가 생긴다. splice의 경우 새 배열을 만들고 첫 번째 요소를 채운다.
이전에 존재하지 않던 0번째 요소를 만들어야 하기 때문에, 이 instantiation화 & 정의는 shift보다 계산 비용이 올라간다.

위 블로그의 필자는 첫번째 요소 1개를 삭제해야 한다면 shift가 훠~얼씬 성능이 뛰어나기 때문에 적절한 사용을 추천한다.
불필요한 배열 instance화를 피한다면, splice는 삽입 및 다중 추출과 같은 복합 작업이 필요한 경우에 적절한 강력한 메서드라고 강조한다.

---

참고문서
JS100제
MDN
w3schools