Web Dev/JavaScript :: 자바스크립트

[Javascript] 자바스크립트 splice()

HJPlumtree 2020. 3. 22. 23:04

MDN을 참고 했습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

splice()는 배열의 값을 지우거나, 바꾸꺼나 새로 추가할 수 있습니다.

slice()와 달리 splice()는 원본 배열의 바꾼다.

 

splice() 사용방법

months 라는 배열이 있습니다.

const months = ['Jan', 'March', 'April', 'June'];

 

splice()에 1개면 입력할 때

months.splice(2);

이렇게 1개면 입력하면 months[2] 즉 배열 months의 세번째 인덱스부터 뒤의 값을 싹 지웁니다.

(배열의 인덱스는 0부터 시작)

console.log(months);

> ["Jan", "March"]

로그를 해주면 남는 값 'Jan' 그리고 'March' 만 남는거죠

 

 

만약 이렇게 로그해주면 어떤 값이 나올까요?

console.log(months.splice(2));

 

헷깔리지 말아야 할 것이 지금 이건 month를 로그해주는게 아니라

배열 months 의 splice(2) 즉 뒤의 잘나낸 값을 로그해주는 겁니다

> ["April", "June"]

이렇게 나오는거죠.

이렇게 한번 이해되면 쉽습니다.

 

splice() 2자리 입력할 때

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 2);
console.log(months);

splice에 2 와 0을 콤마로 구분해서 넣어줬습니다.

이 말은 months[1] 즉 1번째 인덱스에서 2개 만큼 없애겠다 입니다.

 

그럼 값이 예상가죠?

> ["Jan", "June"]

그쵸~

 

 

splice() 완결판 3자리 입력할 때

앞의 내용이 이해되면 이제 쉬워요.

마지막 3번째 까지 입력되면 '추가'를 하겠다는 말이에요

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);

무슨 뜻일까요?

 

...

 

풀어 말하면

배열 months의 2번째(인덱스가 1니까)에 0만큼 없애고, 그 자리에 'Feb'를 추가하자

라는 말입니다.

splice 두번재 값에 0을 넣으면 아무것도 사라지지 않죠.

> ["Jan", "Feb", "March", "April", "June"]

 

모든 값이 살고, 새로운 'Feb'가 들어와서

모두 행복하게 살았답니다는 결말로 splice() 끝!