메서드 기록해두기(split, slice, splice)

개요

알고리즘을 풀면서 split, slice, splice를 사용하면 금방 풀릴거 같을 문제가 있다. 근데 뭐가 어떤 기능을 하는지 까먹는다. 이런 내가 싫다. 그래서 기록하면서 기억할 수 있도록 적어보려고 한다.

 

split

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. 공식문서에 나온 설명이다. 한번 하나씩 사용해 보도록 하자.

 

1. 구분자 사용하지 않기

const string = "i like banana"
console.log(string.split())
// Expected output: [ 'i like banana' ]

 

어떠한 구분자를 사용하지 않고, split 자체를 사용할 시 string을 담은 배열이 나온다. 그렇다면 구분자를 사용해보자.

 

2. 구분자 사용하기(공백)

const string = "i like banana"
console.log(string.split(' '))
// Expected output: [ 'i', 'like', 'banana' ]

 

공백에 의해 배열의 요소가 결정된다. 그렇다면 string이라는 변수에 공백이 없다면?

const string = "ilikebanana"
console.log(string.split(' '))
// Expected output: [ 'ilikebanana' ]

 

아무 변화 없이 string이라는 변수에 배열만 씌여진다. 그러면 string 변수의 연속된 공백이 2개이고, 구분자의 공백이 1개면 어떻게 될까?

const string = "i  like  banana"
console.log(string.split(' '))
// Expected output: [ 'i', '', 'like', '', 'banana' ]

 

뭐 거의 예상대로 1개의 공백만이 구분자로 인식되고, 다른 공백은 배열의 요소로 인식된다.

 

3. 따옴표 공백없이 사용하기

const string = "i like banana"
console.log(string.split(''))
// Expected output: [
  'i', ' ', 'l', 'i',
  'k', 'e', ' ', 'b',
  'a', 'n', 'a', 'n',
  'a'
]

 

공백을 포함해서 모든 문자를 나눈다.

 

slice

slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. 가 공식문서의 설명이다. end까지는 포함되지 않으니 만약에 배열의 전체를 나타내고 싶다면 slice(0, 마지막인덱스+1)을 해줘야 한다. 한번 사용해 보자.

 

1. 전체 배열 복사하기

const alphabet = ['a', 'b', 'c', 'd', 'e'];
console.log(alphabet.slice(0,5))
// Expected output: [ 'a', 'b', 'c', 'd', 'e' ]
console.log(alphabet.slice())
// Expected output: [ 'a', 'b', 'c', 'd', 'e' ]

 

slice()의 옵션에 아무것도 넣지 않아도 alphabet의 얕은 복사를 할 수 있다. 

 

2. 특정 부분 복사하기

const alphabet = ['a', 'b', 'c', 'd', 'e'];
console.log(alphabet.slice(3,5))
// Expected output: [ 'd', 'e' ]

 

alphabet 인덱스의 3번째부터 5번째 전인 4번째 인덱스 까지의 요소로 새로운 배열을 반환한다. 아마 이 부분이 알고리즘을 푸는데 가장 많이 사용되는 부분인것 같다. -를 활용해서 인덱스 마지막 부분부터 역순으로 요소를 활용하는 방법도 있지만 이 방법만 알아도 아마 문제가 없을 듯 하다.

 

splice

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 가 공식문서의 설명이다. 그러면 배열의 기존 요소를 어떻게 삭제, 교체하고 새 요소를 추가하는가 알아보겠다. 간단하게 splice에는 3개의 매개변수가 들어간다. 1번째 start :  배열에서 변경을 시작하는 인덱스, 2번째 deleteCount : 삭제할 요소의 갯수, 3번째 배열에 추가할 요소 이다. 이 3개의 매개변수를 외워야 slice를 잘 활용할 수 있을 것 같다. 한번 사용해 보자.

 

1. 기존 요소 삭제하기

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(0,5)
console.log(alphabet)
// Expected output: []

 

1번째 변경을 시작하는 인덱스는 0번째 이고, 삭제할 요소의 갯수는 5개이므로 'a' 부터 'e' 까지 모두 삭제하므로 빈 배열을 반환한다. 그렇다면 'c'와 'd'를 삭제하고 싶다면?

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(2,2)
console.log(alphabet)
// Expected output: ['a', 'b', 'e']

 

그렇다. 'c'의 인덱스 순서인 2를 start 매개변수로 넣고, 'c'와 'd' 2개의 요소를 제거해야하기 때문에 deleteCount 매개변수에 2를 넣으면 된다.

 

2. 교체하기

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(2,1,'h')
console.log(alphabet)
// Expected output: [ 'a', 'b', 'h', 'd', 'e' ]

 

위와 같이 인덱스값이 2인 값을 시작으로 1개를 삭제하기 때문에 배열에서는 'c'가 삭제된다. 하지만 3번째 매개변수로 'h'를 넣었기 때문에 삭제된 공간에 'h'값이 들어가서 새로운 배열을 반환한다. 그러면 2개의 요소를 삭제하고 한개의 요소를 추가할 수 있을까?

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(2,2,'h')
console.log(alphabet)
// Expected output: [ 'a', 'b', 'h', 'e' ]

 

가능하다. 그렇다면 여러개의 요소도 추가할 수 있지 않을까?

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(2,2,'h','i','j')
console.log(alphabet)
// Expected output: [ 'a', 'b', 'h', 'i', 'j', 'e' ]

 

이것 또한 가능하다. 3번째부터 ~까지 배열에 추가할 요소로 인식되어 원하는 만큼 추가할 수 있다. 

 

3. 하나도 제거하지 않고, 요소 추가하기

위의 모든 것을 다 해보았다면, 이것은 너무 쉽게 하지 않을까 한다. 2번째의 매개변수를 0으로 하면 아마 원하는 순번에 요소를 삭제하지 않고 추가할 수 있지 않을까? 한번 해보자

const alphabet = ['a', 'b', 'c', 'd', 'e'];
alphabet.splice(2,0,'h')
console.log(alphabet)
// Expected output: [ 'a', 'b', 'h', 'c', 'd', 'e' ]

 

내 예상과는 다르게 나왔다. 나는 'c' 순서 다음에 추가하는 'h'가 나올줄 알았는데 그 전에 나왔다. 나만 그렇게 예상하는 걸까? 그래서 나는 이것을 이렇게 이해하기로 했다. start의 인덱스가 추가하는 요소의 인덱스가 되는 것 이라고.

 

마무리

이렇게 헷갈리던 메서드들을 사용하면서 기록하면서 머리에 상기시켜 보았다. 보통 알고리즘을 풀때 반복문을 사용하긴 하지만 가끔 반복문으로는 아이디어가 안떠오를 때가 있다. 그럴 때면 메서드를 사용해서 풀이를 하는데 항상 공식문서에 들어가서 확인해야 하는 내가 싫어질 때가 많았다. 내 생각에는 그렇게까지 메서드를 외울 필요는 없다고 생각하지만 뭐랄까 자기 만족이랄까? 오늘이 지나면 다시 까먹을 수도 있겠지만 ! 알고리즘에서 많이 활용하면서 내걸로 만들어야 겠다.