본문 바로가기

자바스크립트

알파벳 카운터 만들기

알파벳 카운터 만들기

영어 문장을 입력받아, 알파벳의 개수를 세어 결과를 출력하는 앱을 만들어봅니다.

 

지시사항

  1. AlphabetCounter setSentence, buildMap, buildResult 함수를 만듭니다.
  2. setSentence 메서드는 sentence 인자로 입력받아 AlphabetCounter sentence 세팅합니다.
  3. buildAlphabetMap AlphabetCounter sentence 가진 알파벳의 개수를 세어 알파벳과 개수를 각각 키와 값으로 하는 객체를 만들고 alphabetMap 저장합니다.
  4. 다음과 같은 과정을 거쳐 alphabetMap 만듭니다.
  5. buildResult alphabetMap 기반으로 결과 문자열을 리턴합니다.
  6. 모든 함수는 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;
  1. setSentence 메서드 내에서 buildAlphabetMap을 호출하여 중복 코드 제거 및 가독성 향상.
  2. buildAlphabetMap 메서드 내에서 정규 표현식을 사용하여 알파벳만 필터링.
  3. buildResult 메서드 내에서 Object.entries 및 map을 사용하여 결과 문자열을 생성하고 join을 사용하여 문자열을 연결.
  4. 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