JavaScript API 전체를 왜 다 봐야할까?

slaslaya·2020년 4월 24일

이 글은 개발자들을 설득하기 위한 글이 아닌, 내 스스로 목적성을 가지기 위해 쓰는 글이다.

나는 입사 삼일쯤 후? JavaScript 공부 방법에 대해 추천받았는데, JavaScript API 문서 전체를 다 보라는 것이었다.
그때 해주신 얘기가 너무 설득력 있어서 들으면서 블로그도 하고, 토이 프로젝트도 하고 공부를 손에 놓지 않고 열심히 사시는 다른 주니어 개발자분들이 이 이야기를 듣는다면 TIL 급으로 많이들 하겠다 생각했다. 나만 듣기가 아까울 정도..

나는 이 이야기를 주위 개발자분들에게 공유를 했는데, 어떤 개발자분은 들으시면서 핸드폰 메모에 적기도 하시고(정말 대단해 👏 존경해욧), 대부분의 반응은 비추천이었고 굳이?라는 반응이 많았다. 그래서 더해야 하는거구나 싶기도 했다.

이 이야기를 듣고 나는 DOM API 보다가? TypeScript 보고? Redux-toolkit 보고? React 보고? Github Action 보다가? 내가 모르는 새로운 것들에 관심을 가지고 여기저기 조금씩 손만 살짝 담가보다가.. 다시 돌고 돌아 JS API로 돌아왔다. 시간이나 양으로 치면 JS API도 손톱 끝만 담가본 수준인데.. 글을 쓴다... 초반에 목적성을 가지면 좋으니까 ☺️

설계

가장 큰 이유는 설계를 위한 것이다. 뭐가 있는지는 알아야 어떻게 만들지가 나올 테고...
이유는 한줄 끝이다. 사실 공부할 때 너무 많은 의미 부여와 많은 생각을 가지기보단 그냥 하는 게 최고다.

이렇게 끝나면 심심하니까 나의 에피소드를 붙여본다.

Object.prototype.valueOf()

나는 소소하게 알고리즘 푸는 걸 좋아하는데 작년에는 Codewars에 빠져 문제 쇼핑을 하는 취미를 가졌다. Codewars 문제들은 인간미가 있어서 좋아했다. 스토리가 있고 덕후 느낌도 강하고 Codewars 첫 시작도 포켓몬 문제였다. 어디서 포켓몬 문제를 찾겠어 🤣. 그리고 문제 스타일도 매우 다양해서 Codewars로 처음 웹스크래핑을 할 수 있는 cheerio를 써봤다..(이게 알고리즘이라고?? - Scraping: Codewars Top 500 Users)

평소와 같이 문제 쇼핑을 하는데 내 개념을 뿌셔뿌셔하는 문제를 만나게 되었다.

A Chain adding function

Link

문제

We want to create a function that will add numbers together when called in succession.

add(1)(2);
// returns 3
We also want to be able to continue to add numbers to our chain.

add(1)(2)(3); // 6
add(1)(2)(3)(4); // 10
add(1)(2)(3)(4)(5); // 15
and so on.

A single call should return the number passed in.

add(1); // 1
We should be able to store the returned values and reuse them.

var addTwo = add(2);
addTwo; // 2
addTwo + 5; // 7
addTwo(3); // 5
addTwo(3)(5); // 10
We can assume any number being passed in will be valid whole number.

이 문제를 만나고 멘붕이 왔다. 그리고 너무 풀고 싶더라 내 상식 밖 느낌의 문제였다.😭 개념 뿌셔뿌셔
이게 가능하다고? 체이닝을 하려면 함수안에 내부 함수를 만들어서 return 하는데, addTwo + 5; // 7 이 경우도 가능하니 숫자도 return 되는 느낌이었다.

이 문제로 혼자서 고통받을 수 없어서 주위 알고리즘 푸는 분들에게 공유를 했다. 한 분이 결국 정답을 보셔서 나는 그분이 주는 힌트(거의 떠먹여주는)를 줍줍해서 어찌어찌 풀었는데 풀고 나서도 멘붕이더라.. 😵

답은 원시 값이 필요로 할 때 알아서 반환해주는 Object.prototype.valueOf() 를 이용하는 거였는데, 원시값을 따로 가지고 있지 않으면 객체 스스로를 반환하는데, valueOf 메서드를 재정의하여 number가 반환되게 하는 것이었다.

무려 MDN에 예제도 있다.

function MyNumberType(n) {
    this.number = n;
}

MyNumberType.prototype.valueOf = function() {
    return this.number;
};

var myObj = new MyNumberType(4);
myObj + 3; // 7