<자바스크립트> 배열 (1) 데큐, 추가, 삭제 메서드

 - 이번 장에서는 배열에서 사용하는 다양한 메서드들을 알아보자. 

 

1. 데큐 메서드

* 데큐 메서드

 - 자바스크립트는 데큐 자료구조형의 메서드를 기본적으로 제공한다.

 

 - arr.push(...items) - 마지막 요소 추가

 - arr.pop() - 마지막 요소 제거

 - arr.shift() - 처음 요소 제거

 - arr.unshift(...items) = 처음 요소 추가

 

2. 제거 메서드

* delete

 - 먼저 객체의 프로퍼티를 지우는 연산자 delete를 사용해보자.

 

let arr = ["HARRY", "IU", "SUZY"]
delete arr[1];
console.log(arr);

// ["HARRY", empty, "SUZY"]

 

 - delete는 원하는 요소를 지울 수 있다. 그러나 key를 이용해서 해당 값을 지우는 연산자인 만큼 빈공간이 유지되고 있다.

 

 - 우리는 배열의 길이도 자동으로 줄어들기를 바라지만 위 배열의 길이는 여전히 3이다.

 

* splice

 - splice메서드는 요소를 추가, 삭제, 교체까지 가능하게 해준다.

 

let arr = ["HARRY", "IU", "SUZY"];
arr.splice(1,1);
console.log(arr);

// ["HARRY", "SUZY"]

 

 - 첫 번째 매개변수는 인덱스를, 두 번째 매개변수는 제거갯수를 의미한다.

 

 - splice는 삭제된 요소로 구성된 배열을 반환하는 역할도 수행한다. 즉 위에서 arr.splice부분을 특정 변수에 할당한다면 ["IU"] 라는 배열을 가지게 될 것이다.

 

 - splice의 세 번째 매개변수로 새로운 요소를 추가할 수 있다.

 

let arr = ["HARRY", "SUZY"];
arr.splice(1, 0, "IU");
console.log(arr);

// ["HARRY", "IU", "SUZY"]

let arr2 = ["HARRY", "IU", "SUZY"];
arr.splice(-1, 0, 1,2,3);
console.log(arr);

// ["HARRY", "IU", 1, 2, 3, "SUZY"]

 

 - splice는 음수 인덱스도 사용할 수 있다.

 

* slice

 - slice는 원하는 부분의 요소들을 복사한 새로운 배열을 반환한다. 문자열에서도 유사하게 동작한다.

 

let arr =["HARRY", "IU", "SUZY", "JOHN"];
console.log(arr.slice(1,3) ); // ["IU", "SUZY"]
console.log(arr.slice(-2) ); // ["SUZY", "JOHN"]

 

 - 첫 번째 매개변수로 시작인덱스를 받으며, 두 번째 매개변수로 끝의 인덱스를 받는다. 끝의 인덱스를 지정하면 바로 앞까지 반환한다는 점에 유의하자. 

 

 - 두 번째 매개변수를 비워두면 기존 배열의 가장 끝까지 모두 반환한다.

 

 - slice메서드는 기존배열을 건드리지 않는다는 장점이 있다. 

 

3. 추가 메서드

* concat

 - concat메서드는 기존 배열의 요소를 사용해서 새로운 배열을 만들거나 배열에 요소를 추가한다.

 

let arr = ["HARRY", "IU"];
console.log( arr.concat(["SUZY","JOHN"],1, 2, [3, 4]) );
console.log(arr);
// ["HARRY", "IU", "SUZY", "JOHN", 1, 2, 3, 4]
// ["HARRY", "IU"]

 

 - concat은 기존배열에 속한 모든 요소와 인수로 받은 배열의 요소, 단순 값들을 모두 복사하여 반환한다.

 

 - 기존배열은 건드리지 않는다.

 

 

 - 다음 장에서는 반복, 탐색, 변형과 정렬의 메서드에 대해서 알아보자.

 

 

---

 

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼