Learning JavaScript Data Structures and Algorithms - Second Edition

The simplest environment that you can use is a browser.

You can use Firefox along with Firebug. When you have Firebug installed, you will see the following icon in the upper-right corner:

When you open Firebug (simply click on its icon), you will see the Console tab, and you will be able to write all your JavaScript code in its command-line area, as demonstrated in the following screenshot (to execute the source code, you need to click on the Run button):

You can also expand the command line to fit the entire available area of the Firebug add-on.

You can also use Google Chrome. Chrome already comes with Google Developer Tools. To open it, locate the setting and control icon and navigate to Tools | Developer Tools, as shown in the following screenshot:

Then, in the Console tab, you can write your own JavaScript code for testing, as follows:

The second environment you might want to install on your computer is also simple, but it's a little bit more complex than just using a browser.

You will need to install XAMPP ( https://www.apachefriends.org ) or any web server of your preference. Then, inside the XAMPP installation folder, you will find the htdocs directory. You can create a new folder in which you can execute the source code we will implement in this book, or you can download the source code from this book and extract it to the htdocs directory, as follows:

Then, you can access the source code from your browser using your localhost URL (after starting the XAMPP server), as shown in the following screenshot (do not forget to enable Firebug or Google Developer Tools to see the output):

The third option is having an environment that is 100 percent JavaScript! Instead of using XAMPP, which is an Apache server, we can use a JavaScript server.

To do so, we need to have Node.js installed. Go to http://nodejs.org/ and download and install Node.js. After this, open the terminal application (if you are using Windows, open the command prompt with Node.js, which was installed with Node.js) and run the following command:

npm install http-server -g

Make sure you type the command and don't copy and paste it. Copying the command might give you some errors.

You can also execute the command as an administrator. For Linux and Mac systems, use the following command:

sudo npm install http-server -g

This command will install http-server, which is a JavaScript server. To start a server and run the examples from this book in the terminal application, change the directory to the folder that contains the book's source code and type http-server, as displayed in the following screenshot:

To execute the examples, open the browser and access the localhost on the port specified by the http-server command, as follows:

Variables store data that can be set, updated, and retrieved whenever needed. Values that are assigned to a variable belong to a type. In JavaScript, the available types are numbers, strings, Booleans, functions, and objects. We also have undefined and null, along with arrays, dates, and regular expressions.

The following is an example of how to use variables in JavaScript:

var num = 1; //{1} 
num = 3; //{2} 
var price = 1.5; //{3} 
var name = 'Packt'; //{4} 
var trueValue = true; //{5} 
var nullVar = null; //{6} 
var und;  //{7} 

        console.log("num: "+ num); 
        console.log("name: "+ name); 
        console.log("trueValue: "+ trueValue); 
        console.log("price: "+ price); 
        console.log("nullVar: "+ nullVar); 
        console.log("und: "+ und); 

If we want to see the value of each variable we declared, we can use console.log to do so, as listed in the previous code snippet.

The console.log method also accepts more than just arguments. Instead of console.log("num: "+ num), we can also use console.log("num: ", num).

We will discuss functions and objects later in this chapter.

var myVariable = 'global'; 
myOtherVariable = 'global'; 
 
function myFunction(){ 
  var myVariable = 'local'; 
  return myVariable; 
} 
 
function myOtherFunction(){ 
  myOtherVariable = 'local'; 
  return myOtherVariable; 
} 
 
console.log(myVariable);   //{1} 
console.log(myFunction()); //{2} 
 
console.log(myOtherVariable);   //{3} 
console.log(myOtherFunction()); //{4} 
console.log(myOtherVariable);   //{5} 

We need operators when performing any operation in a programming language. JavaScript also has arithmetic, assignment, comparison, logical, bitwise, and unary operators, among others. Let's take a look at these:

var num = 0; // {1} 
num = num + 2; 
num = num * 3; 
num = num / 2; 
num++; 
num--; 
 
num += 1; // {2} 
num -= 2; 
num *= 3; 
num /= 2; 
num %= 3; 
 
console.log('num == 1 : ' + (num == 1)); // {3} 
console.log('num === 1 : ' + (num === 1)); 
console.log('num != 1 : ' + (num != 1)); 
console.log('num > 1 : ' + (num > 1)); 
console.log('num < 1 : ' + (num < 1)); 
console.log('num >= 1 : ' + (num >= 1)); 
console.log('num <= 1 : ' + (num <= 1)); 
 
console.log('true && false : ' + (true && false)); // {4} 
console.log('true || false : ' + (true || false)); 
console.log('!true : ' + (!true)); 

On line {1}, we have the arithmetic operators. In the following table, we have the operators and their descriptions:

On line {2}, we have the assignment operators. In the following table, we have the operators and their descriptions:

On line {3}, we have the comparison operators. In the following table, we have the operators and their descriptions:

Finally, on line {4}, we have the logical operators. In the following table, we have the operators and their descriptions:

JavaScript also supports bitwise operators, which are shown as follows:

console.log('5 & 1:', (5 & 1)); 
console.log('5 | 1:', (5 | 1)); 
console.log('~ 5:', (~5)); 
console.log('5 ^ 1:', (5 ^ 1)); 
console.log('5 << 1:', (5 << 1)); 
console.log('5 >> 1:', (5 >> 1)); 

The following table contains a more detailed description of the bitwise operators:

The typeof operator returns the type of the variable or expression. For example, have a look at the following code:

console.log('typeof num:', typeof num); 
console.log('typeof Packt:', typeof 'Packt'); 
console.log('typeof true:', typeof true); 
console.log('typeof [1,2,3]:', typeof [1,2,3]); 
console.log('typeof {name:John}:', typeof {name:'John'}); 

The output will be as follows:

typeof num: number 
typeof Packt: string 
typeof true: boolean 
typeof [1,2,3]: object 
typeof {name:John}: object

JavaScript also supports the delete operator, which deletes a property from an object. Take a look at the following code:

var myObj = {name: 'John', age: 21}; 
delete myObj.age; 
console.log(myObj); //outputs Object {name: "John"} 

In this book's algorithms, we will use some of these operators.

In JavaScript, true and false are a little bit tricky. In most languages, the Boolean values true and false represent the true/false results. In JavaScript, a string such as "Packt" has the value true, for example.

The following table can help us better understand how true and false work in JavaScript:

Let's consider some examples and verify their output:

function testTruthy(val){ 
  return val ? console.log('truthy') : console.log('falsy'); 
} 
 
testTruthy(true); //true 
testTruthy(false); //false 
testTruthy(new Boolean(false)); //true (object is always true) 
 
testTruthy(''); //false 
testTruthy('Packt'); //true 
testTruthy(new String('')); //true (object is always true) 
 
testTruthy(1); //true 
testTruthy(-1); //true 
testTruthy(NaN); //false 
testTruthy(new Number(NaN)); //true (object is always true) 
 
testTruthy({}); //true (object is always true) 
 
var obj = {name:'John'}; 
testTruthy(obj); //true 
testTruthy(obj.name); //true 
testTruthy(obj.age); //false (age does not exist) 

The two equal operators supported by JavaScript can cause a little bit of confusion when working with them.

When using ==, values can be considered equal even when they are of different types. This can be confusing even for a senior JavaScript developer. Let's analyze how == works using the following table:

If x and y are of the same type, then JavaScript will use the equals method to compare the two values or objects. Any other combination that is not listed in the table gives a false result.

The toNumber and toPrimitive methods are internal and evaluate the values according to the tables that follow.

The toNumber method is presented here:

Finally, toPrimitive is presented here:

Let's verify the results of some examples. First, we know that the output of the following code is true (string length > 1):

console.log('packt' ? true : false); 

Now, what about the following code? Let's take a look:

console.log('packt' == true); 

The output is false, so let's understand why:

What about the following code? Let's take a look:

console.log('packt' == false); 

The output is also false, and the following are the steps:

What about the === operator? It is much easier. If we are comparing two values of different types, the result is always false. If they have the same type, they are compared according to the following table:

If x and y are different types, then the result is false.

Let's consider some examples:

console.log('packt' === true); //false 
 
console.log('packt' === 'packt'); //true 
 
var person1 = {name:'John'}; 
var person2 = {name:'John'}; 
console.log(person1 === person2); //false, different objects 

The first conditional statement we will take a look at is the if...else construct. There are a few ways we can use the if...else construct.

We can use the if statement if we want to execute a script only if the condition is true, as follows:

var num = 1; 
if (num === 1) { 
  console.log("num is equal to 1"); 
} 

We can use the if...else statement if we want to execute a script and the condition is true or another script just in case the condition is false (else), as follows:

var num = 0; 
if (num === 1) { 
  console.log("num is equal to 1"); 
} else { 
  console.log("num is not equal to 1, the value of num is " + num); 
} 

The if...else statement can also be represented by a ternary operator. For example, take a look at the following if...else statement:

if (num === 1){ 
  num--; 
} else { 
  num++; 
} 

It can also be represented as follows:

(num === 1) ? num-- : num++; 

Also, if we have several scripts, we can use if...else several times to execute different scripts based on different conditions, as follows:

var month = 5; 
if (month === 1) { 
  console.log("January"); 
} else if (month === 2){ 
  console.log("February"); 
} else if (month === 3){ 
  console.log("March"); 
} else { 
  console.log("Month is not January, February or March"); 
} 

Finally, we have the switch statement. If the condition we are evaluating is the same as the previous one (however, it is being compared to different values), we can use the switch statement:

var month = 5; 
switch(month) { 
  case 1: 
  console.log("January"); 
  break; 
  case 2: 
  console.log("February"); 
  break; 
  case 3: 
  console.log("March"); 
  break; 
  default: 
  console.log("Month is not January, February or March"); 
} 

One thing that is very important in a switch statement is the usage of the case and break keywords. The case clause determines whether the value of switch is equal to the value of the case clause. The break statement stops the switch statement from executing the rest of the statement (otherwise, it will execute all the scripts from all case clauses below the matched case until a break statement is found in one of the case clauses). Finally, we have the default statement, which is executed by default if none of the case statements are true (or if the executed case statement does not have the break statement).

Loops are very often used when we work with arrays (which are the subject of the next chapter). Specifically, we will use the for loop in our algorithms.

The for loop is exactly the same as in C and Java. It consists of a loop counter that is usually assigned a numeric value, then the variable is compared against another value (the script inside the for loop is executed while this condition is true), and finally the numeric value is increased or decreased.

        for (var i=0; i<10; i++) { 
          console.log(i); 
        } 

        var i = 0; 
        while(i<10) 
        { 
          console.log(i); 
          i++; 
        } 

        var i = 0; 
        do { 
          console.log(i); 
          i++; 
        } while (i<10) 

As we know, JavaScript is a language that runs mostly on browsers (also in servers using NodeJS), and each browser can implement its own version of the available functionalities of JavaScript (as you will learn later on in this book). This specific implementation is based on ECMAScript. Thus, the browsers offer mostly the same functionalities (our JavaScript code will run in all browsers); however, each functionality's behavior may be a little bit different from browser to browser.

All the code presented in this chapter so far is based on ECMAScript 5, which became a standard in December 2009. The most recent release of ECMAScript, at the time this book is being written, is ECMAScript 6, which was standardized in July 2015, almost 6 years after its previous version. The committee responsible for drafting the ECMAScript specifications made the decision to move to a yearly model to define new standards, where new features would be added as they were approved. For this reason, ECMAScript sixth edition was renamed to ECMAScript 2015 (ES6). There is a new version that is also being prepared to be released in the summer of 2016, which is called ECMAScript 2016 or ECMAScript 7 (ES7).

In this topic, we will cover some of the new functionalities introduced in ES6 and ES7.

It is important to know that, even though ES6 has already been released, its features might not be supported by all browsers. For a better experience, it is best to use the latest version available for the browser you choose to use (Firefox or Chrome).

At the following links, you can verify which features are available in each browser:

Even if the features are not yet available, we can start using new syntax and new functionalities today.

By default, Firefox adds support to ES6 and ES7 as their team ships the implementation of the functionalities.

In Google Chrome, you can enable the functionalities by enabling the experimental JavaScript flag by opening the URL  chrome://flags , as demonstrated in the following image:

Using Babel.js

Babel ( https://babeljs.io ) is a JavaScript transpiler, also known as a source-to-source compiler. It converts JavaScript code with ES6 and ES7 language features to equivalent code that uses only language features from the widely supported ES5 specification.

There are many different ways of using Babel.js. One of them is installing it according to its setup (https://babeljs.io/docs/setup/ ). Another one is using it directly in the browser through its Try it out option ( https://babeljs.io/repl/ ), as demonstrated in the following screenshot:

Along with each example of ES6 and ES7 that will be presented in the following topics, we will also provide a link so that you can run and test the examples in Babel.

Until ES5, we could declare variables in any place of our code, even if we overwrote the variables declaration, as in the following code:

var framework = 'Angular'; 
var framework = 'React'; 
console.log(framework); 

The output of the preceding code is React as the last variable declared, named framework, was assigned this value. In the previous code, we had two variables with the same name; this is very dangerous and might drive the code to an incorrect output.

Other languages, such as C, Java, and C#, do no allow this behavior. With ES6, a new keyword was introduced, called let. Let is the new var keyword, meaning we can simply substitute the keyword var for let. In the following code, we have an example:

let language = 'JavaScript!'; //{1} 
let language = 'Ruby!'; // {2} - throws error 
console.log(language); 

Line {2} will throw an error because a variable named language is already declared in the same scope (line {1}). We will discuss the let and variables scope in the next topic.

let movie = 'Lord of the Rings'; //{1} 
//var movie = 'Batman v Superman'; //throws error, variable movie already declared 
 
function starWarsFan(){ 
  let movie = 'Star Wars'; //{2} 
  return movie; 
} 
 
function marvelFan(){ 
  movie = 'The Avengers'; //{3} 
  return movie; 
} 
 
function blizzardFan(){ 
  let isFan = true; 
  let phrase = 'Warcraft'; //{4} 
  console.log('Before if: ' + phrase); 
  if (isFan){ 
    let phrase = 'initial text'; //{5} 
    phrase = 'For the Horde!';   //{6} 
    console.log('Inside if: ' + phrase); 
  } 
  phrase = 'For the Alliance!';    //{7} 
  console.log('After if: ' + phrase); 
} 
 
console.log(movie); //{8} 
console.log(starWarsFan()); //{9} 
console.log(marvelFan()); //{10} 
console.log(movie);       //{11} 
blizzardFan(); //{12} 

Lord of the Rings 
Star Wars 
The Avengers 
The Avengers 
Before if: Warcraft 
Inside if: For the Horde! 
After if: For the Alliance!

ES6 also introduced the keyword const. Its behavior is the same thing as the keyword let; the only difference is that a variable defined as const has a read-only value, meaning a constant value.

For example, consider the following code:

const PI = 3.141593; 
PI = 3.0; //throws error 
console.log(PI); 

When we try to assign a new value to PI or even try to redeclare it as var PI or let PI, the code will throw an error saying that PI is read only.

Template literals are really nice because we can create strings without the need to concatenate the values.

For example, consider the following examples written with ES5:

var book = { 
  name: 'Learning JavaScript DataStructures and Algorithms' 
}; 
console.log('You are reading ' + book.name + '.,\n    and this is a new line\n    and so is this.');

We can improve the syntax of the previous console.log output with the following code:

console.log(`You are reading ${book.name}., 
and this is a new line 
and so is this.`);

Template literals are enclosed by backticks (`). To interpolate a variable value, we will simply set the variable value inside a dollar sign and curly braces (${}), as we did with book.name.

Template literals can also be used for multiline strings. There is no need to use \n anymore. Simply hit Enter on the keyboard to take the string to a new line, as was done with and this is a new line in the previous example.

This functionality will be very useful in our examples to simplify the output!

Arrow functions are a great way of simplifying the syntax of functions in ES6. Consider the following example:

var circleArea = function circleArea(r) { 
  var PI = 3.14; 
  var area = PI * r * r; 
  return area; 
}; 
console.log(circleArea(2)); 

We can simplify the syntax of the preceding code to the following code:

let circleArea = (r) => { //{1} 
  const PI = 3.14; 
  let area = PI * r * r; 
  return area; 
} 
console.log(circleArea(2)); 

The main difference is on line {1} of the example, on which we can omit the keyword function using =>.

If the function has a single statement, we can use a simpler version as well, by omitting the keyword return. Take a look at the following:

let circleArea2 = (r) => 3.14 * r * r; 
console.log(circleArea2(2)); 

With ES6, it is also possible to define default parameter values for functions. The following is an example:

function sum (x = 1, y = 2, z = 3) { 
  return x + y + z 
}; 
console.log(sum(4,2)); //outputs 9 

As we are not passing z as a parameter, it will have value 3 by default. So, 4 + 2 + 3 == 9.

Before ES6, we would have to write the preceding function as the following code:

function sum (x, y, z) { 
  if (x === undefined) 
  x = 1; 
  if (y === undefined) 
  y = 2; 
  if (z === undefined) 
  z = 3; 
  return x + y + z; 
}; 

With ES6, we can save a few lines of code using the default parameter values functionality.

In ES5, we can turn arrays into parameters using the apply() function. ES6 has the spread operator (...) for this purpose. For example, consider the function sum we declared in the previous topic. We can execute the following code to pass the x, y, and z parameters:

var params = [3, 4, 5]; 
console.log(sum(...params)); 

The preceding code is the same as the code written in ES5, as follows:

var params = [3, 4, 5]; 
console.log(sum.apply(undefined, params)); 

The spread operator (...) can also be used as a rest parameter in functions to replace arguments. Consider the following example:

function restParamaterFunction (x, y, ...a) { 
  return (x + y) * a.length; 
} 
console.log(restParamaterFunction(1, 2, "hello", true, 7)); //outputs 9; 

The preceding code is the same as the following:

function restParamaterFunction (x, y) { 
  var a = Array.prototype.slice.call(arguments, 2); 
  return (x + y) * a.length; 
}; 

var [x, y] = ['a', 'b']; 

var x = 'a'; 
var y = 'b'; 

[x, y] = [y, x]; 

var temp = x; 
x = y; 
y = temp; 

var [x, y] = ['a', 'b']; 
var obj = { x, y }; 
console.log(obj); // { x: "a", y: "b" } 

var x = 'a'; 
var y = 'b'; 
var obj2 = { x: x, y: y }; 
console.log(obj2); // { x: "a", y: "b" } 

var hello = { 
  name : 'abcdef', 
  printHello(){ 
  console.log('Hello'); 
  } 
} 
console.log(hello.printHello()); 

var hello = { 
  name: 'abcdef', 
  printHello: function printHello() { 
  console.log('Hello'); 
  } 
}; 

ES6 also introduced a cleaner way of declaring classes. You learned that we can declare a class named Book in the Object oriented programming section this way:

function Book(title, pages, isbn){ //{1} 
  this.title = title; 
  this.pages = pages; 
  this.isbn = isbn; 
} 
Book.prototype.printTitle = function(){ 
  console.log(this.title); 
}; 

With ES6, we can simplify the syntax and use the following code:

class Book { //{2} 
  constructor (title, pages, isbn) { 
  this.title = title; 
  this.pages = pages; 
  this.isbn = isbn; 
  } 
  printIsbn(){ 
    console.log(this.isbn); 
  } 
} 

We can simply use the keyword class and declare a class with a constructor function and other functions as well—for example, the printIsbn function. The code for the class Book declared on line {1} has the same effect and output as the code declared on line {2}:

let book = new Book('title', 'pag',  'isbn'); 
console.log(book.title); //outputs the book title 
book.title = 'new title'; //update the value of the book title 
console.log(book.title); //outputs the book title 

class ITBook extends Book { //{1} 
  constructor (title, pages, isbn, technology) { 
    super(title, pages, isbn); //{2} 
    this.technology = technology; 
  } 
  printTechnology(){ 
    console.log(this.technology); 
  } 
} 
 
let jsBook = new ITBook('Learning JS Algorithms', '200', '1234567890', 'JavaScript'); 
console.log(jsBook.title); 
console.log(jsBook.printTechnology()); 

class Person { 
  constructor (name) { 
    this._name = name; //{1} 
  } 
  get name() { //{2} 
    return this._name; 
  } 
  set name(value) { //{3} 
    this._name = value; 
  } 
} 
 
let lotrChar = new Person('Frodo'); 
console.log(lotrChar.name); //{4} 
lotrChar.name = 'Gandalf';    //{5} 
console.log(lotrChar.name); 
lotrChar._name = 'Sam'; //{6} 
console.log(lotrChar.name); 

Do I need to update my current JavaScript code to ES6 or Es7? Of course not! ES6 and ES7 are subsets of the JavaScript language. Everything that was standardized as ES5 will continue working as is today. However, you can start using ES6 and ES7 to leverage the new syntax and make your code simpler and easier to read.

In the following chapters of this book, we will try to use ES6 and ES7 as much as we can. In case you want to write the example code using ES5, you can always use Babel to transpiler the code of this book into ES5 code.

Now, we have covered all the basic JavaScript concepts that are needed for us to start having some fun with data structures and algorithms!