🌈 시작하며
데이터 타입... 매우 중요한 개념이죠!
예전에는 call by reference와 call by value라는 개념을 전혀 알지 못해서, 항상 값이 변하는 과정을 제대로 캐치하지 못했던 기억이 생각나네요.
그때 참 추웠는데요. 그때의 날이 벌써 1년 반이네요.
그 꼬맹이가 벌써 회사도 들어갔다가 퇴사하고. 저는 1년 반 동안 꽤나 많이 성장했군요! 👋🏻
그러면 오늘도 역시~ 책을 보면서 언러닝하는 과정을 진행해볼까요!
오늘부터는 <코어 자바스크립트>, <You Don't know JS>도 같이 합쳐서 볼 거라... 정말 양이 어마어마하지만, 재밌을 거 같아요. 새로운 것들을 알아가니까 말이죠. 🥰
그럼, 시작해봅시다!
🚦 본론
핵심만 이해하자.
자바스크립트는 정말 유연하기 때문에, 때로는 '이런 계산이 가능하다고?'라는 말도 안 되는 일에 경악할 때도 가끔 있어요.
그렇지만, 그런 디테일한 것들을 하나하나부터 세밀히 따지는 순간, 진도는 나가지 않습니다.
우리, 좀 더 깔끔하게, 그리고 직관적으로 정리해볼까요?
결국 핵심은 원시 타입과 객체 타입
책에서는 더 자세한 것들이 상세히 써져 있지만, 저는 제 경험을 통해 이렇게 이 파트를 해석하고, 이해하고 있답니다.
제 경험상에서 이를 풀어나갈 때, 저는 메모리에 저장되어 있는 값의 타입이 원시 타입인지, 객체 타입인지를 따져요. 이게 정말 중요합니다.
😮 왜 그것이 중요한가요?
이유는 추후 불변성을 파악하는 데 굉장히 중요하기 때문입니다.
프론트에서는 데이터를 기반으로 화면 상의 상태 변화를 관찰하는 프레임워크들이 대세의 반열로 오르고 있는 추세입니다. 따라서 더욱 이러한 불변성은 중요해지고 있어요.
그럼 두 개로 나누어서 살펴보죠!
원시타입
numberstringbooleanundefinednullSymbol
객체 타입
object(객체)arrayfunction
네, 이제 자바스크립트 타입들을 잘 살펴봤죠!
😮 잠깐, 이게 끝인가요?!
음, 사실 나머지들은 정말 경험들을 직접 해보시면서 익히는 게 더 낫다는 게 제 생각이기는 합니다. (진심으로요)
그 이유는, 몇 개의 예외 케이스들의 연산으로 인한 괴랄한 결과를 보면 정말 입이 떡! 벌어지기 때문이죠. 🔥 괜히 이런 케이스들을 보면서 외워야겠다!라는 겁이 생기질 않기를 바랐어요.
다만, 위의 설명을 쓰면서, 적어도 강제 변환에 대한 이야기는 해야될 거 같아서, 이를 좀 더 풀어 설명해보려 합니다.
자바스크립트의 강제 변환
자바스크립트에서는 강제 타입 변환이 가능합니다.
이때 강제 타입 변환은 크게
- 명시적인 강제 타입 변환
- 암시적인 강제 타입 변환
으로 나눌 수 있어요.
둘의 차이는 의도적인 것이 드러나는지라고 볼 수 있을 것 같네요.
명시적인 강제 타입 변환은 코드의 작성자가 강제적으로 타입 변환을 시키는 것을 의미하는 한편, 암시적인 강제 타입 변환은 연산 도중에 발생하는 사이드 이펙트에 의해 처리되는 타입 변환을 의미한답니다.
예컨대 대표적인 예시는 다음과 같죠.
const result = {
name: '재영'
};
console.log(JSON.stringify(result));여기서 본래 result는 object 타입이었으나, JSON.stringify()를 만나면서 JSON 형식의 string으로 타입이 변환됩니다.
이렇게 코드 작성자가 명확한 의도를 갖고 형변환하는 것을 명시적 강제 타입 변환이라고 해요.
한편, 암시적인 강제 타입 변환은 어떤 걸까요?
const a = 1 + "2";
console.log(a);상식적으로 생각하자면, 이 연산은 되어서는 안 됩니다. 그러나 자바스크립트는 해당 연산에 대해 '원래 문자열로 처리하려 했겠지!'라는 결론을 내려버립니다.
따라서 결과는 '12'가 됩니다. 참... 신기하죠? 😂
그래서 보통, 대개 자주하는 실수 중 하나가 이러한 암시적인 강제 타입 변환을 너그럽게 넘어가버리는 것이에요.
우리는 A라는 결과를 기대했는데, B라는 결과가 나와버리니, 결과적으로 오류가 발생하는 것이죠!
따라서 제 개인적인 생각이지만, 암시적인 강제 타입 변환은 자바스크립트 문법에서는 벗어나지는 않는 문법이기는 하지만 다같이 코드를 작성하는 환경이나 가독성 코드가 중요한 환경에서는 권하지 않습니다. 결국 이러한 상상(?)을 요하는 작업들이, 결국에는 사이드 이펙트가 되어 우리들의 유지보수를 괴롭게 하기 때문이죠. 😥
상세한 자바스크립트 강제 타입 변환 종류는 이 블로그 글을 참고해도 좋을 것 같아요! 제가 직접 쓰기에는, 뭔가 글의 테마가 산으로 가는 느낌이 드네요 😅
해결 방법
이런 자바스크립트의 타입에 대해서 정말 골치가 아파서, 저같은 경우에는 타입스크립트를 쓰는 편이에요.
해당 변수가 어떤 타입을 갖고 있는지를 제대로 명시해주면, 이에 대한 타입을 만족하지 않을 시에는 오류를 내뱉기 때문에, 런타임 이전에 오류를 알 수 있다는 것이 정말 좋더라구요 😆
혹은, 꼭 자바스크립트를 써야겠다! 하는 분들은 (물론 타입스크립트를 작성하는 사람도) 타입 가드를 작성해주는 습관이 있다면 좋아요.
예컨대 다음과 같답니다.
const returnString = (s) => {
if (typeof s !== 'string') return null;
return s;
}이렇게 만약 특정 타입이 맞지 않다면 형변환을 해준다던지, 다른 처리를 해주는 방식으로 말이죠.
이러한 기법이나 타입스크립트 컴파일러를 통해 문제를 해결하면, 좀 더 신뢰할 수 있고 안정적인 애플리케이션 운영이 가능하겠죠!
✨ 마치며
사실 강제 변환을 쭉 들여다 보면 추상연산과 동시에 각 타입이 어떻게 변환하는 것까지 살펴봐야 해서, 이는 또 나중에 상세하게 글을 또 작성해보려 해요.
그래도 저도 뭔가 이 강제 타입 변환을 조사하는 과정에서 다른 책들도 참고하면서, 또 새로운 것들을 많이 알아가는 것 같아요.
특히, <You Don't Know JS>라는 책이 이 강제 타입 변환을 이해하는 데 참 많은 도움이 됐습니다. 다양한 책들을 살펴봐도 좋을 것 같아요! 이상 🌈
.jpg)