나만 불편한가...
알고리즘 문제를 풀다보면 키를 통해 값에 빠르게 접근 할 수 있다는 장점이 있어서 종종 해시맵을 이용하게 된다.
하지만 반복문을 이용해 해시 맵 안의 값에 접근하다보면 가끔 저장되지 않은 키로 접근해버려서 undefined가 반환되고, 그런 상황을 고려하지 않고 그냥 계산을 하다가 보면 맵에 저장된 값이 온통 NaN이 되어버리곤 한다....
IDE도 이런 상황을 경계하라면서 경고메시지를 보내는데, 충분히 대비를 한 것 같은데도 자꾸 경고를 보내는게 불편해서 이런 상황을 피하기 위한 방법을 찾다가 공부하게 된 개념 몇 가지를 정리하고 가려고 한다.
예시 상황
const reference = new Map<string, number>();
for (let word of words) {
if (reference.has(word) {
reference.set(word, reference.get(word) + 1);
} else {
reference.set(word, 1);
}
}값을 저장하기 위해 문자열을 키로 가지고 숫자를 값으로 가지는 해시맵을 만들었다.
그리고 words라는 배열의 요소들을 확인해 배열 안에 같은 단어가 몇 번 반복되는지 값으로 저장하도록 만들었다.
대단한 걸 확인하는 것도 아닌데 if문을 사용하면 괄호를 열었다 닫았다 하다보면 코드가 길어지고 지저분해보여서 조금 더 짧은 표현을 찾게 되었다.
그리고 저렇게 대비를 해 줘도 여전히 reference.get(word)에 undefined가 들어갈 수 있다면서 빨간 줄은 사라지지 않는다.
조건부 삼항연산자
파이썬으로 개발 공부를 처음 시작했을 때 유일한 삼항연산자가 조건부 삼항연산자라는 설명을 보고 뭔가 재미있다 싶어서 기억해놓고 종종 쓰게 되었다. (현재 자바스크립트 문법에서도 유일한 삼항연산자라고 한다)
const reference = new Map<string, number>();
for (let word of words) {
reference.set(word, reference.has(word) ? reference.get(word) + 1 : 1);
}reference has word? 부분이 마치 영어 문장 처럼 보여서 조금 재밋긴 하지만 결국 : 부분에 오면 한계가 보인다.
그리고 요즘 삼항 연산자를 자주 쓰다보니 느낀건데 이것도 여전히 길다.
논리연산자 (||)
삼항 연산자를 쓰는 것보다 더 짧은 방법으로는 논리 연산자 ||를 사용하는 것이 있었다.
모던 자바스크립트 튜토리얼 - 논리 연산자 ||의 추가 기능
문서를 간단히 요약하면, 자바스크립트 문법에서 논리연산자 '||' 는 boolean 타입 값 (true, false) 만을 반환하는 게 아니라 피연산자 중 가장 왼쪽에 있는 falsy가 아닌 값, 혹은 맨 마지막 피연산자를 반환한다고 한다.
그래서 이런 식으로 활용이 가능하다.
const reference = new Map<string, number>();
for (let word of words) {
reference.set(word, reference.get(word) + 1 || 1);
}reference[word]에 값이 없다면, reference.get(word)로 word에 저장되어있는 값에 접근해도 undefined가 반환되고, undefined에 숫자 1을 더하면 NaN가 된다.
그러나 NaN은 falsy한 값이라서 논리연산자 || 덕분에 NaN대신 1이 저장된다.
falsy
falsy는 조건문 등에서 거짓으로 판단되는 값들이다.
false, 0, null, undefined, NaN, 빈 문자열("") 등등이 falsy 한 값들이다.
if (NaN) {
return '참';
} else {
return '거짓';
}
// '거짓'이 반환falsy 하다고 명시 된 값 이외에는 전부 truthy한 값이고, falsy한 값은 다 해봐야 10개도 안 되고, undefined나 NaN 같이 뭔가 실수 했을 때 출력되는 값들이 많아 직관적인 덕분에 기억하기 어렵지 않다.
nullish coalescing operator (??)
ES6 이후의 자바스크립트 문법을 사용한다면 '??'연산자가 사용 가능하다.
'||' 연산자와 거의 비슷한데 falsy한 가를 확인하는 것이 아니라 defined 되었는가를 확인한다.
조금 더 쉽게 말하자면, undefined와 null 이외의 값은 전부 통과시키기 때문에 undefined에 1을 더한 값(NaN)이 저장되는 상황은 막아주지 못한다.
다만 숫자 0이 의미있는 상황이나, 선택적 체이닝에 사용하는 '?.' 연산자를 이용할 때 연동해서 사용할 수 있다고 한다.
쓰지 않는 것을 추천받았다.
논리 연산자를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋습니다. 그러니 if 조건문이 필요하면 if를 사용하고 논리 연산자는 연산자 목적에 맞게 사용합시다.
-모던 자바스트립트 튜토리얼
알고리즘 풀이는 다른 사람을 위해 가독성을 높여야 할 필요가 거의 없고, 시간 제한이 짧다보니 코드가 짧아지면 유리하겠지만, 협업을 해야하는 상황에서는 코드 길이보다는 가독성이 우선되다보니 사용하지 않는 것을 추천 받았다.
IDE가 보내는 경고를 없애고, 코드를 짧게 만들기 위해 자바스크립트의 문법을 알아보기 시작한 문법 공부였는데, 코드의 길이보다 가독성이 중요하다는 것을 인지하는 계기가 되었다.
