DEV Community: Daniel Obare

Modern JavaScript for everyone: Mastering Modern JavaScript The Right Way

Daniel Obare — Thu, 03 Mar 2022 17:04:25 +0000

1. Introduction

JavaScript is the language of the web. If you want to code for the web, you need to know JavaScript inside and out. From humble beginnings, JavaScript has grown to a powerful and complex language with features such as classes, promises, arrow functions, generators, string templates, and many others.

We will start with the very fundamentals of the language: variables and datatypes. Then in each lesson you'll build knowledge, from data structures like arrays and maps to loops, control structures, and functions. Along with the basics of the language, you'll also learn some key built-in APIs for manipulating data, AJAX, and working with the web browser DOM. Finally, we'll get a look at some of the most powerful and widely used web APIs that are supported by all modern browsers.

2. Language Fundamentals

2.1 Variables

A variable is a container for a value, like a number we might use in a sum, or a string that we might use as part of a sentence.

let myAge = 17;
let dolphinGoodbye = 'So long and thanks for all the fish';
let iAmAlive = true;
let test = 6 < 3;
let myNameArray = ['Chris', 'Bob', 'Jim'];
let dog = { name : 'Spot',
            breed : 'Dalmatian' };
let myNumberArray = [10, 15, 40];

2.2 Data Types

JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:
let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean

JavaScript types
The set of types in the JavaScript language consists of primitive values and objects.

Primitive values (immutable datum represented directly at the lowest level of the language)
Boolean type

Null type
Undefined type
Number type
BigInt type
String type
Symbol type
Objects (collections of properties)
Primitive values

All types except objects define immutable values (that is, values which can't be changed). For example (and unlike in C), Strings are immutable. We refer to values of these types as "primitive values".

Boolean type
Boolean represents a logical entity and can have two values: true and false.

Null type
The Null type has exactly one value: null.

Undefined type
A variable that has not been assigned a value has the value undefined.

Number type
The number type has only one integer with two representations: 0 is represented as both -0 and +0. (0 is an alias for +0.)
> 42 / +0
Infinity
> 42 / -0
-Infinity

2.3 Arithmetic, Assignment and comparison operators

2.3.1 Arithmetic operator

An arithmetic operator takes numerical values (either literals or variables) as their operands and returns a single numerical value. The standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and division (/).

1 / 2; // 0.5 1 / 2 == 1.0 / 2.0; // this is true

2.3.2 Assignment operator

An assignment operator assigns a value to its left operand based on the value of its right operand. The simple assignment operator is equal (=), which assigns the value of its right operand to its left operand.

let obj = {};

obj.x = 3;
console.log(obj.x); // Prints 3.
console.log(obj); // Prints { x: 3 }.

const key = "y";
obj[key] = 5;
console.log(obj[key]); // Prints 5.
console.log(obj); // Prints { x: 3, y: 5 }.

2.3.3 Comparison operator

A comparison operator compares its operands and returns a logical value based on whether the comparison is true. The operands can be numerical, string, logical, or object values. Strings are compared based on standard lexicographical ordering, using Unicode values. In most cases, if the two operands are not of the same type, JavaScript attempts to convert them to an appropriate type for the comparison. This behavior generally results in comparing the operands numerically. The sole exceptions to type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. These operators do not attempt to convert the operands to compatible
types before checking equality. Other comparison examples include:

Equal (==), Not equal (!=), Strict equal (===), Strict not equal (!==), Greater than (>), Greater than or equal (>=), Less than (<), Less than or equal (<=).

2.3.4 Logical operator
Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. Another example is Logical NOT (!)

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = 'Cat' && 'Dog';    // t && t returns Dog
var a6 = false && 'Cat';    // f && t returns false
var a7 = 'Cat' && false;    // t && f returns false

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = 'Cat' || 'Dog';    // t || t returns Cat
var o6 = false || 'Cat';    // f || t returns Cat
var o7 = 'Cat' || false;    // t || f returns Cat

var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !'Cat'; // !t returns false

2.3.5 Functions

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

// The following variables are defined in the global scope
var num1 = 20,
    num2 = 3,
    name = 'Chamakh';

// This function is defined in the global scope
function multiply() {
  return num1 * num2;
}

multiply(); // Returns 60

// A nested function example
function getScore() {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
}

getScore(); // Returns "Chamakh scored 5"

function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41

3. Data Structures & Algorithms

With the primitive data types defined, we can now work on some data structure implementations specific to JavaScript. Data structures are a way of storing and organizing the data primitives we just described so that they can be efficiently accessed and used in algorithms.

3.1: Arrays
Arrays are sequences of primitive data types, similar to a list. In JavaScript, there are two common object-oriented implementations of array-like objects: stacks and queues, as well as the specially defined array object. Stacks and queues differ from the exact definition of arrays in other programming languages by how objects are added or removed.

Queues are FIFO (first in, first out) while stacks are LIFO (last in, first out). You can think of a queue as a line of people going into a store, where the first one in the line gets into the store, and a stack as a stack of files, with the last one placed on the stack being the first one out.

Both queues and stacks offer the opportunity to display every datatype stored within the array and to slice and “peek” at particular elements. This is also true of the JavaScript array type, which is a specially defined object in JavaScript.

We can work with arrays to define a list of data types, and then index and filter for the first one (by definition, arrays are zero-indexed, meaning a slice of [0] for the index will return the first item and so on).

3.2: Linked Nodes
Linked nodes include many different types of array-like objects since they store datatypes in sequences. The critical difference is that instead of pointing to indexes as we saw with our array example of when a datatype was placed in an array, linked nodes hold pointers to other objects. So, in order to follow the linked nodes, you’ll have to transverse the different list objects using each one as a reference to go to the next one. You start at the head and then go all the way to the tail instead of calling a master index.

There are multiple types, from singly-linked lists, doubly-linked lists (which links the tail to the head, allowing us to travel back and forth through the different data types) to trees and graphs. Trees connect parents to multiple child nodes as opposed to linked lists, which connects one parent with one child. Graphs allow for the connection of multiple parent nodes to multiple child nodes. Here is an implementation of a linked list.

3.3: Hash Tables
A hash table is a dictionary-like data structure, where keys are paired with values. Hash tables are great for rapid retrieval and modification of data, though the array and list-like objects above are better for storage. Still, especially with the explosive growth of data, hash tables have become nearly ubiquitous. For example, popular NoSQL databases used in the web such as MongoDB and Redis are distributed hash tables and key/value stores. This is an example of a hash table implementation in JavaScript.

Implementing Algorithms Using JavaScript

3.4: Doubling Algorithm (Arithmetic Algorithm)
Let’s start off with a simple arithmetic function, that shows us how to do a sequence of steps in JavaScript. We’ll take something and multiply it by two, then log it to our console. This requires us to define a simple variable and function.

Note at the end that when we try passing a string datatype to this algorithm, it results in an NaN datatype (not a number).

3.5: QuickSort (Sorting Algorithm)

A common problem with programming algorithms is how to sort through arrays of values so that they come in some logical order, say, from the lowest to the highest integer in an array of numbers. QuickSort is a sorting algorithm that can help with this. By employing a pivot and going through subsets of an array, we can slowly sort every element that is smaller than the pivot to its left.

3.6: Jump Search (Search Algorithm)

Now that we’ve sorted an array, another common class of programming algorithms tries to solve the problem of searching if a value exists in an array. Using jump search, we aim to chunk out subsets of the array such that it’ll be more efficient than binary search at filtering through already-sorted arrays. We look for an interval of known greater and lesser elements where our search value might be.

4. Working with DOM

The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

5. Asynchronous JavaScript

5.1 Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them.

Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

Imagine a function, createAudioFileAsync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs.

function successCallback(result) {
  console.log("Audio file ready at URL: " + result);
}

function failureCallback(error) {
  console.error("Error generating audio file: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

5.2 promises chaining after a catch

It's possible to chain after a failure, i.e. a catch, which is useful to accomplish new actions even after an action failed in the chain.

new Promise((resolve, reject) => {
    console.log('Initial');

    resolve();
})
.then(() => {
    throw new Error('Something failed');

    console.log('Do this');
})
.catch(() => {
    console.error('Do that');
})
.then(() => {
    console.log('Do this, no matter what happened before');
});

5.3 Async

An async function is a function declared with the async keyword, and the await keyword is permitted within it. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

Async functions may also be defined as expressions.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

5.4 Await

The await operator is used to wait for a Promise. It can only be used inside an async function within regular JavaScript code; however it can be used on its own with JavaScript modules.

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

Follow for more insights

Introduction to Data Structures and Algorithms With Modern JavaScript

Daniel Obare — Mon, 21 Feb 2022 10:11:53 +0000

Basic Data Structures

A data structure is a particular way of organizing and storing data in a computer so that it can be accessed and modified efficiently. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data.

1. Linked Lists

LinkedList is the dynamic data structure, as we can add or remove elements at ease, and it can even grow as needed. Just like arrays, linked lists store elements sequentially, but don’t store the elements contiguously like an array.

// linkedlist class
class LinkedList {
    constructor()
    {
        this.head = null;
        this.size = 0;
    }
}

The above example shows a Linked List class with a constructor and a list of methods to be implemented. Linked List class has two properties: i.e. head and size, where the head stores the first node of a List, and size indicates the number of nodes in a list.

Functions to be implemented in the Linked List

1. add(element) – It adds an element at the end of the list.

// adds an element at the end
// of list
add(element)
{
    // creates a new node
    var node = new Node(element);

    // to store current node
    var current;

    // if list is Empty add the
    // element and make it head
    if (this.head == null)
        this.head = node;
    else {
        current = this.head;

        // iterate to the end of the
        // list
        while (current.next) {
            current = current.next;
        }

        // add node
        current.next = node;
    }
    this.size++;
}

In the order to add an element at the end of the list we consider the following :

If the list is empty then add an element and it will be head
If the list is not empty then iterate to the end of the list and add an element at the end of the list

2. insertAt(element, index) – It inserts an element at the given index in a list.

// insert element at the position index
// of the list
insertAt(element, index)
{
    if (index < 0 || index > this.size)
        return console.log("Please enter a valid index.");
    else {
        // creates a new node
        var node = new Node(element);
        var curr, prev;

        curr = this.head;

        // add the element to the
        // first index
        if (index == 0) {
            node.next = this.head;
            this.head = node;
        } else {
            curr = this.head;
            var it = 0;

            // iterate over the list to find
            // the position to insert
            while (it < index) {
                it++;
                prev = curr;
                curr = curr.next;
            }

            // adding an element
            node.next = curr;
            prev.next = node;
        }
        this.size++;
    }
}

In order to add an element at the given index of the list we consider three conditions as follows:

if the index is zero we add an element at the front of the list and make it head
If the index is the last position of the list we append the element at the end of the list
if the index is between 0 or size – 1 we iterate over to the index and add an element at that index

3. removeFrom(index) – It removes and returns an element from the list from the specified index

// removes an element from the
// specified location
removeFrom(index)
{
    if (index < 0 || index >= this.size)
        return console.log("Please Enter a valid index");
    else {
        var curr, prev, it = 0;
        curr = this.head;
        prev = curr;

        // deleting first element
        if (index === 0) {
            this.head = curr.next;
        } else {
            // iterate over the list to the
            // position to removce an element
            while (it < index) {
                it++;
                prev = curr;
                curr = curr.next;
            }

            // remove the element
            prev.next = curr.next;
        }
        this.size--;

        // return the remove element
        return curr.element;
    }
}

In order to remove an element from the list we consider three conditions:

If the index is 0 then we remove the head and make the next node head of the list
If the index is size – 1 then we remove the last element from the list and make prev the last element
If it’s in between 0 to size – 1 we remove the element by using prev and the current node

4. removeElement(element) – This method removes element from the list. It returns the removed element, or if it’s not found it returns -1.

// removes a given element from the
// list
removeElement(element)
{
    var current = this.head;
    var prev = null;

    // iterate over the list
    while (current != null) {
        // comparing element with current
        // element if found then remove the
        // and return true
        if (current.element === element) {
            if (prev == null) {
                this.head = current.next;
            } else {
                prev.next = current.next;
            }
            this.size--;
            return current.element;
        }
        prev = current;
        current = current.next;
    }
    return -1;
}

The above method is just a modification of removeFrom(index), as it searches for an element and removes it, rather than removing it from a specified location

Helper Methods
1. indexOf(element) – it returns the index of a given element if the element is in the list.

// finds the index of element
indexOf(element)
{
    var count = 0;
    var current = this.head;

    // iterate over the list
    while (current != null) {
        // compare each element of the list
        // with given element
        if (current.element === element)
            return count;
        count++;
        current = current.next;
    }

    // not found
    return -1;
}

2. isEmpty() – it returns true if the list is empty.

// checks the list for empty
isEmpty()
{
    return this.size == 0;
}

3. size_of_list() – It returns the size of list

// gives the size of the list
size_of_list()
{
    console.log(this.size);
}

*4. printList() – It prints the contents of the list. *

// prints the list items
printList()
{
    var curr = this.head;
    var str = "";
    while (curr) {
        str += curr.element + " ";
        curr = curr.next;
    }
    console.log(str);
}

2. Arrays

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

Create an Array

// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits.length);
// 2

// 'fruits' array created using the Array() constructor.
const fruits = new Array('Apple', 'Banana');
console.log(fruits.length);
// 2

// 'fruits' array created using String.prototype.split().
const fruits = 'Apple, Banana'.split(', ');
console.log(fruits.length);
// 2

Create an array from string

const fruits = ['Apple', 'Banana'];
const fruitsString = fruits.join(', ');
console.log(fruitsString);
// "Apple, Banana"

Access an array item by its index

const fruits = ['Apple', 'Banana'];

// The index of an array's first element is always 0.
fruits[0]; // Apple

// The index of an array's second element is always 1.
fruits[1]; // Banana

// The index of an array's last element is always one
// less than the length of the array.
fruits[fruits.length - 1]; // Banana

// Using a index number larger than the array's length
// returns 'undefined'.
fruits[99]; // undefined

Find the index of an item in an array

const fruits = ['Apple', 'Banana'];
console.log(fruits.indexOf('Banana'));
// 1

Check if an array contains a certain item

const fruits = ['Apple', 'Banana'];

fruits.includes('Banana'); // true
fruits.includes('Cherry'); // false

// If indexOf() doesn't return -1, the array contains the given item.
fruits.indexOf('Banana') !== -1; // true
fruits.indexOf('Cherry') !== -1; // false

Append an item to an array

const fruits = ['Apple', 'Banana'];
const newLength = fruits.push('Orange');
console.log(fruits);
// ["Apple", "Banana", "Orange"]
console.log(newLength);
// 3

Remove the last item from an array

const fruits = ['Apple', 'Banana', 'Orange'];
const removedItem = fruits.pop();
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItem);
// Orange

3. Stacks

linear data structure in which addition or removal of element follows a particular order i.e. LIFO(Last in First Out) AND FILO(First in Last Out).
Stacks are basically arrays where the only thing you can do, more or less, is to push and pop.

Array Declaration

var House = [ ]; // method 1 
var House = new Array(); // method 2 


// Initializing while declaring
var house = ["1BHK", "2BHK", "3BHK", "4BHK"];

var stack = [];
stack.push(2);       // stack is now [2]
stack.push(5);       // stack is now [2, 5]
var i = stack.pop(); // stack is now [2]
alert(i);            // displays 5

4. Queues

Queues are, the first item added to the queue will be the first one taken out of the queue(FIFO). When adding an item into the queue that operation is called enqueuing and when we take out an item from the queue the operation is called dequeuing.

var queue = [];
queue.push(2);         // queue is now [2]
queue.push(5);         // queue is now [2, 5]
var i = queue.shift(); // queue is now [5]
alert(i);              // displays 2

5. Trees

Trees are another relation-based data structure, which specialize in representing hierarchical structures. Like a linked list, nodes contain both elements of data and pointers marking its relation to immediate nodes.

Each tree has a “root” node, off of which all other nodes branch. The root contains references to all elements directly below it, which are known as its “child nodes”. This continues, with each child node, branching off into more child nodes.

Nodes with linked child nodes are called internal nodes while those without child nodes are external nodes. A common type of tree is the “binary search tree” which is used to easily search stored data.

These search operations are highly efficient, as its search duration is dependent not on the number of nodes but on the number of levels down the tree.

This type of tree is defined by four strict rules:

a) The left subtree contains only nodes with elements lesser than the root.
b) The right subtree contains only nodes with elements greater than the root.
c) Left and right subtrees must also be a binary search tree. They must follow the above rules with the “root” of their tree.
d) There can be no duplicate nodes, i.e. no two nodes can have the same value.

6. Graphs

Graphs are a relation-based data structure helpful for storing web-like relationships. Each node, or vertex, as they’re called in graphs, has a title (A, B, C, etc.), a value contained within, and a list of links (called edges) it has with other vertices.

7. Hash Tables (Map)

Hash tables are a complex data structure capable of storing large amounts of information and retrieving specific elements efficiently. This data structure relies on the concept of key/value pairs, where the “key” is a searched string and the “value” is the data paired with that key.

Each searched key is converted from its string form into a numerical value, called a hash, using a predefined hash function. This hash then points to a storage bucket – a smaller subgroup within the table. It then searches the bucket for the originally entered key and returns the value associated with that key.

JavaScript 101: Introduction to Modern JavaScript Overview.

Daniel Obare — Sat, 12 Feb 2022 11:50:54 +0000

JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.

Client-side: It supplies objects to control a browser and its Document Object Model (DOM). Like if client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation. Useful libraries for the client-side are AngularJS, ReactJS, VueJS and so many others.
Server-side: It supplies objects relevant to running JavaScript on a server. Like if the server-side extensions allow an application to communicate with a database, and provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. The useful framework which is the most famous these days is node.js.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Basic Example to Describe JavaScript
    </title>
</head>

<body>
    <script>
        console.log("Welcome Daniel");
    </script>
</body>

</html>

External scripts

If we have a lot of JavaScript code, we can put it into a separate file. Script files are attached to HTML with the src attribute:

<script src="/path/to/script.js"></script>

Here, /path/to/script.js is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, src="script.js", just like src="./script.js", would mean a file "script.js" in the current folder.

Code structure

We can have as many statements in our code as we want. Statements can be separated with a semicolon.

alert('Hello'); alert('World');

Variables

let message;
message = 'Hello!';

alert(message); // shows the variable content

Data types

Number

let n = 123;

String
let str = "Hello";

Boolean (logical type)

let nameFieldChecked = true; // yes, name field is checked
let ageFieldChecked = false; // no, age field is not checked

``let isGreater = 4 > 1;
alert( isGreater ); // true (the comparison result is "yes")

The “null” value
let age = null;

The “undefined” value
let age;

The typeof operator
The typeof operator returns the type of the argument. It’s useful when we want to process values of different types differently or just want to do a quick check.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

Summary

number for numbers of any kind: integer or floating-point, integers are limited by ±(253-1).
bigint is for integer numbers of arbitrary length.
string for strings. A string may have zero or more characters, there’s no separate single-character type.
boolean for true/false.
null for unknown values – a standalone type that has a single value null.
undefined for unassigned values – a standalone type that has a single value undefined.
object for more complex data structures.
symbol for unique identifiers.

Applications of JavaScript:

Web Development: Adding interactivity and behavior to static sites JavaScript was invented to do this in 1995. By using AngularJS that can be achieved so easily.
Web Applications: With technology, browsers have improved to the extent that a language was required to create robust web applications. When we explore a map in Google Maps then we only need to click and drag the mouse. All detailed view is just a click away, and this is possible only because of JavaScript. It uses Application Programming Interfaces(APIs) that provide extra power to the code. The Electron and React is helpful in this department.
Server Applications: With the help of Node.js, JavaScript made its way from client to server and node.js is the most powerful on the server-side.
Games: Not only in websites, but JavaScript also helps in creating games for leisure. The combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It provides the EaseJS library which provides solutions for working with rich graphics.
Smartwatches: JavaScript is being used in all possible devices and applications. It provides a library PebbleJS which is used in smartwatch applications. This framework works for applications that require the internet for its functioning.
Art: Artists and designers can create whatever they want using JavaScript to draw on HTML 5 canvas, make the sound more effective also can be used p5.js library.
Machine Learning: This JavaScript ml5.js library can be used in web development by using machine learning.