웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 문자열을 역순으로 반환하기, reverse string

Last Modified : 2021-04-07 / Created : 2021-04-01
7,983
View Count

자바스크립트에서 문자열을 거꾸로 반환하는 방법을 알아보려고 합니다. 예를들어 아래와 같이 말이죠.

변경 전 문자열) 'abcde'
변경 후 문자열) 'edcba'

어떻게 하면 문자열 역순 변환이 가능할까요? 아래에서 자세히 알아보세요.




# 자바스크립트 문자열 역순으로 변환 후 반환하기


문자열 변경이나 숫자 연산 등의 방법은 코딩 관련 질문에도 많이 등장합니다. 간단하면서도 기본적인 데이터 처리 능력을 확인할 수 있겠죠.

"길이가 n인 문자열이 존재한다. 이를 역순으로 출력하려면?"


여러가지의 방법이 존재합니다. 여기서는 생각하기 쉬운 두 가지 방법을 알아봅니다. 첫 번째는 for loop를 사용하는 방법이고 두 번째 방법은 배열로 변환하여 reverse() 함수를 사용하는 방법입니다. 그럼 첫 번째 for loop를 사용하는 방법부터 알아봅니다.



! for 루프를 사용하여 해결하기


이 방법의 간단한 프로세스는 아래와 같습니다.

1. for 루프를 문자열의 길이만큼 사용 (단, index를 -1씩 더하는 것이 아닌 감소시키는 방법)
2. index의 위치에 해당하는 값을 가져와 새로운 변수에 담기
3. index 값이 0보다 작은 경우 중지하기
4. 값을 반환하고 완료

여기서 중요한 부분은 1씩 더하는 방법이 아닌 전체 길이에서 1씩 감소시키는 부분입니다. 코드로 나타나면 아래와 같이 될 것입니다.
const siteName = 'webisfree';
const reverseSiteName = reverseStr(siteName);
console.log(reverseSiteName);

// 출력결과
"eerfsibew"

function reverseStr(str) {
  let result = '';
  for(let i = str.length - 1; i >= 0; i--) {
    result = result + str[i];
  }
  return result;
};

출력 결과를 확인해보면 예상대로 문자열을 반대로 반환하는 것을 확인하였습니다. 다음은 배열로 변환 후 반환하는 방법을 사용하려고 합니다.


! 배열로 변환하여 해결하는 방법


이 방법의 경우 for 루프를 사용하는 것은 동일하지만 문자열을 배열로 변환하여 처리하는 방법입니다. 이 방법을 위해서 크게 두 가지 고민이 필요합니다.
하나. 문자열을 어떻게 배열에 담을 수 있을까
둘. 배열에 담긴 문자열을 어떻게 다시 문자열로 변환할까?
첫 번째 문자열을 배열로 담는 방법은 간단합니다. split()을 사용하되 빈 문자값인 ''를 사용하여 자르도록 합니다.
그리고 배열로 저장된 값을 역순으로 바꾸기 위해서 reverse() 함수를 적용합니다. 이 후 join()을 사용하여 다시 문자열로 반환하게 하면 됩니다. 이를 코드로 구현하면 아래와 같습니다.
function reverseStr(str) {
  const arrayStr = str.split('');
  arrayStr.reverse();
  reverseStr = arrayStr.join('');
  return reverseStr;
};

위 함수를 사용하여 어떻게 결과가 나타나는지 확인해보겠습니다.
const siteName = 'webisfree';
const reverseSiteName = reverseStr(siteName);
console.log(reverseSiteName);

// 출력결과
"eerfsibew"

예상대로 반대로 값을 가져오는 것을 확인할 수 있었습니다.


여기까지 문자열을 반대, 역순으로 변환하는 방법에 대하여 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

    Previous

    자바스크립트의 메모리 관리와 가비지 컬렉션(Garbage Collection)

    Previous

    자바스크립트 ES6의 const 상수 조금 더 알아보기