Learning JavaScript Data Structures and Algorithms

The simplest environment that you can use is a browser.

You can use Firefox + 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 on 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 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 where 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 that, open the terminal application (if you are using Windows, open the command prompt with Node.js that 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:

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

On line {1}, we have an example of how to declare a variable in JavaScript (we are declaring a number). Although it is not necessary to use the var keyword declaration, it is a good practice to always specify when we are declaring a new variable.

On line {2}, we are updating an existing variable. JavaScript is not a strongly-typed language. This means you can declare a variable and initialize it with a number, and then update it with a string or any other data type. Assigning a value to a variable that is different from its original type is also not a good practice.

On line {3}, we are also declaring a number, but this time it is a decimal floating point. On line {4}, we are declaring a string; on line {5}, we are declaring a Boolean. On line {6}, we are declaring a null value, and on line {7}, we are declaring an undefined variable. A null value means no value and undefined means a variable that has been declared but not yet assigned a value:

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 have 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 them:

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:

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

JavaScript also supports bitwise operators, 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 more detailed descriptions 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:

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

In this book's algorithms, we will be using 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 suchas "Packt" has the value true, for example.

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

Let's see 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 equals 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 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:

And 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 see:

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

The output is false! Let's understand why:

And what about the following code? Let's see:

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

The output is also false! The following are the steps:

And 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 see 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:

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 if the condition is true or another script just in case the condition is false (else):

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++;

And if we have several scripts, we can use if…else several times to execute different scripts based on different conditions:

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 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). And 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 is the subject of the next chapter). Specifically, we will be using 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 then the numeric value is increased or decreased.

In the following example, we have a for loop. It outputs the value of i on the console while i is less than 10; i is initiated with 0, so the following code will output the values 0 to 9:

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

The next loop construct we will look at is the while loop. The script inside the while loop is executed while the condition is true. In the following code, we have a variable, i, initiated with the value 0, and we want the value of i to be outputted while i is less than 10 (or less than or equal to 9). The output will be the values from 0 to 9:

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

The do…while loop is very similar to the while loop. The only difference is that in the while loop, the condition is evaluated before executing the script, and in the do…while loop, the condition is evaluated after the script is executed. The do…while loop ensures that the script is executed at least once. The following code also outputs the values 0 to 9:

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