[프로그래머스/js] 가장 가까운 같은 글자 (Lv. 1)

문제

https://school.programmers.co.kr/learn/courses/30/lessons/142086

프로그래머스

프로그래머스 :: 가장 가까운 같은 글자 :: Lv. 1

 

문제 리뷰

안녕하세요? 최근 프로그래머스의 Lv. 0 문제는 모두 풀었고, 이제 Lv. 1로 넘어와서 도장 깨기를 하고 있습니다.

 

문제를 읽었을 때, 크게 어려운 문제라거나 구현 방법이 상상이 안되거나 그런 고난과 역경이 있지는 않았지만, 제가 어이없는 실수를 해버려서(ㅋ) 기억해 두고자 게시글 편집기를 열게 되었습니다.

 

뭔가 입력으로 주어지는 문자열 `s`에 대해서, 이 s에서 반복문을 돌면서 조건에 따라 정답 배열에 구분해서 넣어주면 되는 문제 같습니다.

첫 번째 시도 (오답, 10/100)

code

function solution(s) {
    const map = new Map();
    const answer = [];
    
    [...s].forEach((ele, idx) => {
        if (map.get(ele)) {
            answer.push(idx - map.get(ele));
            map.set(ele, idx);
        }
        else {
            answer.push(-1);
            map.set(ele, idx);
        }
    });
    
    return answer;
}

 

review

테스트 케이스 30개 중 3개만 성공으로, 10/100 이라는 점수를 받게 되었네요.

 

forEach로 문자열의 문자를 하나씩 살펴보며, 조건에 따라 map에 넣어주는 시도는 좋았던 것 같습니다. 좋은 접근이었다고 생각합니다.

 

의도한 바는

 

• map에 s의 idx 번째 문자가 있으면
  • idx 번째 문자보다 앞에서 이미 나온 적이 있는 문자다!
  • 그럼 문제 조건에 따라, ⓐ 자신과 가장 가까운 곳에 있는 같은 글자와의 상대 거리를 answer 배열에 push 하자!
  • ⓐ를 계산해야 하니까, map에서 필요한 값을 꺼내 쓸 수 있게 값을 업데이트 해두자!
• map에 s의 idx 번째 문자가 없으면
  • idx 번째 문자는 처음 나오는 문자다!
  • 그럼 map에서 새롭게 set 해주자

라고 생각한 것이었습니다. 나쁘지 않은 접근이라고 생각했습니다만..

 

그렇습니다. 접근 방법은 좋았는데, JS의 코드를 작성하는 데 실수가 있었습니다. 어떤 실수 였을까요? ㅋㅋ ㅠ

두 번째 시도 (정답)

code

function solution(s) {
    const map = new Map();
    const answer = [];
    
    [...s].forEach((ele, idx) => {
        if (map.get(ele) !== undefined) {
            answer.push(idx - map.get(ele));
            map.set(ele, idx);
        }
        else {
            answer.push(-1);
            map.set(ele, idx);
        }
    });
    
    return answer;
}

review

그것은 바로바로..

 

if문에서의 조건에서 `map.get(ele)`만을 덩그러니 놓은 것이 잘못된 코드였습니다.

 

• map에 s의 idx 번째 문자가 없으면
  • idx 번째 문자는 처음 나오는 문자다!
  • 그럼 map에서 새롭게 set 해주자 → 뭐로 set 해줄거냐면 해당 문자의 idx로..

라는 부분에서, idx로 0이 추가될 수 있다는 것을 그만 간과해버렸습니다. (...)

 

그럼 if (map.get(ele)) 라는 조건에 대해서, 만약 map에 ele라는 key에 대한 값이 0이었다면?..

 

0은 JS에서 Falsy(거짓 같은 값)이기 때문에, 이 경우 ele라는 문자가 이미 나온 적이 있는데도 불구하고 else 로직을 실행하게 되는 것이었습니다.

소감

Falsy에 대해서 알고 있었는데도 이런 실수를 해버렸다니..!

 

그래서 Falsy를 복습해 보았습니다.

 

https://developer.mozilla.org/ko/docs/Glossary/Falsy

거짓 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

 

값	타입
null	Null	null 키워드는 아무런 값도 없음을 의미합니다.
undefined	Undefined	undefined는 원시값을 의미합니다.
false	Boolean	false 키워드.
NaN	Number	NaN은 숫자가 아님을 의미합니다.
0	Number	The Number 0, 0.0, 0x0 등도 포함합니다.
-0	Number	The Number 음수 0, -0.0, -0x0 등도 포함합니다.
0n	BigInt	The BigInt 0, 0x0n 등도 포함합니다. Note that there is no BigInt에 음수 0가 없다는 것에 주목하세요. 0n의 음수 0은 0n입니다.
""	String	비어있는 string 값, also '' 및 ``도 포함합니다..
document.all	Object	JavaScript의 유일한 거짓 같은 객체는 내장 document.all입니다.

 

Falsy는 편리하고 재미있는 개념인 것 같습니다.

 

그래서.. Java나 Python과 같은 다른 언어에서도 Falsy가 공통된 개념인가 궁금해서 찾아보려고 했는데요..

 

응?

 

아무튼 Java는 JavaScript보다 더 엄격한 타입 체계를 가지고 있어서, 조건문서 사용하는 값은 반드시 Boolean 타입이어야 하며, 따라서 Java에서는 Falsy와 같은 개념이 필요하지 않다는 결론을 얻을 수 있었습니다. 비슷한 맥락으로, (타입 체계가 엄격하지 않은) Python에는 JavaScript와 비슷하게 Falsy 개념이 있다고 합니다.

 

터무니없게 Java에서 Falsy를 찾으니 제미니가 당황을 한 것 같습니다. (미안합니다..)

 

추가적으로, TypeScript에서도 Falsy 개념이 있지만 (TypeScript는 JavaScript의 상위 집합이므로.. 즉, TypeScript는 JavaScript의 모든 기능을 포함하면서 추가적인 기능을 제공하는 관계이므로), 타입이 명시적으로 정의되어 있을 경우 Falsy 검사를 사용할 때 컴파일러가 경고를 띄워줄 수도 있겠습니다.