[JS] 타입은 왜 중요한가 (feat. TypeScript의 필요성)

 

본 글은 초보개발자의 입장에서 작성된 글이며, 잘못된 설명이 포함될 가능성이 있습니다.

🙌잘못된 설명에 대한 지적이나 조언의 댓글을 환영합니다🙌

 

 

https://inf.run/dzXn

매일 아침에 출근해 업무를 시작하기 전, 5-10분 동안 깃헙의 잔디를 채울 겸 JS공부를 할 겸 제주코딩베이스캠프의 JS 100제 강의에서 제공되는 문제를 푸는 중이다. 사실 아침에 해설 영상까지 볼 시간은 없어서 문제를 푼 뒤에 답안을 보고 내가 맞게 풀었는지 정도만 확인하고 있는데, 오늘 풀었던 13번 문제를 푸는 과정에서 문득 이런 의문점을 갖게 됐다.

제주코딩베이스캠프 Code Festival: JavaScript 100제 - 인프런 | 강의

 

---

 

const a = ['수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성'];

let num = prompt('숫자를 입력하세요');

console.log(a[num-1]);

사용자로부터 입력값을 받아 해당 순서의 행성 이름을 출력하는 문제였는데, 위 코드가 이번 문제의 답안이었다. 

간단한 문제였고, 무난하게 풀 수 있었는데 내가 생각한 답안은 책에서 제공하는 답안과는 조금 달랐다.

 

const a = ['수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성'];

let num = prompt('숫자를 입력하세요');
num -= 1;

console.log(a[num]);

위 답안이 내가 생각한 방법인데, 책에서 제공하는 답안보다 코드 한 줄이 더 많은 점이 제법 거슬렸다. 

이런 코드를 작성하게 된 이유는 콘솔로 값을 찍다가 console.log(a[num+1]) 을 우연히 실행시켜봤는데 값이 undefined가 나오는 게 아닌가. 그래서 당연히 console.log(a[num-1]) 도 undefined가 나오지 않을까 해서 저렇게 num 계산을 별도로 해주는 답안을 작성하게 됐었다. 사실 책에서 제공하는 답안을 보고 의문이 들었는데, 왜 num+1했을 때는 출력이 안되고 num-1을 했을때는 값 출력이 정상적으로 되는지를 도저히 이해할 수가 없었다. 그래서 구글링도 해봤는데 도저히 어떤 키워드로 검색해야 할지 감이 잡히지 않아 같이 공부하는 동료들에게 질문을 던졌다.

 

 

9시 5분쯤부터 문제를 풀기 시작했는데, 질문한 시간은 24분ㅋㅋㅋㅋ

이렇게 질문을 하고 업무를 보고 있었는데 동료들이 다양한 답을 던져주기 시작했다.

그중 타입 때문에 이런 현상이 발생하는 게 아니냐는 이야기가 있었는데, 정말 유레카스러웠던 순간이었다. 

 

 

콘솔로 타입을 찍어보니 요상한 타입을 뱉어내는 콘솔을 확인할 수 있었다.

동료들이 해당 값의 타입을 찍어 봤을 때 동작이 이상한 것 같다고 의견을 주셔서 확인해보니 정말 이상한 타입이 나왔고, 스스로 문제를 살필 때는 도저히 생각하지 못했던 부분이었던지라 해결의 실마리를 찾은 기분이었다. 사실 JS에서는 타입을 별도로 선언해주지 않고 사용하기 때문에 암묵적 형변환에 의존해서 사용하게 되는데,  포스팅을 하려고 찾아보니 이러한 기능은 가급적이면 사용하지 않는게 좋다고 한다. 내가 겪은 의문점도 형변환 때문에 생겼다고 생각하니 사람들이 왜 가급적 쓰지 말라고 했었는지 체감할 수 있었다.  

 

더 정확하게 이야기하자면, prompt를 통해 받아온 값은 String 형태로 저장되고 있었다.

만약 prompt로 값:1을 입력받아왔다면 a[num]은 숫자 1로 암묵적 형변환이 되어 a[1]의 값인 '금성'이 출력되고,

a[num-1]도 -1을 처리하기 위해 동일한 암묵적 형변환이 발생해 a[0]에 해당하는 값인 '수성'을 출력했던 것이다.

 

그렇다면 왜 a[num+1]만 undefined가 나온 것일까? 

num+1에는 암묵적 형변환이 일어나지 않아서 해당 출력 값이 표시된 것일까?

그건 아니다. a[num+1]인 경우 JS엔진이 이를 a['1'+1] 로 인식해 a[2]가 아닌 a['11']로 처리했고 이후에 형변환이 일어나 a[11]을 출력하려고 보니 배열에 인덱스가 11인 값이 없기 때문에 undefined가 출력된 것이다. 이렇게 보니 간단한 이유인데 이 생각을 못해서 한참 문제와 씨름했던걸 떠올리니 다시 한번 사람들이 왜 타입스크립트를 쓰는지 알 것 같기도 했다🤦‍♀️

 

 

---

 

 

이러한 문제를 해결하기 위해서는 명시적인 형변환을 사용해주면 된다. prompt를 통해 받아온 입력 값이 String 타입이지만, 나는 해당 값을 Number로 사용할 예정이기 때문에  prompt('숫자를 입력하세요')라는 function을 Number()로 감싸 명시적인 형변환을 해주면 된다. 이렇게 명시적으로 형변환을 시켜준 뒤에는 console.log(a[num+1])을 찍어도 내가 의도한 '지구'라는 출력 값을 표시하게 된다. 

 

오늘도 이렇게 타입을 잊으면 안 되겠다는 엄청난 교훈을 얻었다..🙏