아리콩다리콩의 즐거운 코딩생활

내쓸내정(내가 쓸 거 내가 정리한다) 시리즈의 시작

 자바스크립트로 코딩을 하다 보면 항상 배열 또는 문자열을 자르고 붙이는 일이 자주 생깁니다. 특히 배열이나 문자열을 자를 때는 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]

정리하고 보니 나는 이해가 되는데 남이 보기 어렵게 되어버린 거 같은데?