DEV Community: Peter Mwovi

Introduction to Data Structures and Algorithms With Modern JavaScript.

Peter Mwovi — Mon, 21 Feb 2022 09:33:11 +0000

Data Structures are a specific method of arranging and storing data in computers so that we can execute more efficient operations on the data.

Data structures are used in a wide range of fields, including Computer Science and Software Engineering.
Data can be retrieved and stored in a variety of ways.
Arrays and objects are two common JavaScript data structures that you are already familiar with.

In JavaScript data structures, you'll get to learn how to access and change data using useful JS techniques like splice() and Object.keys().

An algorithm is a set of instructions that describe how to perform something step by step. Breaking down an issue into smaller sections and carefully considering how to solve each portion using code will help you develop an effective algorithm.

Arrays

An array in JavaScript is an ordered list of values. Each value is referred to as an element, and it is identified by an index.

An array in JS has a couple of characteristics,

For starters, an array can include values of many sorts. You can have an array with items of the kinds number, string, and boolean, for example.
Second, an array's size is dynamic and grows on its own. To put it another way, you don't have to declare the array size in advance.

Initializing a JavaScript Array
There are two ways to make an array with JavaScript. The first is to utilize the Array constructor in the following way:

let results = new Array();

The results array is empty, and there are no elements in it. You can establish an array with an initial size if you know how many elements the array will hold, as seen in the following example:

let results = Array(5);

The elements are passed as a comma-separated list to the Array() constructor to create an array and initialize it with certain elements.
For example, the following builds the scores array that has five members (or numbers):

let scores = new Array(20,90,80,74,63);

However, The array literal notation is the preferred method of creating an array. The square brackets [] are used to wrap a comma-separated list of elements in the array literal form.

let arrayName = [element1, element2, element3, ...];

let cars = ['honda', 'toyota', 'volvo'];

The above example creates the cars array that holds string elements:

You use square brackets without specifying any elements to construct an empty array, like in:

let emptyArray = [];

Basic Array operations
1) Removing an element from an array's end
Use the pop method:

let teams = ['chelsea', 'arsenal', 'ManU', Liverpool', 'tottenham'];
const lastElement = teams.pop();
console.log(lastElement); 

**Output**
tottenham

2) Removing an element from the array's beginning
Use the shift() method:

let teams = ['chelsea', 'arsenal', 'ManU', Liverpool', 'tottenham'];
const firstElement = teams.shift();
console.log(firstElement); 

**Output**
chelsea

3) Adding a new element to an array's end
Use the push() method:

let teams = ['chelsea', 'arsenal', 'ManU', Liverpool', tottenham'];
teams.push('Westham');
console.log(teams); 

**Output**
['chelsea', 'arsenal', 'ManU', Liverpool', 'tottenham','Westham']

4) Inserting an element at the start of an array
Use the unshift() method:

let teams = ['arsenal', 'ManU', Liverpool', tottenham'];
teams.unshift('chelsea');
console.log(teams); 

**Output**
['chelsea', 'arsenal', 'ManU', Liverpool', 'tottenham','Westham']

5) Determine whether a value is an array.
Use Array.isArray() method:

console.log(Array.isArray(teams)); // true

6) Locating an element's index in an array.
Use the indexOf() method:

let teams = ['arsenal', 'ManU', Liverpool', tottenham'];
let index = teams.indexOf('Liverpool');

console.log(index); // 2

Queue

A queue is used by Javascript to keep track of the code that needs to be executed. Your printer also uses a queue to keep track of which documents are due to be printed next. To choose which patient should be admitted first, hospitals use a priority queuing system.
To put it another way, there are queues everywhere. The queue is a crucial data structure to understand, from your local cafe to your computer's CPU and server or network.

A queue works with the concept of FIFO(First In First Out).
As a result, it conducts two basic operations: adding elements to the queue's end and removing elements from the queue's front.

Stack

A data structure that holds a list of elements is known as a stack. A stack works on the Last In, First Out (LIFO) principle, which means that the most recently added element is the first to be removed.
Push and pop are the two main operations that occur only at the top of a stack. The push action adds an element to the top of the stack, whereas the pop operation removes one from the top.

A stack can be used in a variety of ways. For instance, the most basic is to reverse a word. You do this by pushing a word into the stack, letter by letter, and then popping the letters out.
The stack's other uses include text editors' "undo" features, syntax parsing, function calls, and expression conversion (infix to post-fix, infix to prefix, post-fix to infix, and prefix to infix).
The push() and pop() functions of the JavaScript Array type allow you to use an array as a stack.

let stack = [];

stack.push(1);
console.log(stack); // [1]

stack.push(2);
console.log(stack); // [1,2]

stack.push(3);
console.log(stack); // [1,2,3]

stack.push(4);
console.log(stack); // [1,2,3,4]

stack.push(5);
console.log(stack); // [1,2,3,4,5]

Linked List

A linked list, like an array, is a linear data structure. Unlike arrays, however, elements are not kept in a specific memory region or index. Rather, each element is its own object with a pointer or link to the next item in the list.

Each element (often referred to as a node) has two components: data and a link to the next node. Any suitable data type can be used.

JavaScript 101: Introduction to Modern JavaScript.

Peter Mwovi — Fri, 11 Feb 2022 14:48:55 +0000

So, you are new to JavaScript? So am I, Or at least I was a few months ago.

Before we really get in depth with the complexities of the language and why it's basically the go to language for beginners, we will first begin with a history lesson and then learn it's basics.

JavaScript, sometimes known as JS, is a programming language that, together with HTML and CSS, is one of the essential technologies of the World Wide Web.

On the client side, over 97 percent of websites employ JavaScript for web page behavior, with third-party libraries frequently incorporated.

Brendan Eich invented JavaScript in 1995. It was created for Netscape 2, and in 1997, it became the ECMA-262 standard. The Mozilla foundation continued to develop JavaScript for the Firefox browser after Netscape turned it over to ECMA. The most recent version of Mozilla was 1.8.5. (Identical to ES5).

JavaScript was presented to the ECMA international standards organization by Netscape and Brendan Eich in 1996, and a technical committee (TC39) was formed to further develop the language.

The first edition of ECMA-262 was published in June 1997.

It's all boring, I know but history is super important.

Continuing on, when the TC39 group met in Oslo in 2008 to discuss ECMAScript 4, they were split into two camps: those who supported ECMAScript 4 and those who opposed it.

The ECMAScript 3.1 Camp:
Microsoft and Yahoo intended to upgrade from ES3 incrementally.
Adobe, Mozilla, Opera, and Google formed the ECMAScript 4 Camp to push for a major ES4 upgrade.

August 13 2008, Brendan Eich wrote an email:

It's no secret that the JavaScript standards body, Ecma's Technical Committee 39, has been split for over a year, with some members favoring ES4, a major fourth edition to ECMA-262, and others advocating ES3.1 based on the existing ECMA-262 Edition 3 (ES3) specification. Now, I'm happy to report, the split is over
.

The solution was to work together:

ECMAScript 4 was renamed to ES5.
ES5 should be an incremental upgrade of ECMAScript 3.
Features of ECMAScript 4 should be picked up in later versions.
TC39 should develop a new major release, bigger in scope than ES5.

The code name for the upcoming new release (ES6) was "Harmony" (because to the division it caused?).

The ES5 project was a big success.
It was first published in 2009, and by July 2013, all major browsers (including Internet Explorer) were completely compliant.

ES6 was also a huge success. It was released in 2015, and all major browsers were fully compliant by March 2017:

The latest ES Version is the ES 12 which was released in June 2021.

Enough with the history lesson now let's see the syntax.

console.log()
To log or print messages to the console, use the console.log() method.
It can also print objects and other information.

console.log("Hello World");
//Prints Hello World

Declaring Variables
Any of these three keywords, along with a variable name, can be used to declare a variable in JavaScript:

In JavaScript versions prior to ES6, the var is used.
When a variable can be transferred, let is the preferable method of declaring it.
When declaring a variable with a constant value, const is the preferred method.

var age;
let height;
const price = 300;

Undefined
undefined is a JavaScript value that denotes the absence of a defined value. The value of variables that are declared but not initialized will be undefined.

var age;
 console.log(age); 
// Prints: undefined

let Keyword
In JavaScript, let creates a local variable that can be renamed. Initialization of a let variable during its declaration is optional. If no value is assigned to a let variable, it will be undefined.

let age; 
console.log(age); // Prints: undefined
count = 21;
console.log(age); // Prints: 21

const Keyword
The term const can be used to declare a constant variable. It must be given a task. Any attempt to re-assign a const variable will result in a runtime error in JavaScript.

const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.

Methods
Methods return information about an object and are called by putting an instance, a period, the method name, and parentheses to the end of the method name.

`Math.random();
// Returns a number between 0 and 1`

String .length
A string's .length property returns the total number of characters in the string.

let message = 'Hello lux academy';
console.log(message.length);
// Prints: 17

Numbers
Numbers are the most basic data type.
They encompass all integers as well as floating point numbers.

let number = 2000; 
 let cash = 500;

Libraries
Methods can be accessed by inserting the library name, a period, the method name, and a set of parentheses to the library name.

Math.random();
// Math is the library

Boolean
A primitive data type is a boolean.
It is possible for them to be true or false.

let football = true;

Single Line Comments
Single-line comments are formed in JavaScript by using two consecutive forward slashes //.

//This is a comment

Multi-line Comments
Multi-line comments are formed in JavaScript by encircling the lines with /* at the start and */ at the conclusion. Comments are useful for a variety of purposes, such as explaining a code block or offering hints.

/*  
This is a really long comment
which is referred to as a multi-line
comment. 
*/

Strings
Strings are the most basic data type.
They're any collection of characters (letters, spaces, numbers, or symbols) encircled by single or double quotations.


`let string = "This article is really good.";
 let string = "JavaScript is the best.";`

Arithmetic Operators
JavaScript supports arithmetic operators for:

+ addition
- subtraction
* multiplication
/ division
% modulo

// Addition
2 + 1
// Subtraction
19 - 2
// Multiplication
2 * 25
// Division
49 / 7
// Modulo
100 % 20

Assignment Operators
Based on the value of its right operand, an assignment operator assigns a value to its left operand.
Here are a few examples:

*= multiplication assignment
/= division assignment
+= addition assignment
-= subtraction assignment

`let number = 100;
// Both statements will add 10
number = number + 10;
number += 10;
console.log(number); 
// Prints: 120`

String Concatenation
The + operator in JavaScript can be used to concatenate multiple strings. Multiple strings and variables containing string values have been concatenated in this example. The concatenated string will be stored in the displayText variable when the code block has been executed.

let team = 'chelsea';
let opponent = 'arsenal'; 
let displayText = 'Yesterday ' + opponent  + ' was beaten by ' +  team + '.';
console.log(displayText);
// Prints: Yesterday arsenal was beaten by chelsea.

String Interpolation
The technique of evaluating string literals containing one or more placeholders is known as string interpolation (expressions, variables, etc).
It's possible to do it with template literals: text $expression text.

let price = 700;
// String concatenation
'The car cost ' + price + ' dollars.';
// String interpolation
`The car cost ${price} dollars.`;

Variables
Variables are utilized whenever a piece of data needs to be stored. A variable is a collection of data that can be used elsewhere in the program. Because variables can be used to replace the same value in several locations, they ensure code re-usability.

const name = 'Mwovi';
let age = 21; 
console.log(name + ' is ' + age + ' years old.');
// Prints: Mwovi is 21 years old.

These basic JavaScript syntax are enough to get you started on the most popular language on the internet.

Side-Note
It is common for people, especially beginners to confuse between java and JavaScript. However as Professor Snape would say,

This would be akin to confusing car and carpet.
Key differences in the two are, Java is an object-oriented programming language, whereas JavaScript is an object-oriented scripting language. Java builds apps that operate in a virtual machine or in a browser, whereas JavaScript is exclusively used in a browser. While Java code must be compiled, JavaScript code is pure text.

In JavaScript circles such a mistake would cost you your life as you know it.