Javascript is one most popular languages that are used in web development. Basically it is a scripting language that allows you to create interactive elements in a web page.

Firstly was introduced in 1995 by Brendan Eich while working on Netscape Browser. As time passed new features were introduced by new versions like ES2 1998 and ES3 1999 with the latest version was ECMAScript 6.

So what is javascript ES6? This is the standard for javascript that was released in 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.

Keeping up with news features allows web developers to create complex user interfaces and single-applications.

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. Using var we declare a function-scoped or globally-scoped variable.

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 it is defined inside a block of curly brackets in if, for, while, etc the variable exists only inside the block and not outside as could happen with a function-scoped variable. The special case with const is that the 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, it is an observable example where locations are 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

Javascript Arrow functions

const hello = function() {
     return "hello there";

is equalivant to

const hello = () => {
     return "hello there";

Javascript: Promise

one popular feature in  ES6 version are promises, a promise is a placeholder for a value that will occur from a future asynchronous operation, it will be the result of an operation or the error message upon failure to execute this operation. The main reason for this operation is to solve the problem with callbacks than exist in asynchronous operations and make the code look synchronous.

async function f() {
    let promise = new Promise((resolve, reject) => {
         setTimeout(() => resolve("done!"), 1000)
   let result = await promise;

Intersection observer API

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

Let's take the example where there is div with an 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 tools here by dynamic create a script tag in the head
             var script = document.createElement("script");


Javascript loop

A new loop was introduced with ES5 the forEach loop, this is an easy way to loop through the array, this can be used only with an array, sets, and maps. Using this someone 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 an element is an 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 a maximum on metrics like Time To Interactive, so for apparel and high-quality design and user experience.