문제 이해하기
첫 번째 인자로 문자열 배열(리터럴 배열)을, 두 번째 인자로 검색할 문자열을 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 두 번째 인자로 전달된 문자열이 배열의 각 요소 안에 몇 번이나 등장하는지 그 횟수를 반환해야 합니다.
여기서 핵심은 완전히 일치하는 요소만 세는 것이 아니라, 배열 요소 문자열 안에 부분 문자열로 포함된 경우도 모두 세야 한다는 점입니다. 예를 들어 "word", "a word", "another word"처럼 서로 다른 요소들이 있어도, 세 요소 모두 "word"라는 단어를 포함하고 있다면 결과는 3이 됩니다.
구현 방법
Array.prototype.filter() 메서드와 String.prototype.indexOf() 메서드를 조합하면 간단하게 해결할 수 있습니다.
- indexOf(query) — 문자열 내에서 query가 처음 나타나는 인덱스를 반환하며, 포함되어 있지 않으면 -1을 반환합니다.
- filter() — 콜백 함수가 true를 반환하는 요소들만 모아 새로운 배열을 만듭니다.
즉, filter로 "query를 포함하는 요소"만 걸러낸 뒤 그 결과 배열의 length를 구하면 원하는 개수를 얻을 수 있습니다.
코드 예시
const arr = ["word", "a word", "another word"];
const query = "word";
const findAll = (arr, query) => {
let count = 0;
count = arr.filter(el => {
return el.indexOf(query) != -1;
}).length;
return count;
};
console.log(findAll(arr, query));실행 결과
3
배열의 세 요소가 모두 "word"라는 문자열을 포함하고 있으므로 콘솔에는 3이 출력됩니다.
더 간결한 버전
ES6에서 도입된 String.prototype.includes() 메서드는 indexOf() !== -1과 동일한 동작을 하지만 훨씬 직관적입니다. 화살표 함수의 암시적 반환까지 활용하면 코드를 한 줄로 줄일 수 있습니다.
const findAll = (arr, query) => arr.filter(el => el.includes(query)).length; console.log(findAll(["word", "a word", "another word"], "word")); // 3
두 방식 모두 성능 차이는 미미하므로, 가독성을 고려한다면 includes()를 사용하는 것이 좋습니다. 대소문자를 구분하지 않고 세고 싶다면 비교 전에 el.toLowerCase().includes(query.toLowerCase())처럼 문자열을 정규화하면 됩니다.