[JS] 배열 메소드(Array Methods) :: slice(), splice()로 배열 자르기, concat()으로 배열 복사하기

배열 자르기

arr.splice(start, n)

배열의 start 인덱스부터 n개의 항목을 제거하는 함수

배열 내 특정 요소를 지우고 삭제 요소를 반환한다. (배열의 n번째 인덱스부터 m개 항목을 제거)

// arr.splice(n,m) -> 배열 내 특정 요소 지우고 삭제 요소 반환 (n번째부터 m개)
let arr = [1,2,3,4,5];
let result = arr.splice(1,2); // arr == [1,4,5] result == [2,3]

`splice()` 함수는 배열 중간에 새로운 요소를 삽입하는 용도로도 사용이 가능하다!

// arr == [1,2,3,4,5];
// arr.splice(n,m,x) -> 특정 요소 지우고 n자리부터 다른 요소 x 추가

arr.splice(1,3,100,200); // -> [1,100,200,5] 1번 인덱스부터 3개 지우고 100, 200 추가
arr.splice(1,0,100,200); // -> [1,100,200,2,3,4,5] 아무것도 안 지우고 100, 200 추가

 

arr.slice(start, end)

배열의 start부터 end-1 인덱스까지의 항목을 슬라이싱 하여 새로운 배열을 반환하는 함수.

기존의 오리지널 데이터(arr)에는 영향을 미치지 않는다.

// arr.slice(n,m) -> n부터 (m-1)까지 잘라서 반환
let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // [2, 3, 4]

배열 복사하기

javascript에서 배열을 복사하기 위해서는 `slice()` 나 `concat()` 을 사용할 수 있다.

이때 배열을 복사한다는 것은 기존 데이터에 영향을 미치지 않는 새로운 배열을 생성한다는 의미!

 

arr.slice()

앞서 본 `slice()` 메소드의 start와 end 인덱스를 따로 설정해주지 않으면 잘라낼 범위가 기본 값인 처음과 끝 인덱스로 설정되기 때문에 결과적으로 기존 배열의 값이 그대로 복사되어 반환된다.

// arr.slice(n, m) -> n부터 (m-1)까지 잘라서 반환
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(); // n,m에 아무 값도 안 넣으면 배열이 그대로 복사됨

// arr.concat(arr1, arr2, ...) -> 기존 배열에 새 값을 합쳐서 새로운 배열 반환

 

arr.concat()

`concat()`은 기존 배열에 여러 개의 배열을 합친 새로운 배열을 생성하여 반환하는 배열 병합 메소드다.

이때, 인자로 합칠 배열을 넘겨주지 않으면 기존 배열의 원소들만을 가진 새로운 배열이 그대로 반환된다.

// arr.concat(arr1, arr2, ...) -> 기존 배열에 새 값을 합쳐서 새로운 배열 반환
let arr1 = [1, 2];
let arr2 = [3, 4, 5];

console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5]
console.log(arr1.concat()); // [1, 2] => 배열 복사

`concat()`은 배열뿐만 아니라 여러 개의 문자열을 합치기 위한 문자열 메소드로도 사용할 수 있음!