내쓸내정(내가 쓸 거 내가 정리한다) 시리즈의 시작
자바스크립트로 코딩을 하다 보면 항상 배열 또는 문자열을 자르고 붙이는 일이 자주 생깁니다. 특히 배열이나 문자열을 자를 때는 slice 함수와 splice 함수는 항상 헷갈리게 되죠. paramete에 넣는 게 시작이 먼저인지 끝이 먼저인지, 반환 값이 배열인지 원래 배열을 수정하는 건지 매번 찾아보다 지쳐서 그냥 정리하게 되었습니다.
남들도 많이 포스팅해서 차고 넘치지만 내가 쓸 거 내가 정리한다 시리즈 1탄.
slice() vs splice()
▶ slice
▷ array.slice([begin[, end]])
☆ 반환 값 : 새로운 배열, 기존의 배열의 값을 수정하지 않는다.
① begin : 어디서부터 자를지 시작점을 정한다. 인덱스 값이다.
let arr = [1, 2, 3, 4, 5]- 0일 경우 : 시작점부터 잘라 가져온다.
let result = arr.slice(0) //result : [1, 2, 3, 4, 5]- 양수일 경우 : 인덱스(start값의 자리에 있는 배열 값)를 포함하고 값을 가져온다.
let result = arr.slice(2) //result : [3, 4, 5]- 음수일 경우 : 배열의 마지막 값이 (-1)이다. (-2) 일 경우 배열의 마지막 두 개의 값을 잘라서 가져온다.
let result = arr.slice(-2) //result : [4, 5]- undefined인 경우 : 0일 경우와 같다.
let result = arr.slice(undefined) //result : [1, 2, 3, 4, 5]- 배열의 길이보다 숫자가 큰 경우 : 빈 배열을 반환한다.
let result = arr.slice(9 //result : []
② end : 어디까지 자를지 정한다. 인덱스 값이다. 생략이 가능하다. 생략할 경우 시작점부터 배열의 마지막까지 가져온다.
- 0일 경우 : 시작점이 어디든 빈 배열을 반환한다.
let result1 = arr.slice(1, 0) //result1 : []
let result2 = arr.slice(-1, 0) //result2 : []
let result3 = arr.slice(0, 0) //result3 : []
let result4 = arr.slice(10, 0) //result4 : []
let result5 = arr.slice(undefined, 0) //result5 : []- 양수일 경우 : begin 인덱스 값은 포함, end 인덱스(end값의 자리에 있는 배열 값) 값은 제외하고 가져온다.
let result1 = arr.slice(0, 2) //result1 : [1, 2]
let result2 = arr.slice(undefined, 2) //result2 : [1, 2]
let result3 = arr.slice(-3, 5) //result3 : [3, 4, 5]
let result4 = arr.slice(-3, 1) //result4 : []
//result4의 경우 begin 인덱스의 위치보다 end 인덱스의 위치가 더 앞(왼쪽, 작은값)이라서 빈 배열 반환- 음수일 경우 : (-2)일 경우 배열의 마지막 두 개의 값을 잘라서 버리고 나머지만 가져온다.
let result1 = arr.slice(0, -2) //result1 : [1, 2, 3]
let result2 = arr.slice(undefined, -2) //result2 : [1, 2, 3]
let result3 = arr.slice(-3, -5) //result3 : []
//result3의 경우 begin 인덱스의 위치보다 end 인덱스의 위치가 더 앞(왼쪽, 작은값)이라서 빈 배열 반환
let result4 = arr.slice(-3, 1) //result4 : [3, 4]- undefined인 경우 : 배열의 시작점부터 마지막 값까지 포함해서 가져온다.
let result1 = arr.slice(0, undefined) //result1 : [1, 2, 3, 4, 5]
let result2 = arr.slice(undefined, undefined) //result2 : [1, 2, 3, 4, 5]
let result3 = arr.slice(-3, undefined) //result3 : [3, 4, 5]- 배열의 길이보다 숫자가 큰 경우 : undefined일 경우와 같다.
let result1 = arr.slice(0, 7) //result1 : [1, 2, 3, 4, 5]
let result2 = arr.slice(undefined, 7) //result2 : [1, 2, 3, 4, 5]
let result3 = arr.slice(-3, 7) //result3 : [3, 4, 5]▶ splice
▷ array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
☆ 반환 값 : 제거한 요소 배열. 기존 배열의 값을 수정한다. 조심하자.
☆ 값을 가져올 경우 기존 배열에서 가져온 값이 삭제가 된다.
☆ 값을 추가할 경우 기존 배열에 값이 추가된다.
① start : 어디서부터 자를지 시작점을 정한다.
let arr = [1, 2, 3, 4, 5]
//spilce()는 기존 배열의 값을 바꾸기 때문에 연습코드마다 배열을 다시 정의해야 한다.- 0일 경우 : 시작점부터 잘라 가져온다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(0)
//result : [1, 2, 3, 4, 5]
//arr: []- 양수일 경우 : 인덱스(start값의 자리에 있는 배열 값)를 포함하고 이후 배열의 마지막 값까지 가져온다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(2)
//result : [3, 4, 5]
//arr: [1, 2]- 음수일 경우 : 배열의 마지막 값이 (-1)이다. (-2) 일 경우 배열의 뒤에서 두 번째 값을 나타낸다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(-2)
//result : [4, 5]
//arr: [1, 2, 3]- undefined인 경우 : 0일 경우와 같다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(undefined)
//result : [1, 2, 3, 4, 5]
//arr: []- 배열의 길이보다 숫자가 큰 경우 : 빈 배열을 반환한다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(7)
//result : []
//arr: [1, 2, 3, 4, 5]
② deleteCount : 몇 개를 가져올지 정한다. 생략이 가능하다. 생략할 경우 시작점부터 배열의 마지막까지 가져온다.
- 0일 경우 : 시작점이 어디든 빈 배열을 반환한다. 가져올 개수가 0이기 때문이다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, 0)
let result2 = arr.splice(1, 0)
let result3 = arr.splice(undefined, 0)
let result4 = arr.splice(-1, 0)
//all result : []
//arr: [1, 2, 3, 4, 5]- 양수일 경우 : start 인덱스 값을 포함한 숫자만큼 값을 가져온다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, 2)
//result1 : [1, 2]
//arr: [3, 4, 5]
let arr = [1, 2, 3, 4, 5]
let result2 = arr.splice(2, 2)
//result2 : [3, 4]
//arr: [1, 2, 5]
let arr = [1, 2, 3, 4, 5]
let result3 = arr.splice(undefined, 2)
//result3 : [1, 2]
//arr: [3, 4, 5]
let arr = [1, 2, 3, 4, 5]
let result4 = arr.splice(-2, 2)
//result4 : [4, 5]
//arr: [1, 2, 3]- 음수일 경우 : 0일 경우와 같다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, -2)
let result2 = arr.splice(1, -2)
let result3 = arr.splice(undefined, -2)
let result4 = arr.splice(-1, -2)
//all result : []
//arr: [1, 2, 3, 4, 5]- undefined인 경우 : 0일 경우와 같다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, undefined)
let result2 = arr.splice(1, undefined)
let result3 = arr.splice(undefined, undefined)
let result4 = arr.splice(-1, undefined)
//all result : []
//arr: [1, 2, 3, 4, 5]- 배열의 길이보다 숫자가 큰 경우 : 배열의 마지막 요소까지 포함하여 가져온다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, 7)
//result1 : [1, 2, 3, 4, 5]
//arr: []
let arr = [1, 2, 3, 4, 5]
let result2 = arr.splice(2, 7)
//result2 : [3, 4, 5]
//arr: [1, 2]
let arr = [1, 2, 3, 4, 5]
let result3 = arr.splice(undefined, 7)
//result3 : [1, 2, 3, 4, 5]
//arr: []
let arr = [1, 2, 3, 4, 5]
let result4 = arr.splice(-2, 7)
//result4 : [4, 5]
//arr: [1, 2, 3]
③ item... : 추가할 요소. 생략이 가능하다. 생략할 경우 요소를 제거하기만 한다.
- 요소가 추가될 위치는 start 인덱스 값의 위치가 기준이다.
let arr = [1, 2, 3, 4, 5]
let result1 = arr.splice(0, 2, "a", "b", "c")
//result1 : [1, 2]
//arr: ["a", "b", "c", 3, 4, 5]
let arr = [1, 2, 3, 4, 5]
let result2 = arr.splice(2, 2, "a", "b", "c")
//result2 : [3, 4]
//arr: [1, 2, "a", "b", "c", 5]- start 값이 0 또는 양수일 경우 : 선택된 값 바로 다음 인덱스부터 차례로(오른쪽으로) 값이 쌓인다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(2, 0, "a", "b", "c")
//result : []
//arr: [1, 2, "a", "b", "c", 3, 4, 5]- start 값이 음수일 경우 : 선택된 값 이전 인덱스부터 차례로(오른쪽으로) 값이 쌓인다.
let arr = [1, 2, 3, 4, 5]
let result = arr.splice(-2, 0, "a", "b", "c")
//result : []
//arr: [1, 2, 3, "a", "b", "c", 4, 5]
정리하고 보니 나는 이해가 되는데 남이 보기 어렵게 되어버린 거 같은데?
'기록일지 > Javascript' 카테고리의 다른 글
| [Javascript] Array에서 some, every 비교 (0) | 2020.12.01 |
|---|---|
| [Javascript] 리스트 데이터는 배열이 좋다! (0) | 2020.11.29 |