Quick JavaScript (7) Array 2

 

자바스크립트는 C\C++ 처럼 container 가 세분화되어 있지 않다.

예를 양방향으로 원소가 추가되고 빼낼 수 있는 deque 같은 자료구조가 따로 제공되지 않고 배열이 이를 대신한다.

시간과 관련된 성능 문제는 잘 모르겠고, 하여간 이런 사정으로 원소 추가와 제거 관련된 메서드만 해도 엄청 많다.

 

 

먼저 index 를 이용하여 제거하는 것부터 시작하자. 

1. delete 

 

'배열의 3 번째 항을 제거해줘!'

 

delete arr[3];

 

여기까진 쉽다. 기억해야할 것은 지금부터다.

 

delete 는 배열에서만 사용될까?

직전 글의 마지막에서 javascript 배열의 인덱스는 일종의 객체 속성임을 말했다.

이제는 짐작 가능하겠지만 delete 는 객체에서 속성을 제거할 때 사용되는 것이다.

또한 속성을 제거한 것이다 보니

 

arr[3]===undefined   // true

 

가 된다. 그럼 이 배열의 길이가 5로 유지되는 것은 이해가 될 것이다.

 3 번째 항을 제거했으니 4 번째 항이 당겨져서 3 번째항이 될 거라고 생각하면 안된다. 

그 용도로 쓰는 것은 뒤에서 소개된다.

 

 

2.  push( ) , pop( )

배열의 후방에서 원소을 추가, 추출하는 메서드이다.

'제거'가 아닌 '추출'이란 단어를 쓴 이유는 짐작가능할 것이다.

 

arr.pop();  // 4 

 

 

3. shift(), unshift()

 

shift 는 전방에서 원소를 추출하고 unshift 는 원소를 추가한다.

 

 

4. concat() 

두 배열을 합칠 때 쓴다. 두 배열을 arr1 과 arr2 라 하자.

 

arr1.concat(arr2);

 

ES6 에서 도입된 spread operator (python의 unpacking 과 유사)를 이용해서

 

arr1 = [ ... arr1 , ... arr2 ];

 

로 쓸 수도 있다. 길어지니까 하나만 더 하자.

 

 

5. slice( ) , splice( )

위에서 '추출' 은 제거할 값을 리턴값으로 사용함을 암시했었다.

자바스크립트는 웬만하면 뭔가 돌려준다.

 

slice 는 쉽다.

arr.slice(start, end);

는 start(포함) 에서 end(비포함) 까지를 추출한다. 설명 끝!

 

splice 는 자바스크립트를 통해서 알게 된 단어다.

실이나 로프를 이어 붙인다는 뜻으로 알고 있다.

따라서 뭔가 추가할 것 같지만, 추출하고 끼워넣는 능력이 있다.

 

const arr=[0,1,2,3,4];
arr.splice(2,1,'math');   // 2 가 출력된다. 꺼낸 값!

 

여기서 인자 2, 1, 'math' 는 index 2 에서 1 개를 추출하고 'math' 를 추가하라는 뜻이다. 만약 

 

arr.splice(2, 0, 'math');

 

였다면 어떨까? 제거되는 것이 없으니 2 번 앞에 'math' 를 추가하게 된다.

 

앞서 delete 는 속성을 제거하는 것이고 실제 길이는 줄이지 않는다고 했었다.

반면 splice 는 길이를 줄일 수 있다.

 

arr.splice(2, 1);

 

2 번 위치에서 1 개를 제거하고 추가하는 것은 없다는 뜻인데,

확인해보면 길이가 1 줄어들어 있을 것이다.