자바스크립트에서 특정 문자열(string)을 거꾸로 뒤집어야 할 때가 있다.
이때, reverse( )
메서드를 사용하면 된다.
MDN 공식 문서에 따르면
reverse()
는 배열의 순서를 반전하는 메서드라고 소개한다. 즉, 배열의 마지막 요소가 첫 번째 요소가 되는 것이고 반대로 첫 번째 요소가 배열의 마지막 요소가 되는 것이다.
👉🏻 MDN reverse( ) 메서드
reverse( )
를 사용하여 문자열을 뒤집을 때 해당 문자열에 바로 reverse( )
를 사용하는 것이 아니라, 문자열을 배열로 먼저 변환을 해줘야 한다.
→ 그 이유는 간단한데, reverse( )
가 문자열 자체를 뒤집는 것이 아니라 배열을 뒤집는 메서드이기 때문이다. 따라서 문자열을 배열로 전환한 뒤에 reverse( )
를 사용할 수 있는 것이다.
( 여담으로 처음 reverse를 사용할 때 냅다 문자열에 바로 적용한 적이 있는데 그 당시에는 왜 오류가 나는지 그 이유조차 몰랐다... MDN 공식 문서를 보고 난 후에 배열 메서드라는 걸 알았다...🥹 )
정리하자면, 문자열을 뒤집기 위해서는 (1) 문자열을 배열로 변환 → (2) reverse( ) 메서드로 배열 요소들 거꾸로 뒤집기 → (3) 거꾸로 뒤집힌 배열 다시 하나의 문자열로 합치기
문자열을 배열로 만든다는 것은 문자열에 있는 문자 하나하나를 분리해서 배열에 모두 담는다는 것과 같은 의미다.
이때 사용하는 메서드가 바로 split( )
다.
MDN 공식 문서에 따르면
split( )
는 string(문자열) 객체를 지정한 구분자를 통해서 여러 개의 문자열로 나누는 메서드라고 설명하고 있다.
→ 쉽게 말하자면 문자열이 구성된 구분자를 기준으로 하나씩 분리해서 배열로 만드는 메서드라는 것이다.
예를 들어 '사과'의 경우는 아무런구분자 없이
이루어진 문자열이고 '사,과'의 경우에는,
구분자를 통해 이루어진 문자열인 것이다.
따라서split( )
로 배열을 만들 때 각각의 구분자가 요소 하나하나를 분리하는 기준이 되는 것이다.
👉🏻 MDN split( ) 메서드
예시1
let str1 = "apple";
let arr1 = str1.split('');
console.log(arr1)
→ 결괏값 : ['a', 'p', 'p', 'l', 'e']
예시2
let str2 = "ap,pl,e";
let arr2 = str2.split(',');
console.log(arr2)
→ 결괏값 : ['ap', 'pl', 'e']
앞서 언급한 것과 같이 reverse( )
는 배열의 요소를 뒤집는 메서드이기 때문에 특정 문자열을 배열로 변환했다면, 변환된 배열에 reverse( )
메서드를 사용해서 각각의 요소를 뒤집을 수 있게 된다.
예시1
let str2 = "ap,pl,e";
let arr2 = str2.split(','); // ['ap', 'pl', 'e']
arr2 = arr2.reverse();
console.log(arr2)
→ 결괏값 : ['e', 'pl', 'ap']
reverse( )
를 통해 요소들을 거꾸로 뒤집혔다면 이제는 뒤집힌 배열을 처음과 같이 하나의 문자열로 합쳐야한다.
이때 사용하는 메서드가 바로 join( )
이다.
MDN 공식 문서에 따르면 join( )는 배열의 모든 요소들을 연결해서 하나의 문자열로 만드는 메서드라고 설명하고 있다.
👉🏻 MDN join( ) 메서드
예시1
let str2 = "ap,pl,e";
let arr2 = str2.split(','); // ['ap', 'pl', 'e']
arr2 = arr2.reverse(); // ['e', 'pl', 'ap']
arr2 = arr2.join('');
console.log(arr2)
→ 결괏값 : 'eplap'
예시2
let str2 = "ap,pl,e";
let arr2 = str2.split(','); // ['ap', 'pl', 'e']
arr2 = arr2.reverse(); // ['e', 'pl', 'ap']
arr2 = arr2.join(' + ');
console.log(arr2)
→ 결괏값 : 'e + pl + ap'
저는 아직 모르는 메스드들인데 글만 봐도 이해한 것 같아용!👍