Vanilla JS | Void Canvas

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

Pros & cons of beginning with JavaScript as your first programming language

Paul Shan
9th Feb 2017
JavaScript

After I started conducting programming sessions and mentoring via VoidCanvas or offline; I met a lot of people who wanted to learn JavaScript and had not learnt any other languages before. Majority of them were interested in JavaScript because it trends in the market. Obviously a beginner can not go

Describing the differences between Map, WeakMap of ES6 and plain Objects

Paul Shan
8th Feb 2017
ES6

The version 6 of EcmaScript has introduced a lot of things to JavaScript and one of the most important one is Map, which is a very popular data structure in other programming languages. Though the plain old JavaScript objects looks pretty similar to what map is; but the actual Map

Posts in Category: vanilla js

Void Canvas