[JS] 배열 - splice() , slice() 차이

🚀 splice()

- 배열 내에 새로운 요소의 추가 가능하다.

- 배열 내 특정 요소를 제거 할 수 있다.

- 원본 배열이 변경된다.

 

[사용법]

배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소)

 

만약 배열 내 새로운 요소를 추가만 하고싶다면 2번째 인덱스에 0을 사용하면 된다.

 

const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.splice(1, 0, 'bread')
cafe

//1번째 인덱스에 bread를 추가한 cafe 배열
//expected output: ['coffee', 'bread', 'cake', 'tea', 'cookie']

 

 

특정요소를 삭제하고 싶다면, 다음과 같이 사용하면 된다.

배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수)

const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.splice(1, 2)

cafe

//1번째 인덱스부터 2개를 삭제한다. 즉 cake과 tea가 삭제된다.
//expected output: ['coffee', 'cookie']

 

 

🚀 slice()

- 배열 일부분을 잘라서 새로운 배열을 반환한다.

- 원본을 변경하지 않고 원본 배열 요소의 얕은 복사를 반환한다.

 

배열.slice(잘라낼 배열의 시작인덱스, 잘라낼배열의 종료인덱스)

 

* 주의 : 종료인덱스-1 까지 잘라낸다. 즉, 종료인덱스 부분의 값은 잘라낼 배열에 포함되지 않는다.

 

 

const cafe = ['coffee', 'cake', 'tea', 'cookie']

cafe.slice(1, 3);
//1번째인덱스부터 2번째인덱스까지 잘라서 반환한다.
//expected output: ['cake', 'tea']


cafe.slice(2);
//2번째인덱스부터 끝까지 잘라서 반환한다. (종료인덱스 생략시 끝까지 반환)
//expected output: ['tea', 'cookie']


cafe.slice(-2, -1);
//맨오른쪽부터-1이라 생각하면 된다. -2: tea , -1 : cookie이다.
//하지만 종료인덱스는 포함하지 않으므로 tea만 출력한다.
//expected output: ['tea']


cafe.slice(0, -2);
//0번째인덱스부터 -2번째인덱스 전까지 잘라서 반환한다.
//expected output: ['coffee', 'cake']

 

* 주의 : 얕은 복사의 배열을 반환하기 때문에 따로 변수에 저장해놓아야한다.

 

[예시]

원본 배열은 변함이 없다는것을 알 수 있다.

 

 

 

---

 

 

❓ ❔그렇다면 splice()와 slice()의 차이점은 ❓ ❔

 

splice()는 원본배열을 변경하고 값을 추가할 수도 있지만,

slice()는 원본배열을 변경하지 않고 배열 일부분을 잘라낼수만 있다.