Array 함수 #3. 배열에 원소 추가,삭제

1. slice

 

특정 배열을 start 인덱스부터 end 인덱스까지 잘라서 새로운 배열에 넣어 리턴하는 함수다.

 

함수의 반환 값은 잘라낸 원소들로 이뤄진 새 배열이다.

 

함수 자체는 두 개의 파라미터를 받는 간단한 형태인데

 

두 파라미터를 어떻게 넣는지에 따라 아주 다양하게 결과가 나오기 때문에 주의가 필요하다.

 

start와 end 주의점

• 배열의 인덱스를 벗어나는 수를 입력해도 에러가 발생하지는 않음
• 양수인 경우, 배열의 앞에서부터 인덱스를 의미함
• 음수인 경우, 배열의 뒤에서부터 세는 인덱스를 의미함
• 양수이면서 그 절대값이 배열의 길이 이상인 경우, 배열의 길이와 같은 인덱스를 의미함
• 음수이면서 그 절대값이 배열의 길이 이상인 경우, 0을 의미함
• start가 undefined인 경우, 0을 의미함
• end를 지정하지 않을 경우, 배열의 길이와 같은 인덱스를 의미함
• start 인덱스에 있는 원소는 포함하고, end 인덱스의 원소는 포함하지 않음

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr1 = arr.slice(3, 5);         // [4, 5]
let arr2 = arr.slice(4);            // [5, 6, 7, 8, 9, 10]
let arr3 = arr.slice(10);           // []
let arr4 = arr.slice(-3);           // [8, 9, 10]
let arr5 = arr.slice(-3, 9);        // [8, 9]
let arr6 = arr.slice(5, -4);        // [6]
let arr7 = arr.slice(2, 15);        // [3, 4, 5, 6, 7, 8, 9, 10]
let arr8 = arr.slice(undefined);    // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let arr9 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5]

 

 

 

2. splice

 

 

특정 배열에서 원소들을 삭제하는 slice의 기능을 포함하면서

 

잘려나간 원소가 있던 인덱스에 새 원소들을 추가할 수 기능이 추가된 함수다.

 

start는 잘라낼 인덱스, deleteCount는 잘라낼 원소 개수, items(생략 가능)는 추가할 원소들을 의미한다.

 

start에 들어가는 수는 slice에서 정리했던 특징을 그대로 따라간다. (음수와 배열 길이 이상인 경우에 대한 예외처리)

 

함수의 반환값은 잘라낸 원소들의 배열이다. 그리고 원본 배열에서 직접 원소들을 잘라낸다.

 

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr1 = arr.splice(3, 2, 0, 0);
console.log(arr);       // [1,2,3,0,0,6,7,8,9,10]
console.log(arr1);      // [4,5]

 

 

 

3. push/pop과 unshift/shift

 

let arr = [1,2,3,4];
let result1 = arr.push(-1);         // arr = [1,2,3,4,-1], result1 = 5
let result2 = arr.pop();            // arr = [1,2,3,4], result2 = -1
let result3 = arr.unshift(-1,0);    // arr = [-1,0,1,2,3,4], result3 = 6
let result4 = arr.shift();          // arr = [0,1,2,3,4], result4 = -1

• push : 배열의 맨 끝에 새 원소 추가. 리턴 값은 수정 후 배열의 길이
• pop : 배열의 맨 끝에서 원소 삭제. 리턴값은 삭제한 원소
• unshift : 배열의 맨 앞에 새 원소 추가. 리턴 값은 수정 후 배열의 길이
• shift : 배열의 맨 앞에서 원소 삭제. 리턴값은 삭제한 원소

 

 

 

4. concat

 

let arr1 = [1,2,3,4];
let arr2 = [5,6,7,8];
let arr3 = arr1.concat(arr2);   // arr3 = [1,2,3,4,5,6,7,8]

concat은 함수를 실행하는 배열의 끝에 다른 배열을 이어 붙인 뒤 새로운 배열을 리턴한다.

 

let arr = [1,2,3];
let arr1 = arr.concat(4,5,6);  // arr = [1,2,3], arr1 = [1,2,3,4,5,6]
let arr2 = arr.push(4,5,6);    // arr = [1,2,3,4,5,6], arr2 = 6

concat은 꼭 배열만을 붙일 수 있는건 아니다. 인자로 받은 원소 여러 개를 배열로 묶어서 붙여준다.

 

원소 낱개와 배열 낱개를 섞어서 붙일 수도 있다.

 

이 경우 concat의 형태는 push와 비슷한데 그 결과는 아예 다르다.

 

concat은 원본 배열을 수정하지 않고 새 배열을 리턴하고, push는 원본 배열을 수정하고 원본 배열의 길이를 리턴한다.

 

다차원 배열을 1차원 배열로 변환하는 것을 flatten 이라고 하는데, concat이 대표적으로 사용된다.

 

 

 

5. spread operator(... 연산자)

 

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [arr1, arr2];        // [[1,2,3],[4,5,6]]
let arr4 = [...arr1, ...arr2];  // [1,2,3,4,5,6]

concat 함수 말고 여러 배열을 합치는 방법으로는 spread operator가 있다.

 

spread operator는 배열을 분해해서 개별 원소들로 만들어준다.

 

원소의 나열이면서 배열 형태는 아닌 그런 개념.

 

arr3은 2차원 배열이 돼었지만 arr4는 1차원 배열로 합쳐진 결과를 확인할 수 있다.

 

concat과 차이점은, 반복문을 사용해서 다차원 배열의 모든 원소를 합칠 수 없다는 점이 있다.

 

 

 

6. 타입이 다른 원소 삽입

 

let arr = [0,1,2,3,4];
arr.splice(1,3,'a');
arr.push('b','c');
arr.concat(4,5,'d');

타입 스크립트에서 위와 같이 코드를 작성하면 신텍스 에러가 발생하고, 같은 코드가 자바 스크립트에서는 통과된다.

 

arr을 선언할 때 타입을 생략하면, 타입 스크립트는 배열의 값들을 추론해서 arr 타입을 암시적으로 강제 선언한다.

 

let arr:any = [0,1,2,3,4];
arr.splice(1,3,'a');
arr.push('b','c');
arr.concat(4,5,'d');

이 경우 타입 스크립트의 추론이 일어나지 않게 arr을 명시적으로 any 타입으로 선언하면 에러가 사라진다.