First written: 23-01-17
Uploaded: 23-01-17
Last modified: 23-02-27
Javascript는 내가 처음으로 좋아했던 언어다. Python으로 프로그래밍에 입문하여 데이터를 다루고 데이터 시각화를 했던 것이 처음으로 프로그래밍에 재미를 느꼈던 경험이지만, 그때만 하더라도 C++과 같이 type에 더 엄격한 언어들을 배우고 싶었다. 물론 생활이 바빠 Python을 써서 데이터 시각화하기에도 벅찼기 때문에 다른 언어를 배우지는 못했었고, 그냥 계속해서 Python을 썼다.
시간이 흘러 스페인어를 한참 공부하던 어느 시기, 하루종일 스페인어만 하기에는 머리가 아파서 좀 편하게 공부할만한 것이 없을까 고민이 들었다. 그러다가 알고 지내던 강사님이 웹 개발과 Javascript를 엮어서 이야기했다. 예전에 해외여행을 길게 하고 귀국했을 때 하고 싶던 프로젝트들이 개발자 친구들의 미적지근한 태도로 할 수 없게 되었던 게 떠올랐다. 내가 웹 개발을 할 줄 알면 그런 프로젝트를 할 수 있겠구나, 편하게 공부하면서 1-2년 후에는 내 프로덕트를 만들어보자, 라고 생각하면서 Javascript를 배우기 시작했다. Javascript가 웹에서 쓰는 언어라고 했으니 다른 언어고 뭐고 고민할 것 없이 바로 Javascript를 쓰기 시작했다.
그러면서 알게 된 건, 우리나라 취업시장에서 Javascript는 프론트엔드의 언어 정도로 취급된다는 것, 그리고 웹 개발쪽을 하지 않는 친구들은 자꾸만 Javascript를 Java라고 부르거나 심지어는 둘이 같은 언어라고 알고 있다는 것과 같은 이야기들이었다. 심지어 "Javascript is Weird"(자바스크립트는 이상해)라는 밈으로 유명한 언어라고 했다. 내가 전에 배우고 싶었던 type에 엄격한 언어도 아니었다.
난 그런데도 그냥 Javascript에 정이 갔다. 처음에는 내가 이 긴 시간동안 배운 언어인데 다른 언어를 새로 배우거나 관심을 갖는 것 자체가 시간이 아까운 것도 있었다(초보개발자일 때는 아직 언어들 간의 차이가 커보일 때다). 하지만 시간이 지나면서 투입한 시간에 대한 아까움보다는 아무도 잘 하려고 하지 않고(백엔드 개발자는 Java에 목을 멘다, 프론트엔드 개발자는 React로 넘어가는 징검다리 정도로 Javascript를 취급한다, 다른 분야의 개발자들은 Javascript를 아예 배울 생각을 하지 않는다), 게다가 정말 이상한 동작들이 많은 기괴한 언어를 나는 잘 하고 싶다는 생각이 들었던 것 같다. 프로그래밍 언어 하나를 잘 하면 다른 언어를 잘 한다는 말을 믿고 한 번 이 Weird한 Javascript에 전문가가 되어보고 싶은 생각이 들었다.
그렇게 샀던 책이 『You don't know JS』 시리즈 두 권이었다. 아직 초보개발자일 때 사서 너무 신기해하면서 시간 가는줄 모르고 읽었다. 재미야 있었지만, 당시 내 레벨로는 내용을 이해하기에 버거운 면이 있었다. 그렇게 시간이 많이 흘러 이제는 외주도, 프로젝트도, 교육쪽 일도 해본 개발자가 되었고, 이제는 Javascript를 정리할 때가 온 게 아닐까, 라는 생각이 들었다. 원래는 현재 읽고 있는 『Nginx 쿡북』을 완독하고, 멀티스레드 자바스크립트에 대한 책과 Typescript에 대한 책을 읽은 뒤 Web 3.0에서 쓰인다는 언어 하나(GO가 될지 다른 언어가 될지)를 배울 생각이었다. 그런데 마침 서점에 가보니 내가 보려던 멀티스레드 자바스크립트 책과 Typescript 책이 모두 품절이 되어 있었고, 이 책 저 책을 돌면서 생각을 정리하다보니 멀티스레드 자바스크립트나 Typescript로 넘어가기 전에 Javascript를 제대로 정리하면 재미있겠다는 생각이 들었다.
하여 기획한 시리즈는 "Javacsript si Wierd". 『You don't know JS』 시리즈 두 권을 보면서 Javascript 관련된 복잡한 개념들을 정리할 생각이다. 정리라고는 하지만, 그냥 한 번 슥 보고 넘어가도 상관없는 부분은 예시와 짤막한 설명만 있을 수도 있다. 나에게 아직 친근하지 않은 개념들은 지나치게 설명이 많을 수도 있다. 그런 맥락에서의 '정리'이므로 혹여나 내용을 보고 더 깊게 관심이 가는 분들은 이 시리즈 내내 참고할 『You don't know JS』 시리즈를 직접 볼 것을 권한다. 좋은 책이다.
이 두 권을 보고 필요에 따라서는 중-고급 Javascript 서적을 한 권 더 볼 생각은 있다. 『You don't know JS』 시리즈에는 나오지 않지만 Javascript를 이해하는 데에 필요한 중-고급 개념이 담긴 책이 있을 경우에 아마 보지 않을까 싶다. 여튼 이 시리즈가 내 블로그 독자들에게도 도움이 되면 좋겠다.
Javascript는 Type Enforcement(타입 강제)를 하지 않는다. 변수에 들어가는 값은 처음에 할당되었던 값이 가지고 있던 type과 달라도 상관이 없다.
object를 제외한 나머지를 Primitives(원시타입)라고 부른다.
typeof null === "object"; // true
typeof로 null을 체크하려면 아래와 같이 해야 한다.
var a = null;
(!a && typeof a === "objcet"); // true
typeof function a() { /* ... */ } === "function"; // true
typeof function a() { /* ... */ } === "function"은 true로 평가된다. 하지만 실제로 function은 최상위 레벨의 Primitive가 아니며, object의 하위 타입으로(array 역시 object의 하위 타입이다) callable object다.
덕분에 아래와 같은 것도 가능하다.
function a(b, c, d, e, f) {
/* ... */
}
a.length; // 5
a.length가 parameter의 개수를 알려준다.
var a;
typeof a; // undefined
typeof b; // undefined
b의 type은 선언조차 않았음에도 undefined가 된다. 이는 typeof b를 해도 오류 처리를 하지 않기 위한 독특한 safety guard다.
아래와 같이 polyfill을 정의할 때 유용하게 쓰인다.
if (typeof atob === "undefined") {
atob = function () { /* ... */ };
}
물론 전역 변수가 모두 전역 객체의 property라는 것을 활용하면, (비록 바람직하지 않지만) 아래와 같이 작성하는 것도 가능하다.
if (!window.atob) {
/* ... */
}
또한 기존에 같은 변수가 존재하는 것을 체크할 때에도 사용이 가능하다.
function doSomething() {
var helper =
(typeof FeatureX !== "undefined") ?
FeatureX :
function() { /* ... */ }
}
물론 아래와 같이 작성도 가능하다.
function doSomething(FeatureX) {
var helper = FeatureX ||
function() { /* ... */ }
}
참고 서적 :
카일 심슨, 2017, 한빛미디어, 『YOU DON'T KNOW JS: 타입과 문법, 스코프와 클로저』