Forem: Mohana Naga Venkat Sayempu

for of loop

Mohana Naga Venkat Sayempu — Tue, 04 Aug 2020 09:26:27 +0000

The new for of loop is designed to work exclusively with iterable objects. The loop calls the next function behind the scenes and exits when the done property is true.

for ( let n of [1,2,3] ) {
  console.log(n);
}
// 1
// 2
// 3

As long as the object implements the iterable interface it can be looped with the for of loop. This includes arrays, maps and sets.

var map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let pair of map) {
  console.log(pair);
}
// [a,1]
// [b,2]

Arrays, sets and maps also expose the entries, keys and values functions for returning specialised iterators. The keys iterator loops over only the keys, the values iterator only the values, and the entries iterator the key/value pairs.

var map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let key of map.keys()) {
  console.log(key);
}
// a
// b

In ES6 strings also implement the iterable interface.

for (let char of 'foo') {
  console.log(char);
}
// 'f'
// 'o'
// 'o'

Iterators

Mohana Naga Venkat Sayempu — Sat, 27 Jun 2020 21:15:51 +0000

In ES6 objects are said to be iterable when they implement the iterable interface. Many built-in objects such as arrays, sets and maps implement this interface. User defined objects and classes can also implement the interface.

Iterable objects can also be iterated using the new for of loop, and used with the ... spread operator.

Iterable Interface

An object is said to conform to the iterable interface when the value of its property identified with the shared @@iterator Symbol is a function which returns an iterator.

var iterator = [1,2,3][Symbol.iterator]();

An iterator is any object that implements a next function.

var iterator = [1,2,3][Symbol.iterator]();

console.log(iterator.next); // '[Function]'

The next function can be called repeatedly to step through the iteration. Each time it returns an object that contains two keys, value and done. The values of these keys indicate the current value of the iteration and its completion status respectively.

var iterator = [1,2,3][Symbol.iterator]();

console.log(iterator.next()); // {value:1, done:false}
console.log(iterator.next()); // {value:2, done:false}
console.log(iterator.next()); // {value:3, done:false}
console.log(iterator.next()); // {value:undefined, done:true}

Custom objects and classes can be made iterable by implementing the iterator interface manually.

var iterable = {
  [Symbol.iterator] () {
    return {
      next () {
        // Implement iterator
      }
    }
  }
}

Symbols

Mohana Naga Venkat Sayempu — Fri, 19 Jun 2020 10:29:40 +0000

Symbols are created with the Symbol function. Each newly created symbol value is guaranteed unique. The argument passed to Symbol() is the symbol's description. It is good practice to always give a symbol a description to aid with debugging.

var firstName = Symbol('firstName');
console.log(firstName); // 'Symbol(firstName)'

Pseudo Private Properties

Symbols can be used as computed property identifiers in objects and classes. The related value is therefore somewhat private to code that does not have a reference to the symbol itself, for example, code in other modules. The value is not strictly private however since the symbol and its value are still enumerable via reflection APIs.

const PRIVATE_VALUE = Symbol('privateValue');
const PRIVATE_METHOD = Symbol('privateMethod');

class Foo {

  constructor () {
    this.publicValue = 'bar';
    this[PRIVATE_VALUE] = 'baz';
  }

  [PRIVATE_METHOD] () {
    // Can't see or call me without jumping through hoops
  }
}

Symbol Constants

Symbols can be a better choice than strings for the values of constants since they are guaranteed unique.

const COLOR_RED = Symbol('colorRed');
const COLOR_GREEN = Symbol('colorGreen');
const COLOR_BLUE = Symbol('colorBlue');

Happy Coding 😀

Spread Operator

Mohana Naga Venkat Sayempu — Sun, 07 Jun 2020 16:18:21 +0000

Spread Destructuring

The spread operator ... can be used to destructure arrays, other iterables and objects. It is used to catch remaining properties not already picked off by the destructuring pattern.

const array = [1, 2, 3, 4];
const [first, ...theRest] = array;
console.log(first, theRest); // 1 [2,3,4]

const object = {a: 1, b: 2, c:3};
const {a, ...theRest} = object;
console.log(a, theRest); // 1 {b: 2, c: 3}

Spread Parameters

In addition to spread destructuring, the spread operator ... can be used to unpack an array into its elements in order to be passed into a function as individual arguments.

function f (a,b,c) {
  console.log(a,b,c);
};

var values = [1,2,3];
f(...values); // 1 2 3

Spread parameters can also be mixed and matched with normal function parameters.

function f (a,b,c,d) {
  console.log(a,b,c,d);
};

var values = [2,3];
f(1,...values,4); // 1 2 3 4

Rest Spread Parameters

Rest spread parameters are used to capture all remaining parameters passed to a function and expose them as an array. No other named arguments may follow the rest parameters in the function signature.

function f (first,second,...numbers) {
  console.log(first,second,numbers);
}

f(1,2,3,4,5); // 1 2 [3,4,5]

Spread Property Initialisers

Spread properties in object initializers copies the enumerable properties from a provided object onto the newly created object.

const foo = {a: 2, b: 3};
const bar = {a: 1, ...foo};
bar; // {a: 2, b: 3}

Happy Coding 😀

Destructuring arrays as objects

Mohana Naga Venkat Sayempu — Mon, 01 Jun 2020 18:48:54 +0000

Destructuring is one of the widely used feature of ES6. Since arrays are also objects in javascript we can destructure them by using their indices.

let fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
let { 0:first } = fruits;
console.log(first); // Banana

In above example we are grabbing the first element of the array. Now we will go a little deep and try to grab the first, last and middle elements.

let fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
let { length, 0:first, [Math.floor(length/2)]:middle, [length-1]: last } = fruits;
console.log(length, first, middle, last); // 5, Banana, Apple, Kiwi

Array have length property, so we grabbing that length and destructuring allows us to use that length right inside. Hence, we are using that length to calculate the middle position.

Happy coding 😃.

FUN: Pikachu Using CSS

Mohana Naga Venkat Sayempu — Sun, 31 May 2020 16:17:37 +0000

A simple pikachu using css. This is very helpful to understand the css positions and some of the transformations.

Try to click on Pikachu :)

Happy Coding 😀

Destructuring

Mohana Naga Venkat Sayempu — Sun, 31 May 2020 06:25:53 +0000

Destructuring, or "destructuring assignment syntax" describes the syntactically efficient extraction and declaration of new variables in the local scope from arbitrarily complex data structures.

Object Destructuring

When destructuring, object literal notation syntax is used on the left side of the assignment operation to both describe the target data structure and name the new local variables to be declared.

var data = {
  foo: 'foo',
  bar: 'bar',
  baz: {
    qux: 'qux'
  }
};

var {foo:newFoo,bar:newBar,baz:{qux:newQux}} = data;

newFoo; // 'foo'
newBar; // 'bar'
newQux; // 'qux'

A shorthand syntax can be used when the desired local variable names are the same as the object keys in the data. This has the benefit of not having to name target keys twice as in var foo = bar.foo and so minimises typing and errors.

var data = {
  foo: 'foo',
  bar: 'bar'
};

var {foo,bar} = data;

foo; // 'foo'
bar; // 'bar'

Array Destructuring

Array literal notation syntax can be freely mixed with object literal notation syntax while destructuring.

var data = ['foo','bar',['baz']];

var [foo,bar,[baz]] = data;

foo; // 'foo'
bar; // 'bar'
baz; // 'baz'

Iterator Destructuring

Array literals can be used to destructure any iterable object.

var set = new Set().add('a').add('b').add('c');

var [x,y,z] = set;
console.log(x,y,z); // a b c

Loop Destructuring

We can destructure in a loop header to efficiently declare loop variables.

let map = new Map();
map.set('a',1);
map.set('b',2);

for (let [k,v] of map) {
  console.log(`key = ${k}, value = ${v}`);
}

Parameter Destructuring

Destructuring can also be used inline in function parameters.

function f ({foo,bar}) {
  console.log(foo);
  console.log(bar);
}

f({foo:'foo',bar:'bar'}); // 'foo' 'bar'

Happy Coding 😀

Object Literal Enhancements

Mohana Naga Venkat Sayempu — Sat, 30 May 2020 05:44:06 +0000

Object literal syntax has received a number of enhancements in es6.

Property Initialiser Shorthand

When a new object literal is created and populated with properties of the same name that exist in the current scope then a shorthand syntax can be used.

var foo = 'foo';
var bar = 'bar';

var o = {foo, bar};

console.log(o); // {foo: 'foo', bar: 'bar'}

Method Initialiser Shorthand

Methods can now be declared in object literals in a similar way to the new class construct.

var o = {
  foo () {
  }
};

console.log(o); // {foo: [Function]}

Computed Property Names

Dynamic property names can be used while creating object literals.

var foo = 'foo';

var o = {
  [foo]: 'bar',
  [new Date().getTime()]: 'baz'
};

console.log(o); // {foo: 'bar', 1428942731913: 'baz'};

Native object merging

The new Object.assign function copies properties and methods from source objects into the leftmost target object and returns it.

var o1 = {foo: 'foo'};
var o2 = {bar: 'bar'};
var o3 = {baz: 'baz', foo: 'qux'};

Object.assign(o1, o2, o3); // {foo: 'qux', bar: 'bar', baz: 'baz'}
console.log(o1); // {foo: 'qux', bar: 'bar', baz: 'baz'}

Happy Coding 😀

Template Strings

Mohana Naga Venkat Sayempu — Fri, 29 May 2020 05:06:16 +0000

ES6 template strings, denoted by backticks rather than single or double quotes, enable multiline strings, expression substitution, and tagged templates.

Multiline

All whitespace characters in backtick template strings are preserved, so no extra formatting is required for multiline strings.

var address = `29 Acacia Road,
Nuttytown,
England`;

Expression Substitution

Template strings are able to evaluate any expression against values in their current scope using ${} syntax.

⚠️ Be careful when building strings in this way from user input since you may introduce injection vulnerabilities, see tagged templates below for an alternative approach.

var name = 'Billy';
var born = 1992;
var now = () => new Date().getFullYear();

var message = `${name} is ${now()-born} years old`;
// 'Billy is 23 years old'

Tagged Templates

Tagged templates provide an abstracted and safer approach to string concatenation with dynamic values. They work by providing a layer of syntactic sugar over the process of implementing template generating functions. These functions are referred to as "template tags".

By using the func`some string`; syntax we invoke a template tag, that is a function to be run in order to process a template string. The template tag function receives the plain string parts and evaluated expressions in separate ordered arrays to be combined in a controlled manner, rather than blindly concatenated.

Template tags could be used by libraries to variously escape user input, strip tags, perform internationalization or provide any other string-based functionality via an arbitrary DSL.

function foo (literals,...values) {
    console.log(literals); // ['',' is ',' years old']
    console.log(values); // ['Billy',23]
    return 'foo';
}

var name = 'Billy';
var born = 1992;
var now = () => new Date().getFullYear();

var message = foo`${name} is ${now()-born} years old`;
// 'foo'

Happy Coding 😀

textContent VS innerText

Mohana Naga Venkat Sayempu — Wed, 27 May 2020 15:54:55 +0000

I used to think that there is no difference between textContent and innerText. But today I came to know that there exist some important differences between them.

i) textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows human-readable elements.

Example:-
HTML

<p>
    some paragraph text
    <style>
      p {
        color: red;
      }
    </style>
</p>

const p = document.querySelector('p');
console.log(p.textContent);
/* textContent returns the content inside style, script elements as well..Above statement logs:
  Some textSome Other Text

  p {
    color: red;
  }
*/
console.log(p.innerText);
/* innerText returns only human-readable elements. Above statement logs:
  Some textSome Other Text
*/

ii) textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of hidden elements.

Example:-
HTML

<style>
.special {
      display: none;
    }
</style>
<h1>Heading <span class="special">Special</span> </h1>

const h1 = document.querySelector('h1');
console.log(h1.textContent);
/* textContent is not aware of styles. So it returns entire content. Above statement logs:
Heading Special
*/
console.log(h1.innerText);
/* innerText is aware of css, doesn't return hidden content. Above statement logs:
Heading
*/

Happy Coding 😀

ES6 Modules

Mohana Naga Venkat Sayempu — Tue, 26 May 2020 10:00:32 +0000

ES6 modules use a declarative syntax for importing and exporting, support cyclic dependencies and support an async programmatic loading API for dynamically/conditionally loading modules at runtime.

Future browser APIs will be exposed as ES6 modules instead of global variables, properties of navigator or object namespaces such as Math and JSON.

Named Exports

Named exports can be individually imported by name and will populate the scope of the importing module.

// math.js
export const PI = Math.PI;
export function add(a,b) => a+b;
export function subtract(a,b) => a-b;

// app.js
import {PI,add,subtract} from 'math';
PI; // 3.141592653589793
add(1,1); // 2

All named exports can be imported via the wildcard * character, in which case they will populate the supplied object namespace.

// app.js
import * as math from 'math';
math.add(1,1); // 2
math.subtract(2,1); // 1

Named exports can alternatively be declared separately to the object they're exporting.

// math.js
const PI = Math.PI;
function add(a,b) => a+b;
function subtract(a,b) => a-b;

export {PI,add,subtract};

Exported names can be different from the one used internally in the exporting module.

// math.js
const PI = Math.PI;
function add(a,b) => a+b;
function subtract(a,b) => a-b;

export {subtract as minus};

And imported names can also be changed.

// app.js
import {subtract as foo} from 'math';
foo(2,1); // 1

Default Exports

Modules can indicate a default object to always be imported when no name is supplied. Default exports are to be favored over named exports since they simplify module APIs by making it unambiguous what to the primary export is. The default export/import syntax is effectively just sugar around a normal named export called default.

When importing a default export directly the {} named export syntax is not used. Additionally, unlike named exports the imported default export can be named anything you like in the importing module.

// module.js
export default function () {}

// app.js
import foo from './module';
foo();

Default and named imports can be mixed together on one line.

// module.js
export default function () {}
export function bar () {}

// app.js
import foo, {bar} from 'underscore';

Re-Exporting

You can re-export from modules, which can be useful for aggregating many exports from sub modules in a single file. This is often used when exposing a group of exports in a folder's index.js file.

// ./stuff/foo.js
export default function () {};

// ./stuff/index.js
export {default as foo} from './foo';
export {default as bar} from './bar';

// app.js
import {foo} from './stuff';
import * as stuff from 'stuff';
foo();
stuff.foo();

System Module Loader

Modules can be loaded dynamically and conditionally via the loader API exposed by System. A common use of System.import could be to bootstrap a transpiled ES6 app in a <script> tag in a ES5-based browser environment.

System
  .import('some-module')
  .then(someModule => {})
  .catch(error => {});

Happy Coding 😃

Arrow Functions

Mohana Naga Venkat Sayempu — Mon, 25 May 2020 00:19:32 +0000

Note: This is part of my es6 series of posts.

Arrow functions are a concise anonymous function syntax, and their this value is lexically bound to their enclosing scope. (Where the function was defined)

Single Expression

When the arrow function body is a single expression it is implicitly returned.

var add = (a,b) => a+b;

Single Argument

When the arrow function has only one argument the parens around the parameters can be omitted.

var odd = n => n % 2;

No Arguments

When the arrow function has no arguments you need an empty parens ().

var random = () => Math.random();

Multiple Expressions

When the arrow function body has multiple expressions then they must be wrapped in {} and the return statement may not be omitted.

var shout = s => {
  s = s.toUpperCase();
  s = s + '!';
  return s;
}

Lexical this

The arrow function's this value is bound to the enclosing scope, so no more need for var self = this.

function Counter () {
  this.count = 0;
  setInterval(() => this.count++, 1000);
}

var counter = new Counter();

Concise Functional Iteration

Arrow functions can be used to write iteration, map, reduce and filter operations quite concisely.

var data = ['one', 'two', 'three'];
var processed = data
  .map(s => s.length)
  .filter(length => length < 5);

Happy coding 😃 .