Advanced JavaScript and the ES6

: Priyansh Vyas

Goals going ahead

  • Functions in JavaScript
  • What is ES6?
  • ES6 features
  • Events in JavaScript
  • Document Object Model
  • DOM Manipulation
  • What are promises?

Functions

Parameter and return types are not written in the function declaration.
  • A function can return anything it wants
  • if a function returns nothing, it returns undefined

ES6

ECMAScript is the scripting language that forms the basis of JavaScript.

ECMAScript standards set in 2015 are collectively called as ES6.

ECMA stands for European Computer Manufacturers Association.

Anonymous Functions

An anonymous function is a function that was declared without any named identifier to refer to it. As such, an anonymous function is usually not accessible after its initial creation.

One common use for anonymous functions is as arguments to other functions.

Arrow Functions

Destructuring

Template Strings

Higher Order Array Methods

Modules

JavaScript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages, so large scripts were generally not needed.

Fast forward a few years and we now have complete applications being run in browsers with a lot of JavaScript code. Be it for frontend or backend. Now it makes sense to start thinking about mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed.

JS modules rely on the import and export statements.
There are two types of exports: Named and Default.

  • With named, one can have multiple named exports per file.
    We import the specific exports we want surrounded in braces.
    The name of imported module has to be the same as the name of the exported module.
  • One can have only one default export per file.
    No curly braces are needed in default imports.
    The naming of import is completely independent in default export and we can use any name we like.

NPM

npm (originally short for Node Package Manager) is a package manager for the JavaScript programming language maintained by npm, Inc.
npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry accessible at npm.

ES6 method

Make sure to use type="module" or "type":"module" in your nearest config destination.
  • Importing packages from npm
    import isOdd from "is-odd";
  • Import named exports from a person.js :
    import { name, age } from "./person.js";
  • Import a default export from message.js :
    import message from "./message.js";


ES5 method

  • Importing packages from npm
    const isOdd = require("is-odd");
  • Import named exports from person.js :
    const { name, age } = require("./person.js");
  • Import a default export from message.js :
    const message = require("./message.js");

Events

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.
For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box.

Examples

  • The user selects, clicks, or hovers the cursor over a certain element.
  • The user chooses a key on the keyboard.
  • The user resizes or closes the browser window.
  • A form is submitted.
  • An image is loaded completely.
  • A video is played, paused, or finishes.
  • An error occurs.

Every time such an event occurs, we might want to handle these events so as to perform a specific task.

The recommended mechanism for adding event handlers in web pages is the addEventListener() method:

Changing the background-color of the body to a random color on button click.

All events listed

Some popular events

Document Object Model

Visualize

The Document Object Model is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

DOM can be modified with a scripting language such as JavaScript.

With the object model, JavaScript gets all the power it needs to create dynamic HTML.

  • can change all the HTML elements in the page
  • can change the CSS style of all the elements in the page
  • can change the content of all the elements in the page
  • can remove existing HTML elements and attributes
  • can create new events in the page

DOM Manipulation

Promises

JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another. In browsers, JavaScript shares a thread with a load of other stuff that differs from browser to browser.

But typically JavaScript is in the same queue as writing markup to the page, updating styles, and handling user actions. One thing happening delays the other.

As a human being, you're multithreaded. You can keep an eye on it Google Meet in your phone , watch Valorant videos on your laptop, listen to Spotify, all while eating Nutella. The only blocking function we have to deal with is sneezing, where all current activity must be suspended for the duration of the sneeze.

Now let's bring this closer to development.

Let's say you want to display an image on your webpage and depending on whether the image has been loaded or not you want to perform some tasks.

This can be achieved by :

It's possible that the events happened before we started listening for them, so we need to work around that using the "complete" property of images.

Issue?

This doesn't catch images that errored before we got a chance to listen for them; unfortunately the DOM doesn't give us a way to do that.

Also, this is loading one image. Things get even more complex if we want to know when a set of images have to be loaded.

Ideal Solution?

Implementation in Real Life?

This is solved by a ES6 feature known as a Promise.

At their most basic, promises are a bit like event listeners except :

  • A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.
  • If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.

A promise can be:

  • Fulfilled : The action relating to the promise succeeded.
  • Rejected : The action relating to the promise got rejected.
  • Pending : Hasn't fulfilled or rejected yet.

Syntax