유연해지기/Javascript

JavaScript Set 내 맘대로 구현하기

서론 Symbol을 학습하면서 iterator 부분을 직접 코드로 작성해보고 싶어졌다. 그래서 간단한 Set을 직접 구현해서 iterator을 적용해봐야지 했다. iterator 부분은 금방 구현했다. 하지만 Set을 JavaScript의 Set과 최대한 비슷하게 만들고 싶었는데 그 부분이 잘 안됐다. 갑자기 이상한 곳에 꽂혀서 이래저래 삽질한 과정을 글로 남겨보려고 한다. 자료구조로서의 Set Set은 자료구조로서 비단 JavaScript에만 존재하는 개념은 아니다. 간단히 정리해 Set은 다음과 같은 특성을 갖는 자료구조이다. 보관된 값들에 순서가 존재하지 않는다. 각 값들은 중복되지 않는다. 값의 존재 여부를 파악함에 용이하다. Javascript에서의 Set을 간단하게 직접 구현해보기로 하자. (..

Vanilla Javascript로 간단한 SPA 라우터 구현해보기

Vanilla Javascript로 간단한 SPA 라우터 구현하기 서론 본문을 이해하려면 History API와 브라우저의 History 스택에 대한 이해가 필요하다. SPA의 경우 페이지를 이동할 때 anchor 태그를 활용해 새로운 html을 불러오는 게 아니다. index.html 하위의 DOM을 갈아 끼우면서 다른 페이지를 보여주는 방식이다. 이때 새로운 HTML을 불러오지 않으면서 어떻게 앞으로 가기 뒤로 가기를 구현할 수 있을까? 답은 History API에 있다. 브라우저에서 제공하는 History API의 자세한 설명은 여기서 참고하길 바란다. 프로젝트 구조 ├── index.html ├── main.js ├── package.json ├── 📦 src │ ├── app.js │ ├── 📦..

[Javascript] Iterable, 반복자 그리고 생성자 함수에 대하여

Iterable이란 ? 자바스크립트에서 iterable이란 반복이 가능함을 의미한다. 반복이 가능한 요소는 무엇이 있을까? 배열, Map, Set 등 모두 iterable 한 요소이다. 이러한 요소들이 iterable 한 것은 Iteration Protocol을 따르기 때문이다. Iteration Protocol 을 따름으로써 for ... of 구문이나 spread 문법 등을 사용할 수 있게 된다. Iteration Protocol이란? Object를 iterable하도록 만드는 표준방법을 제시하는 일종의 규약이다. 이 프로토콜을 따라 iterator을 구현할 수 있다. Object가 iterable 하기 위해서는 @@iterator 메소드를 가지고 있어야 한다. 이는 Object가 [Symbol.i..

[Javascript] Promise 예제 풀어보기

https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous Coding Games and Programming Challenges to Code Better CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun. www.codingame.com 간단한 프로미스 퀴즈가 3개 있다. 다 맞은 기념으로 풀이를 정리해보고자 한다. 1번 functio..

[Javascript] 자바스크립트 Map 정렬하기

잡소리, 서론 코딩테스트 응시언어가 js로 제한되어있는 곳에 지원했다. 자바스크립트와 친숙했던 나지만 자바스크립트로 알고리즘 문제들을 풀어본 적이 없어서 이것저것 찾아보면서 공부하고 있다. Map이라는 자료구조가 있는 줄 모르고 객체에 삽입/삭제하면서 삽질했던 나를 반성하며 포스트를 작성한다. Map Key-Value 자바스크립트의 Map은 key-value 쌍으로 이루어져 있는 자료구조이다. key 값에 아무거나 다 넣을 수 있다. 심지어 함수도 넣을 수 있다. const testmap = new Map(); testmap.set(1,123); testmap.set(2,345); testmap.set(3,789); const funcRef = () => {}; testmap.set(funcRef, 'f..