DEV Community: Joseph Kilatya

Introduction to Data Structures and Algorithms with Modern Javascript.

Joseph Kilatya — Mon, 21 Feb 2022 17:38:43 +0000

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.
There is huge concept behind data structures and algorithms. Therefore we are going to check few but key concepts in this sector.

Arrays
In JavaScript, array is a single variable that is used to store different elements. It is often used when we want to store list of elements and access them by a single variable. In JavaScript therefore array is a single variable that stores multiple elements.
Array syntax

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

Sample code

//method 1
// array with string elements
var myArray = ['cat','dog','goat','cow']; 

// array with integer elememts
var myArray = [1,2,3,4,5,6]; 


//method 2
 // array with string elements
var myArray = new Array('cat','dog','goat','cow');

//array with integer elements
var myArray2 = new Array(1,2,3,4,5,6);

The first element in an array has index 0 while the last element has index n-1
You can also check different array methods in javascript here

Stack

A stack is a data structure that holds a list of elements. A stack works based on the LIFO principle i.e., Last In, First out, meaning that the most recently added element is the first one to remove.
A good analogy to explain this is using books placed on top of each other. The last book to be added on top is the first one you can access. The first book(bottom book) will be accessed last.
Stack methods in Javascript;

The push() method : allows you to add one or more elements to the end of the array.
The pop() method : removes the element at the end of the array and returns the element to the caller.

Sample code

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]

Linked lists
A linked list is a linear data structure that represents a collection of elements, where each element points to the next one. The first element in the linked list is the head and the last element is the tail.

Each element of a linked list data structure must have the following properties:

value:The value of the element.
next: A pointer to the next element in the linked list.

The main properties of a linked list data structure are:

size: The number of elements in the linked list.
head: The first element in the linked list.
tail: The last element in the linked list.

The main operations of a linked list data structure are:

insertAt: Inserts an element at the specific index.
removeAt: Removes the element at the specific index.
getAt: Retrieves the element at the specific index
clear: Empties the linked list.
reverse: Reverses the order of elements in the linked list.

Example of a linked list code

const list = {
    head: {
        value: 6
        next: {
            value: 10                                             
            next: {
                value: 12
                next: {
                    value: 3
                    next: null  
                    }
                }
            }
        }
    }
};

Queue
A queue is a data structure that follows First In First Out (FIFO) principle. The element that is added first is accessed at first. The last element to be added is therefore accessed at last.

Example code of queue in Javascript

class Queue {
    constructor() {
        this.items = [];
    }

    // add element to the queue
    enqueue(element) {
        return this.items.push(element);
    }
    // view the last element
    peek() {
        return this.items[this.items.length - 1];
    }
}
let queue = new Queue();

queue.enqueue(1);

queue.enqueue(2);

queue.enqueue(4);

queue.enqueue(8);

console.log(queue.items);

console.log(queue.peek());

Conclusion
So where can we how can we apply data structures in our programming journey.

Search − Algorithm to search an item in a data structure.
Sort − Algorithm to sort items in a certain order.
Insert − Algorithm to insert item in a data structure.
Update − Algorithm to update an existing item in a data structure.

The topic on Javascript data structures and algorithms is very broad and wide. You can check on other resources out there to learn more.

Happy Coding.

Javascript 101: Introduction To Modern Javacript

Joseph Kilatya — Mon, 14 Feb 2022 20:43:55 +0000

Javascript is client side scripting language in web development to make websites more interactive to their users. It is an interpreted language unlike other progamming languages.

A Brief Javascript History

JavaScript was created at Netscape Communications by Brendan Eich in 1995.Initially known as LiveScript, Netscape changed the name to JavaScript so they could position it as a companion for the Java language.
JavaScript is in no way related to the Java programming language. .

Requirements to get you started

A computer
A web browser
A text editor of your choice(I prefer using VSCode).
Good internet.
Motive.

Javascript syntax

The syntax of JavaScript is the set of rules that define a correctly structured JavaScript program.

<script ...>
   JavaScript code
</script>

The script tag takes two important attributes:

language - specifies what scripting language you are using.
type - indicate the scripting language in use and its value should be set to "text/javascript".

<script language = "javascript" type = "text/javascript">
   JavaScript code
</script>

** Your first javascript code**

<html>
   <body>   
      <script language = "javascript" type = "text/javascript">
         <!--
            document.write("Hello World!")
         //-->
      </script>      
   </body>
</html>

Javascript is a free format language , that is , it ignores space, tabs and line breaks.

semicolons in Javascript are optional. It is though a good practice to use them in your code.

<script language = "javascript" type = "text/javascript">
   <!--
//codes lines without semicolons
      var1 = 10
      var2 = 20
// codes lines with semicolons
      var3 = 15; var4 = 25;
   //-->
</script>

Comments in JS
Comments are crucial in any programming language.They make code more readable and leave remarks in our code.

Single line Comments

// This is the first comment
// This is the second comment
// I am a single line comment

Multiline comments

/* This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/

Javascript Placement

There is a flexibility given to include JavaScript code anywhere in an HTML
document. However the most preferred ways to include JavaScript in an HTML
file are as follows:

Script in ... section.
Script in ... section.
Script in ... and ... sections.
Script in an external file and then include in ... section. The first three are written between the script tags.

<script language = "javascript" type = "text/javascript">
   JavaScript code
</script>

Script in an external file and then include in

... section.

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

Variables in Js

Variable declaration
We can declare variables using three methods.

var age = 20;
    // var values can change

let name = 'Joshua';
    // same as var
const gravity = 10;
   //used to declare constant values e.g gravity as in above

NB It is a good practice to use let rather than var in variable declarations as it is more secure method.
Variables are containers of data..
In JS variable there are diffrent kinds of data types:

Numbers
integers(whole numbers)
Var num1 = 10;

float-point number(numbers with fractions)
var num2 = 15.69;
Strings
A collections of more than one characters between two single quotes, double quotes, or backticks.
var sayHi = "Hello, World";
Booleans
A boolean value is either True or False while boolean data types are either true or false. They return a true or false value.
true // if the light is on, the value is true false // if the light is off, the value is false
Undefined
In JavaScript, if we don't assign a value to a variable, the value is undefined. In addition to that, if a function is not returning anything, it returns undefined.

<html>
<head>
<script>
var firstName;
document.write(firstName) // undefined, because it is not assigned to a value yet
</script>
</head>
<body>
.......
</body>
</html>

Null Null in JavaScript means an empty value. var emptyValue = null;

Variable naming rules
In Javascript we have rules that are used when naming variables. Most of the rules apply in other programming languages.
A valid JavaScript variable name must follow the following rules:

A JavaScript variable name should not begin with a number.
A JavaScript variable name does not allow special characters except dollar sign and underscore.
A JavaScript variable name follows a camelCase convention.
A JavaScript variable name should not have space between words.

The following are examples of valid JavaScript variables.

firstName
lastName
country
city
capitalCity
age
isMarried

first_name
last_name
is_married
capital_city

num1
num_1
_num_1
$num1
year2020
year_2020

Example of invalid Variable names

  first-name
  1_num
  num_#_1

Conclusion
Javascript is an awesome scripting language that can be used in almost all fields in technology especially in web development.It is easy to learn and user-friendly. Happy coding!
Please drop a comment if you liked this blog or if there is anything you need clarification about. Thank you.