ILJS, Author at I Learn Javascript

Task automation with Gulp.JS

ILJS — Sat, 30 Mar 2019 21:51:06 +0000

Task automation with Gulp.JS

20min read

Gulp.JS is an open source Javascript toolkit to improve your development workflow. It is a task runner build on top of Node.JS and npm used to automate repetitive tasks in web development. Task runners like gulp are used frequently (but not exclusively) during the build process. Examples of such tasks include compiling SASS to CSS, autoprefixing CSS, minification, file concatenation, string replacement within a file, renaming files, injecting code into files, transpiling modern Javascript (ES6+) to browser compatible ES5 with babel, watching for changes in files to automatically reload the development server (hot reloading) and everything else you think that should (and could) be automated.

This article will not compare gulp to webpack, npm scripts or rollup.js. There have been many great articles written about that already. The goal of this blog post is to show you with practical examples how to get started with gulp and setup a build process that includes the folowing tasks:

compile SASS to CSS
Autoprefix CSS
Minify your CSS and Javascript files
Transpile your ES6+ code to ES5 via babel
Create sourcemaps for the minifcation and transpiling
Rename your files
Inject files into other files
Create a file watcher and development server that automatically reloads when a watched file changes

Setup & Installation

In order to follow this post and try the examples you need to have a recent version of Node.JS and npm installed (npm comes automatically with a recent node version). You can check if you have Node.js and npm installed by executing in your terminal the following two commands (one after another)

“node -v”

and

“npm -v”

and wait if there is a version number popping up. If you don’t have it yet installed I would recommend you to do it first. You can download an install Node.JS directly from here. Personally I prefer to install Node.JS through nvm (node version manager) because it gives you the flexibility to switch between different node versions at ease. I installed nvm via homebrew but you can also use curl or wget. There are many instructions on how to intstall it so I will not repeat that here but trust in you that you will manage it :)

Lets start:

Install the gulp-cli in order to start gulp commands from your terminal with: “npm install -g gulp-cli“
Create a new folder “gulp-example”
Within that folder create the following files:
1. package.json
2. gulpfile.js
Within gulp-example create two subfolders “src” and “build”.
Open the src-folder and create the following files:
1. index.html
2. main.js
3. style.scss

If you are lazy you can use the following terminal command to setup everything:

View the code on Gist.

Package.json

The package.json stores among a few basic informations about your project all packages that need to either run for developing (devDependencies) or are mandatory for the final application (dependencies). By running npm install all specified packages will be downloaded and stored in a node_modules folder within your project.

In order to setup the build process mentioned in the introduction we need to download some plugins first. Everything what we need is specified in the devDependencies. Please copy the following content into your package.json:

View the code on Gist.

Open your terminal and cd into your /gulp-example directory (if you used my provided command to setup everything you are already in the gulp-example directory). Run npm install in order to automatically download and install all node modules. Note that by the time you read this article some of the plugins might be outdated already. If you want to update your packages run npm update but be aware that incompability of versions might break the setup. If this happens go back to the specified setup here.

Gulpfile.JS

The gulpfile.js is the heart of our gulp setup in which we will write all our gulp tasks. If you are familiar with Javascript you will pickup gulp very quickly because it is essentially only writing functions.

Compile SASS, Autoprefix, Minify, Sourcemaps

Every gulpfile should start with the plugins that are used. Please note that I am using ES6 syntax. If you are not familiar with this please see my es6 article series. Since we also compile our sass/ scss to css we need to specify node-sass as our compiler.

View the code on Gist.

Now we will write our first gulp task. The first argument of our task method is the name of our gulp task ‘compile:sass‘. With the second argument we define a function that returns multiple chained methods. With gulp.src we specify where our style.scss is located. The “pipe” method takes in the output of the previous function, applies new functionality and passes it to a potential next function. Pipe-chaining is very common in gulp tasks and you will see a lot of them. In this case we run our sass compiling and add some error logging. Last but not least we output the compiled css (and any other file we will modify from now on) with gulp.dest into a temp folder. This is necessary for us to create at a later stage without any effort the same pathing for our production and development environment. We will clean this folder later up with another “clean”-task so it will not be visible for you in the end.

View the code on Gist.

Lets add also autoprefixing, minification and sourcemaps. The tasks are very self explanatory which is one of the great things about gulp.

View the code on Gist.

Transpile ES6+ to ES5 with Babel, Minify JS

Before we can use babel to transpile our Javascript ES6+ Code to browser compatible ES5 we need to create a “.babelrc” file and specify what presets we want to use. We will create the file within the root level of our app (where the gulpfile.js is). The setting “modules: false” prevents babel setting “use strict”. Not that I don’t like “use strict” (I am a big fan), but I want to be in control of where it is set. A .babelrc file is technically not necessary, it would also be possible to specify the config within the gulpfile, but I think it is nicer to have it in its own file. Babel will look automatically for a .babelrc file and use it if it is provided.

View the code on Gist.

Now we add the actual transpiling tasks to our gulpfile.js and a task for minification. Note that we need to require additional plugins for our new tasks.

View the code on Gist.

Combine minifier

Since we have already two minifying tasks, we can combine them both into one task. It also gives us the chance to learn about a new gulp method gulp.parallel. As the name indicates this method allows to run both tasks simultaneously. The sibling of gulp.parallel is gulp.series which runs one task after another.

View the code on Gist.

Cleanup after ourselves

Since we created a temp folder during the build process and don’t need it further we will create a task to automatically delete it.

View the code on Gist.

index.html

We can use gulp-inject to inject Javascript files and Stylesheet files into our index.html file. See how it is done in the following example (the commented lines are the placeholder which gulp automatically identifies and use for insertion):

Note that the index.html file is in the src subfolder of your project.

View the code on Gist.

style.scss

Some SCSS for testing our setup. Note that the style.scss file is in the src subfolder of your project.

View the code on Gist.

main.js

Some Javascript for testing our setup.

Note that the main.js file is in the src subfolder of your project.

View the code on Gist.

Transfer files

Our stylesheet and javascript files are going to be served by a server which requires a path to the files. In order to make it easy for both our production and development server to serve the files we will create the same relative pathing and therefor transfer all files into a temp folder which sits inside our development and production base folder (gulp will create the folders by itself if they are not yet existing).

Lets start with transfering files for development:

View the code on Gist.

Now we will do the same for production:

View the code on Gist.

Hot Reloading Live Server

A great development experience includes a local webserver that automatically watches your files and reloads your browser tab on every saved code modification. This is how you do it:

First we will define a new const “connect”, require “gulp-connect” and make a task using it to connect to our server specifying the following specs:

View the code on Gist.

The next task opens for our convenience the browser tab as soon as our server is started:

View the code on Gist.

Now we will create a file watcher that observes our files and triggers a reload as soon as our files change and are saved:

View the code on Gist.

Build development environment

Let’s make a build specifically for our development area. We will leave out what we don’t need (minification) and add some additional features (server with file watcher and hot reloading):

View the code on Gist.

Now lets tie it all together in one handy command (running the dev build, connecting to the development sever, open it and start the file watcher):

View the code on Gist.

Build production environment

Lets combine all our tasks necessary for our production environment in one task “gulp prod” which we will call in series (one after another):

View the code on Gist.

Try it out

In order to test it we need to use the gulp-cli and open our terminal. Each command will take a few seconds to run. You will be notified about the process automatically through the gulp cli. If everything worked fine you should have a new folder build/prod or build/dev (depending on the command) with one index.html and a temp folder containing your style and javascript files.

Please “cd” in the root project folder (where the gulpfile.js is) and run the following commands:

Build Development

gulp dev

Build dev and start hot reloading dev server

gulp serve

Build Production

gulp prod

Summary

If you want to have the whole gulpfile at once I put it together for you here:

View the code on Gist.

The post Task automation with Gulp.JS appeared first on I Learn Javascript.

PlainJS: fade-in & fade-out

ILJS — Sun, 24 Mar 2019 21:28:08 +0000

PlainJS: fade-in & fade-out

8min read

We use fade-in and -out animations on elements to give our users a more pleasant experience when they view our website or app. We use them for elements that get lazyloaded, toggled or whenever we want to make the appearance/ disappearance of something look smooth.

Back in the days most developers probably used jQuery to do the job since it was part of most websites anyway and provided a very convenient way to do it (fadeIn/ fadeOut). With jQuery slowly fading out from web development I want to show in this article how to make a fadeIn and fadeOut function in plain javascript.

In order to make an element fade-in/fade-out we essentially need to change its opacity from 0 to 1 in a timeframe that is detectable for the human eye. Please note that changing the opacity of an element can also be done purely via CSS3 and if we just need to do that it is the most preferable because most performant solution. The way how to achieve this with CSS3 would be to either use the

transition property:

set the opacity of the element to either zero or 1 (depending on whether fade-in or fade-out is desired)
set transition: [property] [time] [easing] => for example transition: opacity .4s ease
apply via javascript a new class .fadein/.fadeout to the element with opacity set to zero (fade-out) or 1 (fade-in)

or via a

keyframe animation:

create a new keyframe animation @keyframe fadein (or @keyframe fadeout) that goes from opacity: 0 to opacity: 1 (or opacity: 1 to opacity: 0)
apply via javascript a new class .fadein/.fadeout that has all required animation properties => e.g. animation: fadein .4s linear

However, with both of these techniques an element that gets faded out still would occupy blank space. It would be invisible but not gone (similar to visibility: hidden). Sometimes we want the element to be gone and not take any space after it is faded out. We want it to be set to display: none. We can achieve this easily with Javascript.

Please note that I am using ES6 syntax. If you are not familiar with this please see my es6 article series and keep in mind that it needs to be transpiled to ES5 for older browsers via babel.io.

fadeIn

First we assign an anonymus function to our variable fadeIn that has an element (el) as it’s first parameter, an option to make a smooth fade-in animation which defaults to true as it’s second parameter and displayStyle ‘block’ as default for it’s third parameter. We start with setting the elements opacity to zero and apply display: block because we assume that it’s current value could be display: none. If smooth is not false we declare a variable with let opacity, starting from zero, and also declare another variable let request, without assigning any value yet.

View the code on Gist.

Afterwards we create another anonymus function that is bound to the variable animation and sets the opacity of our element equal to the result of the value from our previously declared opacity variable plus 0.04. After the first iteration the value would be 0 + 0.04 = 0.04, in the second round 0.08 and so on until it reaches the condition being higher or equal to 1.

I chose 0.04 as it creates a fadeIn animation in approximately 400ms. Feel free to play with the numbers to make it optimal for your case. You can use console.time() (in the beginning of your function run) and console.timeEnd() (in the end of your function run) to understand the timings.

Once the condition is passed we make sure that opacity is exactly one and cancel our animation frame (see next step) via the cancelAnimationFrame(fn) method.

View the code on Gist.

We use requestAnimationFrame for creating the iteration because this way we give the control to the browser when to re-render the layout and not force it on it as we would do with either setTimeout or setInterval. The “problem” with using a recursive setTimeout or setInterval for drawing our animations is that we command the browser at a predefined time to run our animation. Since the browser is single threaded this intervention could lead to a sluggish experience as other javascript (potentially with other animations) may need to be executed too. With requestAnimationFrame the browser controls the redrawing of the layout at an eye-friendly approximate 60hz framerate and provides us with a smooth animation that is not conflicting with any other javascript tasks which may run simultaneously. To be fair it is unlikely that our fade-in or fade-out animation would cause a sluggish experience for the user because it is very fast over but it is generally good practice to use requestAnimationFrame for animations and that’s why we will go with it.

We assign an anonymus function to our rAf variable that assigns a recursive call to itself via the requestAnimationFrame method. In other words we let the function call itself. Please be careful when you do recursive calls and always define a condition under which it gets cancelled. Otherwise you will create an infinite loop and crash your system/ browser.

We assign the function call to our variable request which we declared earlier. The reason we declared request outside of the rAf function is scope. We need to be able to access it via the cancelAnimationFrame method from within the animation function. We run animation and alter the opacity of our element on each iteration.

View the code on Gist.

Finally we call our rAf function to get it all started. In case you wonder about the else condition which runs when smooth is set to false: Technically it does ruin the “fadein experience” because it would set the element’s opacity “instantly” to 1 but it makes the function more versatile and we can achieve that only with a few lines of code.

View the code on Gist.

fadeOut

The fadeOut method is basically an inverted function of our previous explained fadeIn method. I will not go through it in such detail because it is essentially the same as the fadein method just altering the opacity from 1 back to zero and applying display: none in the end right before the iteration gets stopped to leave no blank space behind.

View the code on Gist.

The post PlainJS: fade-in & fade-out appeared first on I Learn Javascript.

ES8: async await

ILJS — Mon, 11 Mar 2019 22:41:00 +0000

ES8: async await

7min read

Async await improves how we handle asynchronous code. It is built on top of ES6 Promises (our rescue from callback hell) and aims to give a cleaner and more concise syntax. Similar to ES6 Classes and prototypal inheritance the async await syntax is basically syntactic sugar for Promises.

How it works

The syntax for async await is actually quite intuitive. We use the keyword async to define an asynchronous function. Within the async function we can use the keyword await to literally wait until a Promise is resolved/ rejected (note: fetch also returns a Promise). Another benefit of async await is that we can use try/ catch statements as in synchronous code to do our error handling.

In the following example we will create an async function, fetch the random joke API and await the returned Promise from the API call to be resolved and parsed to json. Then we call the async function getJoke and log the data we receive as soon as getJoke is processed and has a value returned to us. We execute this in a try/ catch statement to do the error handling in case the API call is rejected.

View the code on Gist.

Async await is non blocking

Async await is non blocking code. This is especially important as the Browser has only one single thread for all the tasks (parse HTML, apply CSS, render layout, execute Javascript etc.) and Javascript code is “usually” blocking. Using async code can help to improve the performance and user experience of an app/ website.

In the following example we will create a Promise which will resolve after 2 seconds, clearing our interval “tick”. Then we create an async function asyncCall which calls our Promise resolveAfter2Seconds and awaits its result “resolved” and logs it. The interval tick runs every 100ms and logs “tick” to the console. Immediately after the tick interval is set up, asyncCall is executed. Since setInterval is by default also asynchronous and the way the Javascript event loop works, “calling” from within the asyncCall function gets logged before the first “tick” is logged.

Tick will log exactly 20 times (2000ms) until the Promise is resolved and the interval is cleared. This example shows that async await handles the Promise in the background until it is resolved/ rejected.

View the code on Gist.

Callbacks vs Promises vs async await

Async await gives us arguably a nicer and more concise syntax over Promises and unquestionable over multiple nested callbacks. But judge for yourself comparing callbacks, Promises and async await:

Callback(hell)

View the code on Gist.

ES6 Promises

View the code on Gist.

Async await

View the code on Gist.

I am personally a big fan of async await and thanks to Babel it is easy integratable into our code. For everyone who doesn’t transpile their code: async await is not fully supported yet (and won’t be as long as we need to support IE11. See: https://caniuse.com/#search=async)

Let me know what you think in the comments.

The post ES8: async await appeared first on I Learn Javascript.

ES6: Modules

ILJS — Sun, 10 Mar 2019 09:27:11 +0000

ES6: Modules

8min read

With ECMAScript 2015 (ES6) Modules become finally native to modern Browsers. In JavaScript Modules represent small units of independent, reusable code. They essentially make our code more maintainable and flexible. One file could contain one or multiple Modules. We can import and export them as per need. Therefore multiple Modules combined could also make up a larger Module. They are the foundation of many JavaScript design patterns and are critically necessary when building any non-trivial JavaScript-based application.

This being said, the concept of Modules itself is not new to the Javascript community. Developers so far usually fall back to one of the following options

load multiple Javascript files into the Document (very bad for performance because each file needs to be requested and served individually)
use separate Javascript files for Development and concatenate them into one file for Production (better performance-wise but fairly hard to maintain)

or the modern approach

use a Library such as CommonJS or AMD (requireJS) to do the job (defacto standard which tools like Webpack make use of)

How it works

We declare our script tag with type “module” and let the Browser this way know that it is an ES6 Module.

View the code on Gist.

We differentiate between named exports and default exports. We can have multiple named exports per file and one default export per file. With the keyword export we let the Javascript engine know that we want to export this Variable, Object, Array, Function or Class (technically also a Function). ES6 Modules are automatically strict-mode code, even if we don’t declare them with “use strict”. Also, everything declared within a Module is scoped to this Module and not automatically Global. The Scope in Javascript from top to bottom is:

Global scope
Module scope
Function scope
Block scope

Named Export

In the following example we will export multiple named variables, each representing a different Module. For simplicity we will store them all in one file but each of them could generally also be in it’s own file.

View the code on Gist.

Import named export

In our index.js file we import module1, module2 and module3 from modules.js. When we import them as named exports we need to enclose them in brackets and use the correct name that was specified in the export. Then we will insert them into our index.html Document.

View the code on Gist.

Default Exports

When we make a default export we don’t specify a name. We just write

export default function foo()
export default { foo: ‘bar’ }
export default [‘arr1‘]
export default ‘string’

View the code on Gist.

Import default export

When we import a default export we don’t enclose it in brackets and can choose any name for it. In our example we will call it defaultModule for clarity.

View the code on Gist.

ES6 Modules, allthough becoming now native to modern Browsers, will at the current stage most probably not change how code is organized in most existing projects. There is no real benefit of replacing native ES6 Modules with whatever Library is currently used. Especially since Browsers such as IE11 and older Browserversions of modern Browsers don’t support ES6 Modules at this time fully and therefore require some kind of fallback: https://caniuse.com/#search=modules

But it is only a matter of time until Modules are going to be the new standard and especially for smaller projects that don’t have an elaborate build process it could be a real benefit to use the native implementation.

The post ES6: Modules appeared first on I Learn Javascript.

PlainJS: postMessage() and iframes

ILJS — Wed, 06 Mar 2019 19:43:51 +0000

PlainJS: postMessage() and iFrames

12min read

Many websites, especially blogs or newssites, earn money with advertising. A common way to display these ads is through iFrames. In this article I will explain how to communicate between a window and an embedded iFrame.

In general the same-origin policy forbids scripts on different pages to access each other unless they share the same protocol, port number and host. The window.postMessage() method enables cross-origin communication between a window object and an embedded iFrame and therefore provides a mechanism to circumvent this restriction. PostMessage used incorrectly could potentially make your website vulnerable for crosssite-scripting attacks. It is important to be aware of these pitfalls before we use it in production.

Listening for a message

First we need to setup a listener function on our window (we will call it outer window from now on to differentiate since each iFrame also owns its own window) which executes code when the message event gets fired from our iFrame via postMessage(). Allowing the outer window to receive messages from an embedded iframe is a potential risk for cross-site scripting attacks. It is therefore important to verify the event.origin of the window that send the message and only allow controlled event.data to reach our outer window. Lets go through the terminology first:

event.origin = The origin of the window that sent the message at the time postMessage was called. We want this to be a domain we trust.
event.data = The data that gets passed through with the postMessage function.
event.source = Reference to the window that sent the message. In our case the iFrame.
postMessage() = function we call in order to pass data to another window.

We will create a receiveMessage Function on our outer window, check if the event.origin is the domain of our iframe and if event.data is the message we exppect. Then we listen via the addEventListener method for the message event and bind the receiveMessage() function to it.

View the code on Gist.

We could generally make it even more safe by restricting event.data to a specific length and test for typeof string since we expect a string. So lets add this:

View the code on Gist.

Sending a message

We send a message via the postMessage function. The syntax for it is:

View the code on Gist.

The targetWindow in our case could be either window.parent (immediate parent window) or window.top (the most far outer window) because they are the same in our scenario. But since it is generally possible to nest multiple Iframes it is important to be aware of the difference. In doubt pick window.top because it will definitely reach the client window and not another parent Iframe by accident. As message we will send “message we expect” and the targetOrigin is the domain of our outer window’s domain.

View the code on Gist.

Note: Avoid using “*” for the targetOrigin and specify it properly instead with the domain of your outer window.

Working Example

Here is an working example. If you want to test it just

copy the code from both files (I named them window.html and iframe.html) into a directory
setup a small local server (I use for this https://www.npmjs.com/package/http-server) for each of the files
run it within the directory and choose to display window.html for the server located on http://127.0.0.1:8080 and the iframe.html on http://127.0.0.1:8081
play with it

window.html

View the code on Gist.

Iframe.html

View the code on Gist.

Two Way Communication

So far we looked at a one way communication in which we receive a message from an iFrame. But what if we want to have a two way communication and send something back from our outer window to the iFrame? If we embed our iFrame on the same domain as the window we can use the postMessage() function and event.source for achieving exactly this. We use event.source to get a reference to our iframe and trigger the postMessage() function from it.

Working Example

We will trigger event.source.postMessage() with a one second delay from our window.html to visualize the chronology of the functions getting triggered. In order for the iframe.html to show a response we also need to setup a receiveMessage() function there and bind it to the iframe’s window via window.addEventlistener(‘message’, receiveMessage, false).

copy the code from both files (I named them window.html and iframe.html) into a directory
setup a small local server (I use for this https://www.npmjs.com/package/http-server) for both of the files
run it within the directory and choose to display window.html for the server located on http://127.0.0.1:8080
play with it

window.html

View the code on Gist.

Iframe.html

View the code on Gist.

Security concerns

A listener for a message event should only be applied to your website if you generally expect a postMessage. Cross-site scripting attacks are a real risk. Failure to check the origin, data and potentially source properties could make your website vulnerable. Always specify an exact target origin and do not just use “*” with postMessage() to send data to other windows. A potential attacker could change the location of the window and intercept the data sent using postMessage(). Add extra levels of security by restricting the event.data to a type and length (if applicable).

The post PlainJS: postMessage() and iframes appeared first on I Learn Javascript.

ES6: Rest Parameter

ILJS — Sun, 03 Mar 2019 11:52:17 +0000

ES6: Rest Parameter

5min read

The Rest Paramameter collects all the remaining elements into an array. It is the sibling of the Spread Operator and uses the same syntax of three dots “…” preceeding it.

Sum up function parameters

The typical usecase for the Rest Paramter is to sum up all remaining parameters of a function which we don’t want to specify. In this case we sum up all the adress data into one array.

Note: The Rest Parameter can only be used at the end after all other parameters have been specified.

View the code on Gist.

If we want to output the adress as a String instead of an array we can use the Spread Operatorto do it.

View the code on Gist.

Rest Paramter vs Arguments Object

Dont cofuse the Rest Paramter with the Arguments Object in Javascript. A short recap: The Arguments object allows us to access all arguments that have been passed into the function in form of an array-like object.

View the code on Gist.

There are three main differences:

The arguments object contains all arguments passed to the function while the Rest Parameter only contains the one’s that haven’t been specified at the end of the parameters list.
The arguments object is in contrary to the Rest Parameter only an array-like object which means it inherits not the same methods (e.g. sort, map, filter) as a real array. The Rest Paramter is an instance of the Array Object and therefor has full access to all its methods.
the arguments object has additional functionality specific to itself (like the calleeproperty).

Rest Parameter in Destructuring

The Rest Paramater comes in really handy when used with Destructuring to collect all non-specified values in an array.

View the code on Gist.

The post ES6: Rest Parameter appeared first on I Learn Javascript.

ES6: Classes

ILJS — Sun, 03 Mar 2019 10:54:55 +0000

ES6: Classes

20min read

Object-oriented programming languages like PHP, Java or C++ have natively classes built-in to their language. Don’t get fooled by the new ES6 class syntax. Javascript doesn’t have this feature but rather makes use of its powerful prototypal inheritance concept to “simulate” them or in nicer words “sugarcoat” it. In Javascript you can program both object-oriented and functional because prototyal inheritance is extremly powerful.

This article will start with a quick recap on prototypal inheritance in Javascript, feel free to jump directly to the new class concept.

Prototypal inheritance

Prototypal inheritance and object orientation are complex topics and could easily each on their own fill multiple long articles. This is just a quick recap of the concepts behind.

Lets start with a person object john that has a greeting method that ouputs its name. Remember: if we have a method on an object the this keyword will always point to the object itself.

View the code on Gist.

Lets say now we need to make another person object Jane. How shall we do it? Just copy the previous one and give it different values? What if we need 10 or 100 different person objects? Copy and paste them all with different values?

Allthough it would technically work it really shouldn’t be how a developer approach this task. There is a fundamental concept that is universal to programming which is called Dont Repeat Yourself (DRY). So lets stick to it and make our code dynamic by creating a function that serves us as a blue-print for unlimited person object instances.

Object Constructor Function

First we need to create an object constructor function with the properties we want our person objects to have. Object constructor functions are normal functions which are invoked with the new keyword preceeding it. We define its properties with this.propertyname = propertyname.

View the code on Gist.

In Javascript every function is an object but not every object is a function. Higher-order functions are functions that accept other functions as arguments which is only possible if functions are treated like objects. In order to make an instance of an object we call the object constructor function we want to inherit from with the new keyword beforehand. This way the Javascript engine knows that we intend to create a new instance of that object.

View the code on Gist.

Adding methods to all instances

Now its time to add our greet method to the object constructor function. We want to add it to the object constructor function (our blue-print object) that all instances have access to. We can do this in two ways:

Adding the method from the very beginning directly to our object constructor function (same as we add properties)…

View the code on Gist.

… or add it to the prototype of the object constructor function. Each function has a prototype property object with a constructor method that points to the function itself. Whenever we create a new instance (keyword new) we automatically invoke this constructor method which lives on the prototype of the object constructor function.

Every plain object has a __proto__ object and the __proto__ object of objects created as instances of another object (like in our example) point to the prototype of the object it is created from (remember: All functions are objects but not all objects are functions).

What is important here: Instances of objects (like john) have a reference to the objects they inherit from (like es5_Person). John’s __proto__ points to the prototype of es5_Person. One could also say that john’s __proto__ gets replaced with the prototype of its parent and therefor inherits all its methods. Both objects point to the same spot in memory. Their destinies are linked from now on. If you change the parents prototype you will also change the __proto__ of all their instances.

This also means if we add a method to the prototype of the object constructor function (es5_person) all their instances (john) will have access to it. Even if they are already created.

View the code on Gist.

This works because when we call the method greet on john the Javascript engine looks if it can finds it on the john object first. If it is not present there (like in our example) it goes down the “prototype chain”. Since johns __proto__ points to the es5_Person prototype the Javascript Engine will find the method there and can run it.

Classes

Now that we understood how prototypal inheritance work lets look at ES6 classes but remember: under the hood it is still prototypal inheritance. It starts with the class keyword and the name of our class. It is written without parenthesis, has a constructor function and any method will be written just with its methodname, followed by parenthesis without comma seperation inbetween them.

View the code on Gist.

Subclasses

A subclass extends the functionality of its parent class. All instances of a subclass own the full functionality of the base class but additionally have methods which only instances of this subclass have access to. Let’s define a soldier subclass. Every soldier is a also a person but not every person is a soldier. Let’s look at it first how it was done in ES5 and how it is done now in ES6. Jump directly to ES6 Subclasses if you don’t need this recap.

ES5

In ES5 we would create a new object constructor function with all the properties we want to inherit from the base class (firstname, lastname) and additonally all the properties that only exist in the subclass (weapon). Then we would call the base class within the context of the soldier subclass via call or apply and pass the current this context as well as all the properties of the base class (firstname, lastname). Afterwards we set the property only relevant for the subclass (weapon) normally how we are used to it in the object constructor function.

View the code on Gist.

Now we have a subclass who’s instances have the properties firstname, lastname and weapon but we dont inherit the methods from es5_Person. We don’t have access to its prototype. One solution is to use Object.create() to create a new object on the es5_Soldier.prototype and pass it the es5_Person.prototype. The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. This means on the es5_Soldier.prototype a new object is created which has the es5_person.prototype as its __proto__. This way all instances of es5_Soldier are able to access the methods of es5_Person through the prototype chain.

View the code on Gist.

Any method which we add now to the prototype of our subclass will live there while the methods of its base class can be accessed through the __proto__ of the prototype of the subclass. Since the Javascript Engine goes down the prototype-chain automatically when it doesn’t find it we can call our methods as we are used to on the object. Let’s add a method for all our soldier instances.

View the code on Gist.

Lets now create a new es5_Soldier instance “jackTheSoldier” and try if we can access both the shoot() method of its parent class and the greet() method of the base class es5_Person.

View the code on Gist.

There is also another way to access the greet method from es5_Person but with Object.create(). We can define greet() as a new method on the es5_Soldier.prototype and call from within the function the es5_Person.prototype.greet() method and apply the current this context.

View the code on Gist.

Both is possible but I personally prefer the Object.create() method as it feels more straightforward to me.

Last but not least we can also prove that john can greet() but not shoot() because it has as an instance of es5_Person only access to greet(). Only instances of es5_Soldier can both greet() and shoot().

View the code on Gist.

ES6

In the ES6 class syntax the subclass concept is hugely simplified which is why a lot of developer like it. But remember it is all still prototypal inheritance under the hood. If we want to make es6_Soldier a subclass of es6_person we just use the keyword extends.

View the code on Gist.

Since our es6_Soldier subclass adds a new property (weapon) we have to manually call the constructor function, pass it the base class properties firstname + lastname and then add weapon as a new parameter. The super() method is built-in and is used to call the parents constructor in our current context. If we wouldn’t add any new parameters we could leave it out because…

View the code on Gist.

…would be called otherwise automatically in the class.

If we want to override a parent method we can simply define it with the same name in our subclass and because within the prototype chain it will be before the parent method it will get run. If we however want to build on top of it, we also define it first in our subclass but also call the parent’s method from within via super.methodName(). Overwriting the greet() method from the es6_Person class within the es6_Soldier subclass would look like this:

View the code on Gist.

This is it about classes. If you have any feedback or questions please let me know in the comments.

The post ES6: Classes appeared first on I Learn Javascript.

ES6: Enhanced Object Literals

ILJS — Sun, 03 Mar 2019 00:49:05 +0000

ES6: Enhanced Object Literals

4min read

ES6 brings us a better version of object literals. We will write less code to reach the same result.

No repetition: key-value

Sometimes we want to create objects on the fly with dynamic values. We can use functions to achieve this by passing them arguments and return objects from them. The object-factory-function needs to initialize the objects with properties. It is quite common to use the same placeholder-name for the key : value pair in such a case. The enhanced object literals in ES6 allow us to just write the placeholdername as the initialized property on the object if key and value pair are the same.

ES5

View the code on Gist.

ES6

View the code on Gist.

No repetition: methods

Not only key-value pairs can be written short but also methods receive a more concise syntax update. Instead of writing…

View the code on Gist.

…we can shorten it to:

View the code on Gist.

ES5

View the code on Gist.

ES6

View the code on Gist.

Use variables as keys

In ES5 it was not possible to use a variable for a key except it was added afterwards like in the following example:

ES5

View the code on Gist.

ES6

We can use the short-syntax for writing key-value pairs except for the dynamic added [key1] which has to be written in the classical way.

View the code on Gist.

Dynamic keys [key1] can be combined with incrementable variables in order to make the keys even more dynamic.

View the code on Gist.

The post ES6: Enhanced Object Literals appeared first on I Learn Javascript.

ES6: Descructuring

ILJS — Sat, 02 Mar 2019 18:28:54 +0000

ES6: Descructuring

8min read

With ES6 we get a convenient way of extracting multiple values from data stored in (possibly nested) objects and Arrays.

ES5

If we wanted to extract single values from an array in ES5 we would manually go through it by its index.

View the code on Gist.

ES6

In ES6 we can simply sum up all variables in an array, give them appropriate names and reference it to the array we want to destruct.

View the code on Gist.

Skip values

If we want to skip some values we just leave them out, but comma separate it that the length of both arrays will still match.

View the code on Gist.

Rest Paramter + Destructuring

Another ES6 feature which comes really handy in combination with destructuring is the Rest Parameter. It is a sibling of the Spread Operator (they share the same syntax) and allows us to collect all the remaining elements into an array.

View the code on Gist.

Destructure from Functions

We can destructure not only directly from an array but also from a function.

View the code on Gist.

Default Parameters + Destructuring

By using Default Paramters we can assign default values in case our array has some undefined values. This could be for example the case when we retrieve the array via an API and cannot assure data reliability but need values to work with.

View the code on Gist.

Swap values

A feature of destructuring that is not always easy to find real world applications for is swapping values. So in our case of the person object we can switch the values for the variables of firstname and lastname in one line.

View the code on Gist.

Obviously this example doesn’t make a lot of sense because why would we switch firstname and lastname. I couldn’t come up with my own example that makes sense but I found a very good example on github: https://github.com/wesbos/es6-articles/blob/master/20%20-%20Swapping%20Variables%20with%20Destructuring.md

The example in a nutshell: We have a wrestling application in which the tag team partner always switch when they go into the ring. Without destructuring that problem would have been fixed with a temporare variable. Now we can use an easy one-liner.

Destructuring objects

Last but not least: Destructuring works also with objects.

View the code on Gist.

The post ES6: Descructuring appeared first on I Learn Javascript.

ES6: Promises

ILJS — Wed, 27 Feb 2019 17:21:03 +0000

ES6: Promises

10min read

ES6 Promises – I will promise you love them.

Javascript Promises arrived natively with ES6 and are essentially a simpler way of dealing with asynchronous (async) operations in comparison to traditional callback-based approaches (ES5). They also provide us with a solid error handling simliar to try/ catch and bring a few helpful methods to manage multiple Promises simultaneously.

Typical async operations which Promises can be used for include API calls, DB queries aswell as reading and downloading files.

An ES6 Promise much like a promise in real life can have three possible states:

Pending – the promise’s outcome hasn’t yet been determined, because the asynchronous operation that will produce its result hasn’t completed yet.
Fulfilled – the asynchronous operation has completed, and the promise has a value.
Rejected – the asynchronous operation failed, and the promise will never be fulfilled. In the rejected state, a promise has a reason that indicates why the operation failed.

Promises are created via the new keyword and take in a function with two arguments resolve and reject. Resolve and reject are essentially methods which return whatever value we pass it. The Promise itself can be chained with a then() and a catch() method which each take a function with one argument. If the Promise gets fullfilled the then() method gets called and the value of resolve() gets passed to the then() method and can be used for any kind of operation. If the Promise gets rejected the catch() method runs with the value (reason) from rejected().

Lets see that in action. The setTimeout function represents in this simplified example an async operation like an API call, which returns successfull after 2 seconds (fullfilled) and calls the resolve() method with the value ‘Win’. ‘Win’ gets passed to the then() method and console.log() outputs it to the console.

View the code on Gist.

Chaining Promises

Promises can be chained to one another via the then() method and subsequently pass the previously processed value to the next Promise in chain. This works only because both the then() and the catch() method return itself a new Promise.

Lets create a celebrate function which gets called after the sprinter Promise successfully resolved. It takes one argument (the value state which is returned from the sprinter Promise) and returns a resolved Promise with the value of the variable msg. Now we chain to the resolved Promise from the celebrate function an anonymus function that simply logs msg.

View the code on Gist.

Handling Multiple Promises

Promises have additionally to resolve() and reject() two more built-in methods all() and race().

Promise.all()

The Promise.all() method takes in an array of multiple promisses and only resolves when all promises are fullfilled. Lets create three different sprinters, which take each a different time to resolve (3 seconds, 2seconds, 1 seconds). The Promise.all() method fires only after 3s when alle Promises are fullfilled.

View the code on Gist.

Promise.race()

The Promise.race() method also takes in an array of multiple promisses and will resolve as soon as the first promise fullfills. The Promise.race() method called on the same three sprinters from the previous example this time will resolve already after 1 seconds (the fastest), because this is when the first sprinter (sprinter3) finishes.

View the code on Gist.

Promises are async

Promises are not only used for async operations but they are async themselves. Meaning: Any synchronous code which is run before or after the Promise will run first before the Promise resolves or rejects. Lets prove it by creating a very simple Promise that resolves without any delay and console.log(‘middle’). Before the Promise we console.log(‘start’) and after the Promise we will console.log(‘end’).

View the code on Gist.

Both the ‘start’ and ‘end’ console.log() statements get evaluated first because they run synchronous opposed to the async Promise.

Fetch and Promises

Most developers probably already used Promises without being aware of it. The Fetch API, a simple way to make network requests (similar to XMLHttpRequest or jQuery’s Ajax), infact returns a Promise.

In the following example we make an API call to a random joke API via fetch which resolves when the server responds with a status somewhere within the 2xx range and provides us with the joke in JSON format. If the Promise gets resolved the then() method gets called and the json is being parsed to an object. Since the json() method returns a Promise itself we can chain it with another then() and log the joke to the console.

View the code on Gist.

The post ES6: Promises appeared first on I Learn Javascript.