JavaScript - 문자열 뒤집기

sebinnnnn·2023년 3월 29일
5

JavaScript 기초

목록 보기
8/8
post-thumbnail

자바스크립트에서 특정 문자열(string)을 거꾸로 뒤집어야 할 때가 있다.
이때, reverse( ) 메서드를 사용하면 된다.

MDN 공식 문서에 따르면 reverse()배열의 순서를 반전하는 메서드라고 소개한다. 즉, 배열의 마지막 요소가 첫 번째 요소가 되는 것이고 반대로 첫 번째 요소가 배열의 마지막 요소가 되는 것이다.
👉🏻 MDN reverse( ) 메서드

reverse( )를 사용하여 문자열을 뒤집을 때 해당 문자열에 바로 reverse( )를 사용하는 것이 아니라, 문자열을 배열로 먼저 변환을 해줘야 한다.
→ 그 이유는 간단한데, reverse( )가 문자열 자체를 뒤집는 것이 아니라 배열을 뒤집는 메서드이기 때문이다. 따라서 문자열을 배열로 전환한 뒤에 reverse( )를 사용할 수 있는 것이다.
( 여담으로 처음 reverse를 사용할 때 냅다 문자열에 바로 적용한 적이 있는데 그 당시에는 왜 오류가 나는지 그 이유조차 몰랐다... MDN 공식 문서를 보고 난 후에 배열 메서드라는 걸 알았다...🥹 )

정리하자면, 문자열을 뒤집기 위해서는 (1) 문자열을 배열로 변환(2) reverse( ) 메서드로 배열 요소들 거꾸로 뒤집기(3) 거꾸로 뒤집힌 배열 다시 하나의 문자열로 합치기


1️⃣ 문자열 배열로 만들기

문자열을 배열로 만든다는 것은 문자열에 있는 문자 하나하나를 분리해서 배열에 모두 담는다는 것과 같은 의미다.
이때 사용하는 메서드가 바로 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']

2️⃣ reverse( )로 배열 요소 뒤집기

앞서 언급한 것과 같이 reverse( )는 배열의 요소를 뒤집는 메서드이기 때문에 특정 문자열을 배열로 변환했다면, 변환된 배열에 reverse( ) 메서드를 사용해서 각각의 요소를 뒤집을 수 있게 된다.

예시1
let str2 = "ap,pl,e";
let arr2 = str2.split(','); // ['ap', 'pl', 'e']
arr2 = arr2.reverse();
console.log(arr2)

→ 결괏값 : ['e', 'pl', 'ap']

3️⃣ 요소가 뒤집힌 배열 다시 하나의 문자열로 합치기

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'
profile
🏠 블로그 이전 중 → https://medium.com/@sebinndev

3개의 댓글

comment-user-thumbnail
2023년 3월 31일

저는 아직 모르는 메스드들인데 글만 봐도 이해한 것 같아용!👍

1개의 답글
comment-user-thumbnail
2023년 4월 3일

ppap

답글 달기