What is javascript ES6? This is the standard for javascript language that was released on June 2015 and was introduced in this version some new features like the keywords on declaring variables Const and Let, arrow functions, javascript classes, multiline strings. ES6 or ECMAScript 6 is the standard of rules for javascript as in c programming is ANSI C - C89.

Javascript var

In Javascript variables are containers that store data like strings of text, numbers and boolean, these values can change over time so declaring a variable can be done using the keyword var.

var car = "Ford";

When we declare a variable as above the same time is an instance of the class Object, that means will have properties, methods and event handlers. So a Javascript object can be declared the same way as a single value variable but could contain multiple values in the sense of a real object, as described in the paradigm of object-oriented programming.

A javascript object can be created and have the following form, just by defining properties and values inside brackets.

var car = {type:"Ford Fiesta", year:"2001", color:"red"}

Another important aspect of variables is the scope that means in what area of the code the variable is accessible, so if we declare the variable outside of a function has global scope meaning is accessible from anywhere in the code. On the other hand, if a variable is declared inside a function could be accessed locally. The need to introduce blocked scoped variables was because in javascript the variables defined by var are function-scoped by default, this can cause some problems on redeclaring the same name variables and conflict with the names on accessing variables . Additional to var after 2015 there are two new keywords introduced const and let.

Javascript const

This is a block-scoped variable that means if is defined inside a block of curly brackets in if,for,while etc the variable exist only inside the block and not outside as could happen with function-scoped variable. The special case with const is that thet identifier cannot be redeclared or reassigned is immutable but we can add new properties or change values to existing ones

const car = "Fiat";
car = "Mercedes"; // this cause an error
car.type = "pick up"; // this is ok

In real-world let's examine some code from angular observables

const locations = new Observable((observer) => {
.....
});

const locationsSubscription = locations.subscribe({ });

In the above snippet, locations is a javascript object from the observable instance this object has a function named subscribe. The name of locations is unique and cannot be redeclared, same time has a new method that named subscribe() returns another object named Subscription Object. The method subscribe method is part of an observer pattern when is called signals that observable will start to receive values from the object that has been subscribed to this.

In the above piece of code, the creation of the instance new Observable is not part of the javascript but it belongs to RxJS a reactive programming library. So Angular makes use of the observer software design pattern that has been implemented using RxJs. The object locations is an observable aka a stream of asynchronous events that capture the geolocation of user through the browser using Geolocation API.

So when making a call to the method subscribe() then the observable start listening for updates. In method subscribe we pass an observer object which is just a simple javascript object that includes key handlers next, error, complete.

Javascript let

when we declare a variable using let keyword there are some similarities with keyword var, for example, if you define the let variable outside of a function has exactly the same functionality as var, with the only difference that the properties of let variable will not be added as properties to the global window object. If it defined inside a function has exactly the same behavior as local function as var, the basic difference with var is visibility, let's take the case of block scope on for loop

function relatedProducts() {
   // my_product is not visible out here
   for( let my_product = 0; my_product < 5; my_product++ ) {
     // my_product is visible here and to all sub-blocks
   }
  // my_product is not visible out here
}

Intersection observer API

One of the most coolest features in native javascript is the observer api , this feature allow you to monitor when an element div, p or any other will become visible in the screen or another related element. This is very usefull because you easily add funtionality like loading an item efficiently, make split coding, lazy loading of images and many other stuff.

Let's take the example where there is div with id that named sharing-tools (could be the addthis widget), if  the div is  not available in screen on  first load but located below the fold, here a simple code to load it intelligently and reduce first and thread execution

const sharingTools = document.getElementById("sharing-tools");
let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach( entry => {
       if( entry.isIntersecting) {
             // load addthis.com tools here by dynamic create a script tag in the head
             var script = document.createElement("script");
             ...

             observer.unobserve(entry.target);
        }
}
observer.observe(sharingTools);

Javascript loop

A new loop was introduced with ES5 the forEach loop, this is an easy way to loop through array, this can be used only with array, sets and maps. Using this somone can implement a callback each element of an array. In the above example you see the usage when the IntersectionObserver is looping through the entries that have been attached to Intersection to monitor when a element is intersection.

entries.forEach( entry => {
    if( entry.isIntersecting) {
         ...
     }
}

Split Coding for high performance in mobile devices

When you combine effectively the intersection observer and at the same time implementing this tiny LoadJS library you can split your javascript codes in chunks and improve dramatically the performance in Google PageSpeed Insights.   You can have maximum on metrics like Time To Interactive, if you want to check a live example check this e-commerce anding page.