알파벳 카운터 만들기
영어 문장을 입력받아, 알파벳의 개수를 세어 결과를 출력하는 앱을 만들어봅니다.
지시사항
- AlphabetCounter의 setSentence, buildMap, buildResult 함수를 만듭니다.
- setSentence 메서드는 sentence 를 인자로 입력받아 AlphabetCounter의 sentence를 세팅합니다.
- buildAlphabetMap은 AlphabetCounter의 sentence가 가진 각 알파벳의 개수를 세어 알파벳과 그 개수를 각각 키와 값으로 하는 객체를 만들고 alphabetMap에 저장합니다.
- 다음과 같은 과정을 거쳐 alphabetMap을 만듭니다.
- buildResult는 alphabetMap을 기반으로 한 결과 문자열을 리턴합니다.
- 모든 함수는 this를 리턴하되, buildResult 메서드만 결과 문장을 리턴하도록 만듭니다. 즉 다음과 같은 메서드 체인 방식으로 AlphabetCounter를 구현합니다.
const result = AlphabetCounter.setSentence("abc")
.buildAlphabetMap()
.buildResult();
------
공부용코드
const AlphabetCounter = {
sentence: "",
alphabetMap: {},
setSentence: function (sentence) {
this.sentence = sentence;
this.alphabetMap =
this.sentence.trim().toLowerCase().split("").filter(c => c >='a' && c<='z')
.reduce((map,char)=>{
if(!map[char]){map[char]=0}
map[char]++
return map
},{})
return this;
},
buildAlphabetMap: function () {
// this.sentence 로부터 알파벳 맵을 만들어
// this.alphabetMap에 저장하세요.
return this;
},
buildResult: function () {
// Object.entries()를 활용하여 [a: 1] [b: 2] 형태의 문자열을 만들어보세요.
const resultString = Object.entries(this.alphabetMap).reduce((acc,[abc,freq])=>
`${acc}[${abc}: ${freq}]`,"").trim()
return `결과는 : ${resultString} 입니다.`;
},
};
export default AlphabetCounter;
솔직히 이해하기가 너무어렵다..너무복잡한 방법을 쓰는거같기도하다.
아래는 필터의 조건식 설명
`this.sentence.trim().toLowerCase().split("").filter(c => c >='a' && c<='z')`는 문자열에서
알파벳 소문자만 추출하는 과정을 나타냅니다. 이 코드를 단계별로 살펴보겠습니다:
1. `this.sentence.trim()`: `this.sentence` 변수의 값을 가져와서 문자열 양 끝의 공백을 제거합니다. `trim()` 메서드를 사용하여 공백을 제거하므로 문자열의 앞과 뒤에 있는 공백이 제거됩니다.
2. `.toLowerCase()`: 문자열을 모두 소문자로 변환합니다. 이렇게 하면 대문자 알파벳도 모두 소문자로 변환됩니다.
3. `.split("")`: 문자열을 하나씩 문자로 분리하여 배열로 만듭니다. 각 문자가 배열의 요소가 됩니다.
4. `.filter(c => c >='a' && c<='z')`: 배열의 각 요소를 순회하면서 조건에 맞는 요소만 남깁니다. 여기서 `c`는 배열의 각 요소인 문자를 나타냅니다. `c >= 'a' && c <= 'z'`는 문자 `c`가 알파벳 소문자인지 확인하는 조건입니다. 조건에 맞는 문자만 배열에 남게 됩니다.
따라서 이 코드는 원본 문자열에서 공백을 제거하고 모든 문자를 소문자로 변환한 뒤, 알파벳 소문자만을 필터링하여 배열로 만듭니다. 이러한 배열은 알파벳 소문자로만 구성된 문자열이 됩니다.
------
조건식 자세한설명
c >= 'a' && c <= 'z'는 문자열에서 알파벳 소문자인 문자를 확인하는 조건입니다.
- c >= 'a': 이 부분은 문자 c가 알파벳 소문자 'a' 이상인지를 확인합니다. 즉, 'a', 'b', 'c', ... 와 같은 알파벳 소문자 중 하나인 경우를 체크합니다.
- c <= 'z': 이 부분은 문자 c가 알파벳 소문자 'z' 이하인지를 확인합니다. 즉, 'z' 이하의 알파벳 소문자 중 하나인 경우를 체크합니다.
따라서 c >= 'a' && c <= 'z'는 문자 c가 알파벳 소문자인 경우를 검사합니다. 이 조건은 알파벳 소문자만을 허용하고 다른 문자는 걸러내기 위해 사용됩니다.
아래는 챗 gpt 돌린 간결한코드
const AlphabetCounter = {
sentence: "",
alphabetMap: {},
setSentence(sentence) {
this.sentence = sentence;
this.buildAlphabetMap();
return this;
},
buildAlphabetMap() {
this.alphabetMap = this.sentence
.toLowerCase()
.split("")
.filter((c) => /[a-z]/.test(c))
.reduce((map, char) => {
map[char] = (map[char] || 0) + 1;
return map;
}, {});
return this;
},
buildResult() {
const resultString = Object.entries(this.alphabetMap)
.map(([abc, freq]) => `[${abc}: ${freq}]`)
.join(" ");
return `결과는 : ${resultString} 입니다.`;
},
};
export default AlphabetCounter;
- setSentence 메서드 내에서 buildAlphabetMap을 호출하여 중복 코드 제거 및 가독성 향상.
- buildAlphabetMap 메서드 내에서 정규 표현식을 사용하여 알파벳만 필터링.
- buildResult 메서드 내에서 Object.entries 및 map을 사용하여 결과 문자열을 생성하고 join을 사용하여 문자열을 연결.
- reduce를 사용하여 알파벳 빈도수 맵을 더 간결하게 작성.
이렇게 수정된 코드는 간결하고 더 읽기 쉬운 형태로 변경되었습니다.
.filter((c) => /[a-z]/.test(c))는 문자열을 필터링하여 알파벳 소문자만 남기는 작업을 수행하는 부분입니다. 여기서 사용된 것은 정규 표현식입니다.
- /[a-z]/: 이 부분은 정규 표현식을 나타냅니다. [a-z]는 알파벳 소문자를 나타내는 정규 표현식입니다. 이 정규 표현식은 문자열에서 알파벳 소문자를 찾습니다.
- .test(c): 이 부분은 정규 표현식 메서드 중 하나인 test를 사용합니다. test 메서드는 문자열이 정규 표현식과 일치하는지 여부를 확인합니다. 여기서 c는 문자열에서 하나의 문자를 나타냅니다. 따라서 /[a-z]/.test(c)는 문자 c가 알파벳 소문자인지를 확인하는 것입니다.
따라서 .filter((c) => /[a-z]/.test(c))는 문자열을 순회하면서 알파벳 소문자만 남기는 것을 의미합니다. 이 작업은 알파벳 소문자가 아닌 문자를 제거하는 데 사용됩니다.
'자바스크립트' 카테고리의 다른 글
자바스크립트로 드래그 가능한 컨텐츠 만들기 (0) | 2023.09.29 |
---|---|
복리 이자 계산기 (0) | 2023.09.28 |
유용한 배열 메서드 (0) | 2023.09.23 |
Closure를 왜 사용하나요? (0) | 2023.09.23 |
this에 대한 활용 예시 (0) | 2023.09.23 |