slice함수와 splice 함수

윤지섭·2023년 8월 30일

배열을 관리할때 특정 index의 값을 얻거나 그 값을 삭제하고 싶을때가 있다.
그 때에 slice나 splice를 활용할 수 있다.

slice 함수

1.인자 1개일때

인자에 양수를 넣었을때

slice 함수는 먼저 인자 하나를 넣는다면 넣은 인자의 index값부터 끝index 값까지 복사하여 받는다.

var arr = [0,1,2,3,4,5];

var result=arr.slice(3);

console.log(result);

>[3,4,5]

3번 index(시작 인덱스가 0)의 3부터 마지막index의 5까지의 값이 복사되어 배열로 반환된다

인자에 음수를 넣었을때

음수를 인자에넣으면 뒤에서부터 index의 절대값번째의 수를 반환한다

var arr = [0,1,2,3,4,5];

var result=arr.slice(-1);

console.log(result);

>[5]

2.인자가 2개일때

slice에 인자를 두개 넣어준다면 첫번째 인자의 index부터 두번째 인자의 index바로 전까지의 값을 복사하여 배열 형태로 받는다

인자가 양수일때

var arr = [0,1,2,3,4,5];

var result=arr.slice(3,5);

console.log(result);

>[3,4]

3번 index(시작 인덱스가 0)의 3부터 마지막index의 5의 바로전 index의 4까지의 값이 복사되어 배열로 반환된다

인자가 음수일때

var arr = [0,1,2,3,4,5];

var result=arr.slice(-3,-1);

console.log(result);

>[3,4]

뒤에서 3번째 index부터 뒤에서 첫번째 index바로 전까지를 출력

3.slice후

이때 중요한점은 slice함수를 사용한뒤에 본 배열 arr에 변화는 없다

var arr = [0,1,2,3,4,5];

var result=arr.slice(3,5);

console.log(arr);

>[0,1,2,3,4,5]

나는 특정 인덱스들의 값을 얻고 그 값을 삭제하고 싶다면 어떻게 할까 바로 splice 함수를 이용해야 한다.

splice함수

splice함수는 배열의 특정 인덱스부터 원하는 갯수의 인덱스를 배열 형태로 반환하고 그 부분을 삭제한다

1.인자가 1개일때

slice처럼 인자의 index부터 끝 index까지의 수를 반환한다

인자가 양수일때

var arr = [0, 1, 2, 3, 4, 5];

var result = arr.splice(3);

console.log(result);

>[3,4,5]

slice처럼 3번 index부터 마지막index까지의 값을 배열형태로

인자가 음수일때

var arr = [0, 1, 2, 3, 4, 5];

var result = arr.splice(-2);

console.log(result);

>[4,5]

뒤에서 두번째부터의 수를 반환

2.인자가 2개일때

첫번째 인자의 index부터 두번째 index의 갯수 만큼의 수를 배열 형태로 반환한다

var arr = [0, 1, 2, 3, 4, 5];

var result = arr.splice(2,3);

console.log(result);

>[2,3,4]

index 2번부터 3개의수인 [2,3,4]를 반환한다

3.splice 후

splice 함수를 실행하고나면 그 부분을 반환받고난 부분은 본 배열에서 삭제된다

var arr = [0, 1, 2, 3, 4, 5];

var result = arr.splice(2,3);

console.log(result);

>[2,3,4]

console.log(arr);

>[0,1,5]

4.splcie 인자가 3개 이상일때

인자가 2개일때 처럼 첫번째 인자의 index부터 두번째 index의 갯수 만큼의 수를 배열 형태로 반환하고 3번째 부터의 인자들을 본배열에 추가한다

var arr = [0, 1, 2, 3, 4, 5];

var result = arr.splice(2,3,6,7);

console.log(result);

>[2,3,4]

console.log(arr);

>[0,6,7,1,5]

결과를 확인해보면 2번index부터의 3개의 수를 반환받으며 삭제하고 그자리에 6,7이 삽입된 것을 확인할 수 있다.

마치며

slice는 배열의 특정index값만을 원할때 사용하고 splice는 특정index부터의 값을 얻고 그부분을 배열에서 제거하고 싶을때 사용하면 좋을것 같다.

profile
개발자를 꿈꾸는 사람

0개의 댓글