replace

1. 역할

replace 메서드는 어떤 패턴(문자열 혹은 정규식)의 첫번째 문자열을 교체 문자열로 치환하여 새로운 문자열을 반환한다.
즉, 원래 문자열은 변경되지 않는다.

원본문자열.replace('변경 할 문자열', '변경 될 문자열')

이때, 두번째 인자에는 문자열이나 함수를 전달할 수 있다.

2. 예제

const textType = '010-1111-2222'
const onlyNumber = textType.replace('-', '')

console.log(onlyNumber) //expected 0101111-2222

010-1111-2222의 전체 문자열에서 첫번째 '-'문자열을 '' 공백으로 치환한 뒤 새로운 문자열이 return되었다.
01011112222가 아닌 0101111-2222가 된 이유는 replace()는 변경 할 첫번째 문자열만 교체 문자열로 치환하기 때문이다.

3. 활용

const testNumber = '010-1234-3341'
const result = testNumber.replace(/^[0-9]{3}/, 'a')

console.result(result) //expected 'a-1234-3341'

첫번째 인자의 변경할 문자열을 정규식으로 지정할 수도 있다.
[0-9] : 숫자로 이루어진, {3} : 맨 앞 세자리를 'a'로 치환한 뒤 return하여 'a-1234-3341'이 되었다.

---

replaceAll

1. 역할

replace 메서드와 사용법은 같으며 부합하는 모든 문자열을 교체 문자열로 치환한다.

replace()와 replaceAll()의 차이점은 치환될 문자열의 타켓이다.

replace 메서드는 패턴에 부합하는 첫번째 문자열만 새로운 문자열로 변경되고,

replaceAll 메서드는 모든 문자열을 치환한다.

일부 블로그에 두 메서드의 차이점이 정규식 사용 가능여부라고 설명되어 있지만 그러지 않다. 두 메서드 모두 변경할 문자열 즉, 첫번째 인자에 정규식을 전달할 수 있다.

2. 예제

const textType = '010-1111-2222'
const onlyNumber = textType.replaceAll('-', '')

console.log(onlyNumber) //expected 01011112222

010-1111-2222의 전체 문자열에서 모든 문자열 '-'을 '' 공백으로 치환하여 새로운 문자열을 반환한다.
replaceAll()은 변경 할 모든 문자열을 교체 문자열로 치환하기 때문에 필요에 따라 replace() 혹은 replaceAll()을 사용하면 된다.

---

splice

1. 역할

배열의 기존요소를 삭제/교체/추가하여 기존 배열을 변경한다.
즉, 원래 배열의 요소에 변경이 일어난다.

배열.splice(변경을 시작할 인덱스, 제거할 요소의 수, 추가할 요소)

두번째 인자부터는 optional한 속성이기 때문에 생략해도 무방하며, 예제를 통해 쓰임새를 추가로 설명해보겠다

2. 예제

2-1)

[1,2,3].splice(1) //expected [1]

// 1번째 인덱스부터 변경을 시작, 
optional값은 지정하지 않았기 때문에 index:1부터 모든 요소를 제거한다.

'제거할 요소의 수'를 생략하면 '변경을 시작할 인덱스'부터 모든 요소를 제거한다.

2-2)

[1,2,3,4].splice(1,-2) //expected [1,2,3,4]

//1번째 인덱스부터 변경을 시작, 
제거할 요소가 음수이기 때문에 아무것도 삭제하지 않는다.

'제거할 요소의 수'가 음수라면 어떤 요소도 제거하지 않는다.

2-3)

[1,2,3,4].splice(1,2,'abc') //expected [1,'abc',4]

//1번째 인덱스부터 변경을 시작, 제거할 요소는 2개,
추가할 요소는 'abc'

'추가할 요소'를 지정하면 '변경을 시작할 인덱스'부터 '제거할 요소의 수'만큼 '추가할 요소'로 바뀐다.