357 Followers
·
Follow

Learnings from reading “Rediscovering Javascript”

The past few years I’ve neglected to keep up with my javascript knowledge. It felt like my day-to-day frontend work became harder to do. So I decided to read up on the latest developments and chose to read this book.

Compared to other programming books I’ve read this may be one of the best written out there. It’s easy to read, topics covered are well chosen, example code is short and concise (I’m not getting paid whatsoever to write this). The book written by Venkat Subramaniam starts with a few chapters covering the parts of modern javascript that is used a lot out there and tells a bit about their background and compares the modern way of doing things with the old ways. Behavioural differences between const, let and var, () => {} and regular functions, using modules and spread operators get some attention, but luckily not too much as more information about these can be found everywhere else.

There were plenty of other parts explained that I’d never seen in the wild before. For me these are the highlights of the book.

Reflect

In es6 instantiated objects can be inspected with a built-in object called . With Reflect you can amongst others get, set, check attributes and call functions of/on an object. At first glance this doesn’t look very exciting, but you can get creative with this. Also you can get or set the prototype of any object which has large implications which will be explained later in this article.

Reflect on MDN

Classes are still prototypes

Classes have finally arrived in javascript, but something is peculiar about them. Under the hood they are actually prototypes and backwards compatible with the old fashioned javascript prototype chain. When used in conjunction with the Reflect object funny situations can occur. It’s possible to extend a class and at runtime change the superclass into something else, with this changing the nature of an object instance. Even though classes are still prototypes we are happy with them nonetheless providing much convenience in defining classes and extending them is a big improvement any way.

Symbols, a new primitive type

From the MDN docs: “A symbol value may be used as an identifier for object properties; this is the data type’s only purpose”. Using these Symbols as object members can determine how javascript treats these objects. Symbol properties and functions won’t show up as an actual member of an object, but are available when applying them. Well-known methods of the Symbol object are , and .

Using objects as iterators

Besides arrays you can define an instance to be an iterable object. This object implements the Iterator Protocol meaning it’s required to have a method that returns an object with a and a property. When the property is the loop stops iterating. The property is the value in the current iteration.

Generators

For generating values. Requires at least a yield otherwise the *function will raise an error. The responsibility of looping through values is put on the caller instead of the generator function. This means a generator function can hold an infinite loop while the caller determines how many values of the infinite loop it needs.

Tagged templates

Tags are functions that receive the contents of the provided template literal in 2 parts: the static string parts and the variable values both presented in an array. After disassembled the template literal can be reassembled in another way of your choosing.

Object Literals

It was always possible to have variable function names for object members. However with object literals readability has improved and variable functions don’t have to be called like , instead they are treated as computed properties inside the object resulting in a natural way of calling `.

Example from the book

Meta programming with Proxy

A proxy is another built-in object that changes the behaviour of get, set and function call operations of an object dynamically based on the current state at runtime. With a proxy it’s possible to hijack a function and perform some extra code before, after or around the original function. This may be desirable when original legacy code needs to be left intact while requiring some modifications in its behaviour.

Decorators

Available in many other programming languages and now it’s in javascript as well. A decorator enriches a class with whole set of functions. The Angular framework is a well-known example of this pattern. In the example the library is used to define meta data on the base Component. The data can be set when decorating another component.

Even though it’s not always obvious what kind of problems these features can solve I’m sure I will run into situations sooner or later where these will come in handy. Besides that, knowing these help me understand what’s actually going on under the hood when reading code and syntax used by some frameworks won’t look like black magic to me any more. (D)

Written by

Software engineer at @yourmajestyco . Interested in urban planning & technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store