이번 글에서는 두 개의 문자열을 입력받아 서로 공통으로 포함된 문자만 추출하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.
요구 사항은 다음과 같습니다.
- 두 문자열에 공통된 문자가 하나도 없다면 빈 문자열('')을 반환합니다.
- 공통된 문자가 있다면 해당 문자들을 모두 이어 붙인 새로운 문자열을 반환합니다.
예시 문자열 준비하기
먼저 테스트에 사용할 두 개의 문자열을 정의합니다.
const str1 = 'Hey There!!, how are you';
const str2 = 'Can this be a special string';
위 두 문자열에는 'e', 'h', 'a', 'r' 등 여러 문자가 중복되어 포함되어 있습니다. 우리의 목표는 str1의 각 문자를 순회하면서 str2에도 존재하는 문자만 골라내는 것입니다.
구현 코드
핵심 아이디어는 간단합니다. 첫 번째 문자열을 한 글자씩 순회하면서, 각 문자가 두 번째 문자열에 포함되어 있는지 확인하고 포함되어 있다면 결과 문자열에 추가하는 것입니다.
const str1 = 'Hey There!!, how are you';
const str2 = 'Can this be a special string';
const commonString = (str1, str2) => {
let res = '';
for(let i = 0; i < str1.length; i++){
if(!str2.includes(str1[i])){
continue;
}
res += str1[i];
}
return res;
};
console.log(commonString(str1, str2));
코드 동작 원리
- 결과 변수 초기화: 공통 문자를 누적할 빈 문자열 res를 선언합니다.
- 반복문 순회: for 루프를 통해 첫 번째 문자열(str1)의 각 문자를 인덱스 순서대로 확인합니다.
- 포함 여부 검사: String.prototype.includes() 메서드를 사용해 현재 문자가 두 번째 문자열(str2)에 존재하는지 검사합니다. 존재하지 않으면 continue로 건너뜁니다.
- 문자 누적: 두 문자열 모두에 존재하는 문자라면 결과 문자열에 이어 붙입니다.
- 결과 반환: 순회가 끝나면 완성된 문자열을 반환합니다. 공통 문자가 없었다면 처음 선언한 그대로 빈 문자열이 반환됩니다.
실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
e here h are
str1에서 str2에도 등장하는 문자들('e', ' ', 'h', 'r', 'a' 등)이 원래 순서대로 추출된 것을 확인할 수 있습니다.
마무리 및 참고 사항
이 방식은 구현이 매우 직관적이라 짧은 문자열 처리에 적합합니다. 다만 몇 가지 유의할 점이 있습니다.
- 중복 허용: 현재 코드는 str1에 같은 문자가 여러 번 나오면 그 횟수만큼 모두 결과에 포함됩니다. 고유한 공통 문자만 필요하다면 Set 객체를 활용해 중복을 제거할 수 있습니다.
- 대소문자 구분: includes()는 대소문자를 구분하므로, 대소문자를 무시하고 비교하려면 비교 전에 toLowerCase()로 두 문자열을 정규화하는 것이 좋습니다.
- 공백 처리: 위 예제에서는 공백도 하나의 문자로 취급됩니다. 공백을 제외하고 싶다면 조건문에 추가 검사를 넣으면 됩니다.
이처럼 반복문과 includes() 메서드만 활용하면 별도의 라이브러리 없이도 두 문자열 간의 공통 요소를 손쉽게 찾을 수 있습니다.