code-kata(Week1 - Day3)(TIL)

이해용·2022년 5월 12일

JavaScript codekata

Code Kata

오늘은 어려워서 패스 하고 구글링을 참고하여 풀이를 시작한다.

문제

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.

str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환)

예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길기 때문

str = "aaaaa" return 은 1 => 'a' 가 제일 길기 때문

str = "sttrg" return 은 3 => 'trg' 가 제일 길기 때문

내가 생각한 풀이 방법

텍스트를 배열로 만든다. => split("");
만일, 중복 값이 있다면 처음부터 중복이 시작된 지점까지 slice를 사용하여 잘라낸다. => 구현을 못함.
새로 만든 배열에 중복 값을 제거한다. => [...new Set(arr)]
중복을 없앤 배열의 길이를 반환한다. => return array.length

위의 방식대로 구현하려 했으나 2번이 진행되지 않아 실패했다...

const getLengthOfStr = str => {  
  let a = str.split(""); // 1
  for (let i = 0; i < a.length; i++) {
     if (Number(a[i]) >= 2) {
       a.slice(0, a[i]);
     } 
   } return a; // 2번으로 구현했으나 실패...
  let set = [...new Set(a)]; // 3
  let result = set.length; // 4
  return result;
}

구글링한 풀이 방법

const getLengthOfStr = (str) => {
  let sliceStr = []; // 빈 배열 생성
  let lastStr = 0; // lastStr = 0 선언

  for (let i = 0; i < str.length; i++) {  
      if (sliceStr.indexOf(str[i]) === -1) { // 만일, indexOf(str[i])가 sliceStr에 값중 겹치는 값이 없다면,
      	sliceStr.push(str[i]); // str[i]는 sliceStr 배열에 추가되고.
        if (lastStr < sliceStr.length) { // 만일, sliceStr의 길이가 lastStr보다 크다면,
            lastStr = sliceStr.length; // lastStr 은 sliceStr의 길이가 된다.
        }
      } else { // 그렇지 않다면,(str[i] 값이 중복되는게 있다면,)
      	sliceStr = sliceStr.slice(sliceStr.indexOf(str[i]) + 1); // sliceStr의 배열안의 str[i] 의 값의 위치 +1번째까지 배열을 잘라서 새로 생성한다.
      	sliceStr.push(str[i]); //위의 절차를 진행 후 sliceStr	의 배열에 추가한다.
      }
  }
  return lastStr;
};

위의 상황을 예로 들어 진행해봐야 이해가 더 쉬울 것 같다.

ex) console.log(getLengthOfStr('abcabcabc')) = 3

a로 처음 시작할 시에 처음 if문의 조건이 충족되어 sliceStr 배열에 push => sliceStr = [a];
두 번째 if 문에 의거하여 lastStr < sliceStr.length (0 < 1) 이기 때문에 lastStr = sliceStr.length (lastStr = 1) 이된다.
다음 b로 시작하면 1번과 동일하게 조건이 충족되어 sliceStr에 push => sliceStr = [a, b];
두 번째 if문에 의거하여 lastStr < sliceStr.length (1 < 2) 이기 때문에 lastStr = sliceStr.length (lastStr = 2) 이된다.
세 번째 문자열 c로 시작하면 1번과 동일하게 조건에 충족되기 때문에 sliceStr에 push => sliceStr = [a, b, c];
두 번째 if문에 의거하여 lastStr < sliceStr.length (2 < 3) 이기 때문에 lastStr = sliceStr.length (lastStr = 3) 이된다.
abca의 4번째 문자인 a가 시작되면 첫 번째 if 문 조건이 성립되지 않기 때문에 else로 진행된다.
7-1. sliceStr.indexOf((str[3]=a)) 의 값은 0이 출력된다.
7-2. sliceStr.slice((0) + 1)의 값은 sliceStr = [b, c] 배열이 나타나게 된다.
sliceStr.push((str[3]=a)) 의 값에 의거하여 a가 push 되어
sliceStr = [b, c, a] 가 되고 sliceStr 의 값은 변화가 없으므로 3이다.
다섯번째 문자열 b가 시작하면 첫번째 if문에 조건이 충족되지 않아 else로 진행된다.
9-1. sliceStr.indexOf((str[4]=b)) 의 값은 0이 출력된다.
9-2. sliceStr.slice((0) + 1)의 값은 sliceStr = [c, a] 배열이 나타나게 된다.
sliceStr.push((str[4]=b)) 의 값에 의거하여 b가 push 되어
sliceStr = [b, c, a] 가 되고 sliceStr 의 값은 변화가 없으므로 3이다.
이렇게 진행되다보면 뒤에 나오는 모든 문자열은 새로운 배열 생성과 push가 3의 값이 return 된다.

ex) console.log(getLengthOfStr('aaaaa')) = 1

처음 a가 시작하면 처음 if 문과 두 번째 if문에 의거하여 sliceStr = [a]가 되고 lastStr = 1이 된다.
두 번째 a가 시작하면 처음 if문의 조건이 맞지 않기 때문에 else로 진행된다.
2-1. sliceStr.indexOf((str[1]=a)) 의 값은 0이 출력된다.
2-2. sliceStr.slice((0) + 1)의 값은 sliceStr = [] 배열이 나타나게 된다.
sliceStr.push((str[1]=a)) 의 값에 의거하여 a가 push 되어
sliceStr = [a] 가 되고 sliceStr 의 값은 변화가 없으므로 1이다.
위의 내용이 반복되므로 sliceStr 값이 변화가 없으므로 return 값은 1이다.

ex) console.log(getLengthOfStr('sttrg')) = 3

처음 s가 시작하면 처음 if 문과 두 번째 if문에 의거하여 sliceStr = [s]가 되고 lastStr = 1이 된다.
두 번째 문자열 t가 시작하면 처음 if문 조건에 부합하여 sliceStr = [s, t]가 되고 두 번째 if문에서 lastStr < sliceStr.length = (1 < 2) 이므로 lastStr = 2 가 된다.
세 번째 문자열 t가 시작되면 처음 if문 조건 불일치되므로 else이동
sliceStr.indexOf((str[2] = t)) = 1 이 되므로 sliceStr.slice(sliceStr.indexOf((1) + 1) 이 되어 배열은 초기화가 된다. sliceStr = []
sliceStr.push((str[2] = t))가 되므로 sliceStr = [t] 가 된다.
네 번째 문자열 r이 시작되면 첫번째 if문에 조건 일치 되므로 sliceStr = [t, r]이 된다.
두 번째 if문의 조건 lastStr < sliceStr.length = 2 < 2의 조건이 일치 하지 않으므로 두번째 if문 종결된다.
다섯번째 문자열 g가 시작되면 첫번째 if문에 조건 일치 되므로 sliceStr = [t, r, g]이 된다.
두 번째 if문의 조건 lastStr < sliceStr.length = 2 < 3의 조건이 일치하므로 lastStr = 3이 되고 해당 값이 return 된다.

느낀점

답을 보고 이해하는데 어려움이 있었다.
여러조건을 합치는 것(특히 중첩 if문) 을 사용하는 것을 생각하지도 못했다.
그리고 답을 봤을 때 중첩 if문의 조건의 흐름을 파악하는데 상당한 시간이 소요됐다.
아래의 블로그를 참고하여 if문의 흐름을 알게 된 후 답을 이해할 수 있어 정리가 가능했다.
또한, slice와 indexOf에 대해 한 번 더 생각할 수 있는 시간을 갖게 되어 더 깊은 공부를 할 수 있다고 느꼈다.
해석하고 블로그를 쓰는데 시간은 오래 걸렸으나 답을 해석할 수 있어 좋았다.

참고 및 출처
https://velog.io/@devmoonsh/JavaScript-CodeKata-03
https://hyejin.tistory.com/186