오늘부터 자바스크립트의 메서드들을 하나씩 파헤쳐 보려고 한다. 매일 무작정 코테 풀기에만 집중하느라 어떤 메서드들이 어떤 기능을 하는지 문제 푸는 그 순간에만 깨우쳤다. 하루가 지나면 또 까먹고 다시 찾아 보고의 반복이라 제대로 복습하고 기록하는 데에 초점을 두기로 했다.

JavaScript split()과 join()

split()과 join() 모두 자바스크립트에서 배열의 메서드이다. 두 개의 메서드 전부 배열 문제에 있어 자주 나오는 단골손님들인 것 같다.

우선 split()은 말 그대로 쪼개다. 찢다. 그 자체의 의미를 가진다. 배열을 여러 개의 문자열로 쪼개어 준다. 배열.split() 의 형식으로 사용하며 괄호 안에는 직접 구분자를 지정하여 구분하고, 구분자를 기점으로 문자열 사이를 나눈다.

join()은 연결하다. 잇다. 의 의미를 가진 단어로써 이것 또한 말 그대로 배열의 요소들을 연결 시켜 주는 역할을 한다. split()과 마찬가지로 괄호 속에 구분자를 넣어 요소를 연결 시킨다.

---

split() 예시

let str = '나는짱짱123'
console.log(str.split('2')) // str에 split() 사용, 구분자 2를 통해 문자열을 나눈다.
// 출력: '나는짱짱1', '3'

str '나는짱짱123'을 split('2')를 통해 2를 기점으로,
앞의 문자열 '나는짱짱1'과 '3' 이렇게 두 개로 나뉘게 된다.

let str = '나는짱짱123'
console.log(str.split('나')) // str에 split() 사용, 구분자 '나'를 통해 문자열을 나눈다.
// 출력: '', '는짱짱123'

'나'를 구분자로 하면 앞에 구분될 부분이 없어서 뒷 부분인 '는짱짱123' 값만 나올 거라 생각했는데 그게 아니었다. '나'를 기점으로, 앞의 공백 부분까지 구분되어 앞에 '' 이렇게 공백의 값이 나온다. 이 부분이 되게 신기했다.

let str = '나는짱짱123'
console.log(str.split('')) // str에 split() 사용, 구분자 ''를 통해 문자열을 나눈다.
// 출력: '나','는','짱','짱','1','2','3'

가장 신기했던 부분은 이거다. 구분자에 공백'' 을 넣고 돌렸을 때 구분할 곳이 없어서 '나는짱짱123'이 한꺼번에 나올 거란 생각을 했는데 전혀 다른 값이 나왔다. 문자열 사이사이마다 공백이 들어가 한 글자씩 쪼개진다. 너무 신기한 결과다.

이처럼 split()은 구분자를 기점으로 문자열을 쪼개어 주기도 하지만 구분자에 공백을 삽입하는 경우 모든 문자열을 한 글자씩 쪼개는 역할을 한다. 이 공백 구분자 때문에 코테 푸는 데에 많이 쓰이는 것 같기도 하다.

+) 추가

let str = '나는짱짱123'
console.log(str.split('감자')) // str에 split() 사용, 구분자 '감자'를 통해 문자열을 나눈다.
// 출력: '나는짱짱123'

새롭게 알게 된 사실:

  포함하지 않는 단어를 괄호 안에 넣는다면 문자열이 쪼개지지 않고 원본 문자열 그대로 출력된다!!
포함하지 않는 단어를 넣으면 아무것도 반환되지 않을 줄 알았는데 그냥 원본 문자열이 출력된다는 사실이 신기하다.

---

join() 예시

let arr = ['나는','짱짱','123'];
console.log(arr.join(',')) // arr에 join() 사용, ','를 통해 문자열을 연결한다.
// 출력: 나는,짱짱,123

arr에 join(',')을 통해 문자열 사이마다 ,를 넣어 연결 시켜 준다.

let str = '나는짱짱123'
console.log(str.split('2').join('짱')); 
// split()과 join()을 이용하여 배열로 변환 후 문자열로 연결
// 출력: '나는짱짱1짱3'

이렇게 split()과 join()을 혼용하여 기존 배열을 새롭게 나누고 그 사이에 글자를 넣어 문자열로 반환이 가능하다. 보통 코테에서는 둘 다 공백을 넣어 사용하는 것 같다.

---

정리

쉽게 정리하면

split()은 문자열 => 배열로 바꿔 주는 역할
join()은 배열 => 문자열로 바꿔 주는 역할 이라고 생각하면 될 것 같다.

그리고 각각 ''공백을 입력했을 때, split()은 모든 문자열 사이를 나누고,
join() 모든 문자열 사이를 이어 준다.

split()은 아직 구분자를 넣고 나누는 부분이 어색하지만 많이 쓰다 보면 익숙해질 것 같다.
항상 두 개 헷갈려서 바꿔 쓰고 그랬는데 이젠 제대로 알고 제대로 쓸 수 있을 거란 생각이 든다!