Array. 추가 메서드 [ push, unshift, concat, splice ]

Array.prototype.push    // 원본 배열 마지막 요소에 추가
Array.prototype.unshift // 원본 배열 맨 앞 요소에 추가
Array.prototype.concat // 배열 마지막 요소에 추가, 새로운 배열 생성
Array.prototype.splice  // 원본 배열의 중간에 요소를 추가, 제거하는 경우

 

 

Array.prototype.push 

• push메서드는 인수로 전달받은 값을 원본 배열의 마지막 요소로 추가하고 변경된 length값을 반환
• 원본 배열을 직접 변경한다.

const arr = [1, 2];
let result = arr.push(3, 4);

console.log(result) // 4 push 결과값인 length프로퍼티 출력
console.log(arr)  // [1, 2, 3, 4], 원본배열 변경

 

Array.prototype.unshift

• unshift메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length프로퍼티 값을 반환
• 원본 배열을 직접 변경한다

const arr = [1, 2];
let result = arr.unshift(3, 4);

console.log(result) // 4, unshift결과값인 length프로퍼티 출력
console.log(arr) // [3, 4, 1, 2], 원본배열 변경

 

Array.prototype.concat 

• concat메서드는 인수로 전달된 값을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• 원본 배열은 변경되지 않는다.

  const arr1 = [1, 2];
  const arr2 = [3, 4];
  let result = arr1.concat(arr2);
  
  // result = concat의 결과값인 요소를 추가한 새로운 배열 결과값
  console.log(result)  //(4) [1, 2, 3, 4] 
  
  // 원본배열은 변경되지 않는다
  console.log(arr1, arr2) // [1, 2] [3, 4]

 

push, unshift, concat 세가지 배열 메서드는 배열에 요소를 추가하는 역할을 한다. 

push와 unshift메서드는 원본배열을 직접 변경하고 concat은 새로운 배열을 반환한다는 차이점이 있다. 

push와 unshift을 사용할 경우 원본배열을 반드시 변수에 따로 저장해 주어야 변경된 배열의 결과값을 확인할 수 있다.

concat은 새로운 배열을 반환하기 때문에 반환값을 변수에 할당받아야 결과값을 확인 할 수 있다.

 

 

Array.prototype.splice

• splice메서드는 원본 배열의 중간에 요소를 추가하거나 제거하는 경우에 사용한다.
• 3개의 매개변수가 있으며, 원본 배열을 직접 변경한다.
  1. start : 원본 배열의 요소를 제거하기 시작할 인덱스 ( -1이면 마지막 요소, -n이면 n번째 요소 )
  2. deleteCount : 원본 배열의 요소를 제거하기 시작하는 start부터 제거할 요소의 개수
  3. item : 제거한 위치에 삽입할 요소들의 목록, 생략할 경우 원본 배열에서 요소를 제거하기만 한다.

const arr1 = [1, 2, 3, 4];
let result = arr1.splice(0, 2, 10, 20);
                        // 매개변수 start: 0 / deleteCount: 2 / item: 10, 20 

// arr1에서 0번째 인덱스에서 2개의 배열 선택
console.log(result) // [1, 2]

// result의 배열 값을 10과 20으로 요소를 바꿔 arr1결과 출력
console.log(arr1)  // [10, 20, 3, 4]