본문 바로가기

JavaScript20

Spread Syntax와 Rest Parameter 전개 구문(Spread Syntax)와 Rest Parameter를 딱히 구분해서 공부하진 않았는데, 확실하게 기억해 두지 않으니 사용할때마다 헷갈린다. 이번 기회에 확실하게 정리해 두도록 하자. Spread Syntax 전개 구문은 반복 가능한 배열, 문자열 또는 이터러블에 대해서 사용이 가능하다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 위 예제와 같이 함수의 파라미터로 넘길 때 "..."를 사용하여 넘기면 내부적으로 풀어서 인자를 전달 해준다. const numbers = [1, 2, 3]; const num = [...numbers, 'four', '.. 2019.11.03
패턴 매칭(Pattern Matching) in JavaScript TC-39 Github에 패턴 매칭(Parttern-Matching)이 Stage 0에서 1로 한단계 등급이 상향됬었다. Stage1은 proposal 단계로 앞으로 TC-39 위원회에서 논의할 예정이며, 구체적인 데모에 대한 코드도 포함되어야 한다. 아직 Stage2(draft)와 Stage3(candidate), 그리고 stage4(finished)를 거쳐 정식으로 스펙에 추가되려면 갈 길이 멀지만 어떤 기능을 가지고 있고 또 어떻게 사용할 수 있는지 간단하게나마 미리 알아보도록 하자. 패턴 매칭은 Scala, F#, Rust 등 다른 언어에도 있는 기능인데, 앞서 언급한 언어에 대해서는 잘 모르지만, 비교적 단순하므로 다른 언어를 통해 알아보도록 하자. Scala object MatchTest1 e.. 2019.09.30
Beginning Javascript Iterator and Generator 이전에 Javascaript의 Iterator에 대해서 몇가지 다뤄보았었는데, 도입된지 얼마 안된 스펙이다보니 자유 자재로 다루기가 아직 버겁다는 생각이 많이 들었다. 또한 최근 이터레이터와 제네레이터를 이용해 멋지게 구현한 코드들을 접하고 나서, 연습을 많이 해야겠다는 생각이들어 여기에 정리해 보고자 한다. 아래 함께보면 좋은 글들을 같이 링크하므로 관심있는 사람은 먼저 읽어보는 것도 좋겠다.Javascript IteratorES6의 심볼, 이터레이터, 제네레이터ES6의 제너레이터를 사용한 비동기 프로그래밍Async-await는 어떻게 구현하는가?Iterator를 사용하면 좋은 점? 아무리 좋은 기능이라도 적절하게 사용하지 않으면 독이 될 수 있다. 이번 기회에 Iterator를 사용했을 때 얻을 수 .. 2019.01.12
Why React Hooks 최근 React v16버전으로 업데이트되면서 여러가지 개발 효율성을 높여주는 API들이 추가되고 있다. 최근 회사에서 시작한 스터디에서 이번에 React Conf 2018에서 소개된 Hooks에 대해 공부하기로하여 여기에 정리해 본다. Why Hooks ? 어떤 기능에 대해 깊게 이해하고 싶다면, 그 기능이 왜 생겼는지에 대하여 알아보는 것이 가장 좋은 방법이라 생각한다. 따라서 이 글에서는 Hooks을 다루는 API보단 도입 배경에 초점을 맞추도록 하겠다. Hooks 문법을 모르는 사람은 사람은 간단히 Hooks at a Glance를 읽고 오도록 하자. 다시 돌아와서 Facebook은 React Hooks을 왜 도입되게 되었을까? 사실 공식 문서인 Intoducing Hooks Motivation에 .. 2019.01.05
Javascript Optional Chaining ES2015가 나온지 꽤 오랜 시간이 지났다. function-bind, rest spread, decorator 등 개발을 편하게 도와주는 문법들이 정의되면서 개발을 하는데 한층 더 수월해지는 것 같다. 오늘은 최근 개발하면서 사용하기 도입하기 시작한 꿀같은 기능. Optional Chaining에 대해서 정리해 보고자 한다. Optional Chaining? Optional Chaining. 말 그대로 특정 값에 대한 참조에 대해서 값이 존재하지 않을 때 선택적으로 체이닝 할 수 있는 문법이다. 이 문법은 C#의 conditional operator, Swift의 Optional Chaining, 또 CoffeeScript의 Existential operator와 매우 유사하다. 다른 언어들에서도 유.. 2018.11.10
Async-await는 어떻게 구현하는가 지난 포스트였던 Javascript Iterator에서 잠깐 언급했었던 async-await에 관해 이야기해 보도록 하자. 시작하기에 앞서 이 포스트에서는 async-await에 대한 문법을 다루지 않는다. async-wait가 어떤 배경을 가지고, 어떤 방법을 통해 구현이 되어있는지 그 근원에 대한 탐구를 할 생각이다. 따라서 iterator, promise, generator, async-wait, 그리고 Babel에 대한 사전 지식이 필요한 사람들은 아래 링크에 있는 글들을 먼저 읽어보길 바란다.Javascript IteratorES6의 제너레이터를 사용한 비동기 프로그래밍Async Function Async-await? Async-await는 ECMA-262에서 초안으로 처음 등장했으며, ECMA.. 2018.10.28