Vanilla JS | Void Canvas

Diving deep into JavaScript array – evolution & performance

Paul Shan
2nd Sep 2017
ES6

Before starting the article I would like to state that this is not about the basic of JavaScript array. Neither about teaching syntaxes or showing usage examples. The article is more about memory representation, optimization, behavior differences over syntaxes, performance and the recent evolution. When I started using JavaScript for the

Create / filter an array to have only unique elements in it

Sandip
31st Aug 2017
Vanilla JS

At some point while coding we all may have searched how to create an array with all unique values in it. Well for an amateur, code for this one can get a little lengthy but bit research on the web can surely help him to write efficient code. In this

import vs require – ESM & commonJs module differences

Paul Shan
13th Mar 2017
Vanilla JS

ECMAScript Modules (ESM) are still in stage 3 (not finalized). require import Dynamic evaluation Static evaluation Throws error at runtime Throws error while parsing Non lexical Lexical As Node.js uses commonJS moduling, I will refer to the workflow of node to address the commonJS modules. And will refer the ECMAScript modules as ESM. Syntax difference CommonJS dep.js

dep = {
    foo: function(){},
    bar: 22
}
module.exports = dep;

1

2

3

4

5

6

dep = {

foo: function(){},

bar: 22

}

module.exports = dep;

app.js

var dep = require("dep");
console.log(dep.bar);
dep.foo();

1

2

3

4

var dep = require("dep");

console.log(dep.bar);

dep.foo();

ESM dep.js

export foo function(){};
export const bar = 22;

1

2

3

export foo function(){};

export const bar = 22;

app.js

import {foo, bar} from "dep";
console.log(bar);
foo();

1

2

3

4

import {foo, bar} from "dep";

console.log(bar);

foo();

Loading technique difference What Node.js does with

Clone an object in vanilla JS – multiple ways

Paul Shan
8th Mar 2017
Tips n Tricks

Objects are passed by reference, but sometimes you don’t want that. Thus a need of cloning or copying objects. Though the work looks very simple, but actually it is NOT. However depending on your requirement it can be very simple too. I will show you different ways to copy or

setImmediate() vs nextTick() vs setTimeout(fn,0) – in depth explanation

Paul Shan
24th Feb 2017
Vanilla JS

Few days back, I was guiding some new node.js developers on making asynchronous stuffs. We were discussing about async apis of node js. I wanted to provide them with some references and googled for few; but surprisingly, majority of the articles out there in the internet about setImmediate() or process.nextTick()

Explaining padStart & padEnd – two ES8 string methods

Paul Shan
20th Feb 2017
ES8

EcmaScript 2017 or ES8 has introduced two new String prototype methods. padStart and padEnd. Both of them will be used in display related purpose. Even the name says it’s all about “padding”. You can add some extra spaces or dashes (or any other character), before of after a string.

Object.entries() & Object.values() in EcmaScript2017 (ES8) with examples

Paul Shan
17th Feb 2017
ES8

The two new utility apis Object.entries(obj) & Object.values(obj) are in stage 4 at the moment and Chrome & Firefox has already included them in the browsers as ES8 feature. Though there is a chance for these two apis to get changed as the spec is still not finalized. However, stage

Explaining async await of ES8 with examples

Paul Shan
14th Feb 2017
ES8

A much awaited feature async await is available on your browser now (if you’re using chrome 55 or greater). Firefox will start supporting from version 52 an Safari from 10.1. Others will also follow the path. So, we can say we have entered the era of async await and now can

Posts in Category: vanilla js

Diving deep into JavaScript array – evolution & performance

Create / filter an array to have only unique elements in it

import vs require – ESM & commonJs module differences

Clone an object in vanilla JS – multiple ways

setImmediate() vs nextTick() vs setTimeout(fn,0) – in depth explanation

Explaining padStart & padEnd – two ES8 string methods

Object.entries() & Object.values() in EcmaScript2017 (ES8) with examples

Explaining async await of ES8 with examples

Void Canvas

EcmaScript.in