자바스크립트[기초] 배열 메소드 종류

Array 생성자 함수는 정적 메소드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메소드를 제공한다.

배열에는 원본 배열(배열 메소드를 호출한 배열, 즉 배열 메소드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메소드 와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메소드 가 있다 

---

원본 배열을 직접 변경 하는 메소드 

Array.prototype.push

• 인수로 전달 받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.

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

Array.prototype.pop

• 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
• 원본 배열이 빈 배열이면 undefined를 반환한다

const arr =[1,2];
// 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.pop();
console.log(result); // 2
console.log(arr);   // [1]

Array.prototype.unshift

• 인수로 전달 받은 모든 값을 원본 배열의 선두에 요소로  추가 하고 변경된 length 프로퍼티 값을 반환한다.
• 스프레드 문법을 사용하면 함수 호출 없이 표현식으로 선두에 요소를 추가할 수 있다 

const arr =[1,2];
// 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 값을 반환한다.
let result = arr.unshift(3,4);
console.log(result); // 4

//unshift 메소드는 원본 배열을 직접 변경한다.
console.log(arr); // [3,4,1,2]

// ES6에 추가된 스프레드 문법
const arr =[1,2];
const newArr = [3, ...arr];
console.log(newArr); // [3,1,2]

Array.prototype.shift

• 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. 
• 원본 배열이 빈 배열이면 undefined를 반환한다.
• shift 메서드와 push 메소드를 사용하면 큐를 쉽게 구현할 수 있다 (*큐 : 데이터를 마지막에 밀어 넣고,  처음 데이터 즉 가장 먼저 밀어 넣은 데이터를 먼저 꺼내는 선입 선출 방식의 자료 구조)

const arr = [1,2];
// 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.shift();
console.log(result); // 1
console.log(arr);   // [2]

Array.prototype.splice

• 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우에 사용한다.
• 총 3개의 매개 변수가 있다
  • start : 원본 배열의 요소를 제거하기 시작할 인덱스이다. [start 만 지정하면 모든 요소를 제거 | start가 음수인 경우 배열의 끝에서의 인덱스를 나타낸다 만약 start가 -1이면 마지막 요소를 가리키고 -n이면 마지막에서 n번째 요소를 가리킨다]  
  • deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수이다. deleteCount 가 0 인 경우 아무런 요소도 제거되지 않는다(필수가 아닌 옵션) 
  • items : 제거한 위치에 삽입할 요소들의 목록이다. 생략할 경우 원본 배열에서 요소들을 제거하기만 한다(필수가 아닌 옵션) 

const arr =[1,2,3,4];

// 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에서 새로운 요소 20,30을 삽입 한다
const result = arr.splice(1,2,20,30);
// 제거한 요소가 배열로 반환된다.
console.log(result); // [2,3]
// splice 메소드는 원본 배열을 직접 변경한다.
console.log(arr);   // [1,20,30,4]

Array.prototype.slice

• 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
• 총 2개의 매개변수를 갖는다
  • start : 복사를 시작할 인덱스이다. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 
  • end : 복사를 종료할 인덱스이다. 이 인덱스에 해당하는 요소는 복사되지 않는다. end는 생략 가능하며 생략 시 기본값은 length 프로퍼티 값이다.

const arr = [1,2,3];
// arr[0]부터 arr[1] 이전(arr[1] 미포함) 까지 복사하여 반환 한다.
arr.slice(0,1); // [1]
// arr[1]부터 arr[2] 이전(arr[2] 미포함) 까지 복사하여 반환 한다.
arr.slice(1,2); // [2]
// 원본은 변경되지 않는다.
console.log(arr); //[1,2,3]

Array.prototype.reverse

• 원본 배열의 순서를 반대로 뒤집는다.
• 반환 값은 변경된 배열이다.

const arr = [1,2,3];
const result = arr.reverse();
// reverse 메소드는 원본 배열을 직접 변경 한다.
console.log(arr); // [3,2,1]
// 반환값은 변경된 배열이다.
console.log(result); // [3,2,1]

Array.prototype.fill

• ES6에서 도입된 fill 메소드는 인수로 전달받은 값을 배열이 처음부터 끝까지 요소로 채운다
• 배열을 생성하면서 특정 값으로 요소를 채울 수 있다.
• 모든 요소를 하나의 값으로만 채울 수밖에 없다는 단점이 있다

const arr = [1,2,3];
// 인수로 전달받은 값 0을 배열의 처음부터 끝까지 요소로 채운다.
arr.fill(0);

// fill 메소드는 원본 배열을 직접 변경한다.
console.log(arr); //[0,0,0]

---

새로운 배열을 생성하여 반환하는 메소드 

Array.prototype.concat

• 인수로 전달된 값들(배열 또는 원시 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열을 요소로 추가한다.
• push , unshift 메소드는 concat 메소드로 대체 할 수 있다.

push, unshift  메소드는 원본 배열을 직접 변경하지만 concaat 메소드는 원본 배열을 변경 하지 않고 새로운 배열을 반환한다.
push, unshift  메소드를 사용할 경우 반드시 변수에 저장해놔야 하고 concat 메소드는 반환 값을 반드시 변수에 할당받아야 한다.

const result = arr.concat(3);
console.log(arr); // [1,2];
console.log(result); // [1,2,3];