DEV Community: Juan Restrepo

How to create a Queue using javascript

Juan Restrepo — Sat, 28 Nov 2020 13:27:57 +0000

JavaScript comes with some out of the box data structures. This includes Arrays and objects. Linked List, graphs, trees, queues, and stacks are not included with JavaScript. These data structures need to be constructed using a class. The data structures mention are important to know since different data structures excel at storing and retrieving data more efficiently than others depending on the scenario. Today we will be covering how to make a Queue.

What is a Queue?

A queue is a data structure that follows a simple rule. first-in, first-out, or FIFO. You can think of the queue as a line to the movies. The first person in line will buy the tickets first and get out of the line.

A common use for this data structure is breadth first search. Breadth first search allows us to traverse a tree data structure by finding the shortest path.

What does a Stack Contain and how to build it?

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

To get started building a queue we need to create a queue class and inside the constructor, the object will be initialized with an empty array( this.data );

Enqueue

    enqueue(value){
        this.data.push(value)
        return this; 
    }

The first instance method that will be covered is enqueue. Enqueue takes in a value as a parameter. Enqueue add items to the end of the array using push. Finally, return the instance of the class.

Dequeue

    dequeue(){
        // Linked list would be more ideal here since shift in an array is an O(N) time complexity 
        const removedValue = this.data.shift();
        return removedValue; 
    }

The instance method dequeue removes values from the beginning of the array. We will be using array building methods to remove a value from the end of the array. The shift() method will be used. Finally, the removed value is returned

Peek

    peek(){
        return this.data[0];
    }

The instance method peeks () returns the first value of an array

Empty

    empty(){
        return this.data.length === 0;
    }

Finally, the empty() instance method just returns true if there are any values in the stack or false if the stack is empty.

Queues are very simple to build using array methods and are used for traversing trees and graphs. I hope this gave you a bit of insight into what queues are and what they are used for.

How to create a Stack using JavaScript

Juan Restrepo — Sat, 21 Nov 2020 16:54:08 +0000

JavaScript comes with some out of the box data structures. This includes Arrays and objects. Linked List, graphs, trees, queues, and stacks are not included with JavaScript. these data structures need to be constructed using a class. The data structures mention are important to know since different data structures excel at storing and retrieving data more efficiently than others depending on the scenario. Today we will be covering how to make a Stack.

What is a Stack?

A stack is a data structure that follows a simple rule. Last-in, first-out, or LIFO. You can think of the stack as a pile of dishes. If you add a dish you must put it on top of the pile and if you want to remove the dish you need to remove it from the top of the pile.

A common use for this data structure is the call stack. Functions are stack on top of each other until the function returns and functions will start popping off the stack.

What does a Stack Contain and how to build it?

class Stack{
    constructor(){
        this.data = [];
    }
}

To get started building a stack we need to create a stack class and inside the constructor, the object will be initialized with an empty array( this.data );

push()

    push(value){
        this.data.push(value);
        return this;
    }

The first instance method that will be covered push. push takes in a value as a parameter. Push adds nodes to the end of the array. Finally, return the instance of the class.

pop()

    pop(){
        return this.data.pop();
    }

The instance method pop() removes values from the end of the array. We will be using array building methods to remove a value from the end of the array. The pop() method will be used. Calling pop on the array will return the

peek()

    peek(){
        return this.data[this.data.length - 1]
    }

The instance method peeks () returns the last value of an array.

empty()


    empty(){
        if(this.data.length === 0){
            return true;
        } else {
            return false; 
        }
    }

Finally, the empty() instance method just returns true if there are any values in the stack or false if the stack is empty.

function sumArray(arr, sum = 0){
    if(arr.length === 0) return sum;
    sum = arr.pop() + sum;
    return sumArray(arr, sum)
}

sumArray([1,2,3,4])

Stacks are very simple to build using array methods and are frequently used in recursion. Recursion is when a function calls itself. You will have to get familiar with the call stack and recursion to be able to traverse trees and graph data structures. I hope this gave you a bit of insight into what stacks are and what they are used for.

How to create a singly linked list in JavaScript

Juan Restrepo — Sat, 14 Nov 2020 21:07:39 +0000

What is a singly linked list?

A singly linked list is a data structure that consists of a head, tail, and length property. The head and tail are assigned a node object. The singly-linked list can only be traverse in one direction. Starting at the head and ending at the tail.

What does a singly linked list contain and how to build it?

class Node{
    constructor(value){
        this.value = value; 
        this.next = null; 
    }
}

class SinglyLinkedList{
    constructor(value){
        this.head = new Node(value);
        this.tail = this.head; 
        this.length = 1; 
    }
}

const newSinlglyLinkedList = new SinglyLinkedList(1);

To get started building a singly linked list we first need to create 2 classes. The first class will create node objects which contain a value and a next property. The second class is the Singly linked list which contains a head, tail, and length. When we first instantiate a singly linked list a new node is created and is set to the head and tail properties of the linked list.

Append

    //adds to the end of the linked list
    append(value){
        const newNode = new Node(value); 
        // set the next property of the tail to the new created node
        this.tail.next = newNode; 
        // set the tail equals to the new node
        this.tail = newNode;
        this.length++; 
        return this; 
    }

The first instance method that will be covered is append. Append takes in a value as a parameter. Append adds nodes to the end of the linked list. First, we need to create a new node, attach the new node to the linked list by setting the next property on the tail to the new node, set the new node as the tail, and finally increase the length.

Prepend

    prepend(value){
        const newNode = new Node(value);
        newNode.next = this.head;
        this.head = newNode;
        this.length++
        return this; 
    }

The instance method prepend works similarly as append. Prepend takes in a value as a parameter. The new node will be added at the beginning of the linked list. The new node is created the next property on the new node is set to the head, the head is set to the new node, and the length is increased.

Traverse

    traverse(index){
        if(index > this.length - 1){
            index = this.length -1;
        }
        if(index < 0){
            index = 0
        }
        let currentNode = this.head; 
        let i = 0;
        while(i < this.length){
            if(i === index) return currentNode; 
            currentNode = currentNode.next; 
            i++
        }
    }

A helper function is needed to write the rest of the missing methods for the linked list. We will call this function transverse. This function takes in an index and returns the current node at that index. First, a couple of checks to see if the index pass is within range. Second, we use a while loop to transverse each node using their next property and checking to see if the variable i and index are equal. If there is a match return the currentNode.

Insertion

    insert(index, value){
        // need to check if the node we are inserting is at the begining.
        if(index < 0 ){
            index = 0;
        }
        if(index === 0){
            return this.prepend(value);
        }
        // need to check if node we are inserting is at the end
        if(index > this.length - 1){
            return this.append(value);
        }
        // else is not at the end or beggining
        // create a previousNode, newNode, currentNode
        const previousNode = this.transverse(index - 1)
        const newNode = new Node(value);
        const currentNode = this.transverse(index)
        // assing newNode  pointer to the currentNode; 
        newNode.next = currentNode; 
        // assing previousNode pointer to the newNode; 
        previousNode.next = newNode;
        this.length++
        return this;  

    }

Insertion is a bit trickier than the two other instance methods. Insert takes in two parameters a value and an index where the insert will take place. First, a check to make sure the index pass is not lesser than zero. If the index is equal to zero we want to use our prepend method to add to the beginning and if the index is greater than the length minus one than we want to append. That covers those scenarios. Now to take care of inserts in the middle on the linked list. we require a new node, a current node, and a previous node. We will use the transverse method to add collect the nodes. The next property of the newNode is set to currentNode and the previousNode next property is set to the new node. The length is increased and that concludes the insert method.

Delete

    delete(index){
        //check if index is out of bounds
        if(index > this.length - 1){
            index = this.length - 1; 
        }
        if(index < 0){
            index = 0; 
        }
        // create all the nodes you will need 
        const prevNode = this.transverse(index - 1);
        const currentNode = this.transverse(index);
        const nextNode = this.transverse(index + 1);
        if(index === 0){
            currentNode.next = null; 
            this.head = nextNode;
        } else if(index === this.length -1){
            prevNode.next = null; 
            this.tail = prevNode;
        } else {
            currentNode.next = null; 
            prevNode.next = nextNode; 
        }
        this.length--
        return this;
    }

The delete method will only take in the index of the node that will be deleted. The index value is checked to see if it is within range. Next, we will collect all the nodes require for the reverse method to work. If the index is equal to zero, the currentNode next property is set to null. This cuts the node off the linked List. The nextNode is set to the head. If the index points to the tail in the linked list, the prevNode next value is set to null and the tail is set to the prevNode. If the index is not pointing to the first or last node then the currentNode next property is set to null and prevNode.next is set to the nextNode. Finally, the length is decreased.

Why use a singly linked list?

You might be wondering what is the point of using a singly linked list. The singly-linked list has an order and has really fast prepend, append, and deletes (index of zero) instance methods. The Time complexity of the append, prepend, and deletions at the index of zero are constant time. This data structure works great if you are trying to build a queue (First In First Out). A queue can be implemented with an array but, it can be very inefficient. Following the FIFO rule we can use an arr.push() method to insert values into an empty array and arr.shift() to remove them. arr.shif() is very inefficient. (linear time) this is because removing a value from the beginning of the array will require shifting of all the index in the array. A better way to create a queue is by using a singly linked list. We can use append to add values to the end and use delete with an index of zero to remove the first value in the queue. Using both of these methods we can make a queue that has a time complexity of constant time.

I hope this helps you understand how to create your own linked list and their purpose. Visualizing algorithms and data structures can give you an idea of how to build them. Here is a great resource for that https://visualgo.net/en.

Difference Between var, let, and const

Juan Restrepo — Sat, 07 Nov 2020 13:10:26 +0000

With the introduction of ES6 we were given the ability to declare variables in a couple of different ways. Vanilla JavaScript uses var for all its declarations, but now we also have let and const. Do you know what the difference between them and how they are scoped?

Scope
Before digging deeper into the different types of declaring variables let’s take a quick look at the meaning of scope. Scope just means the location where variables are available.

var global = "I am in the global scope";

A variable not inside a function is said to be of global scope.

function funkyFunction(){
    var local = "I am in a local scope"
}

A variable inside a function has a local scope.

if(true){
    let block ="I am in a block scope"
}

There is also a block scope and this is only for variables declare with const and let. These variables need to be in curly braces.

Now That we know which scope we are in what does this mean?

var global = "I can be accessed anywhere";

Variables in the global scope can be accessed by any function. Meaning if it is in the global scope everyone has access to the variable.

var global = "I can be accessed anywhere";


function funkyFunction(){
    var local = "I can only be access within this function"
    console.log(global) // I can be access anywhere
}

funkyFunction();


console.log(local) // ReferenceError: local is not defined

The global scope does not have access to variables inside local scopes like functions.

function outter(){
    var outterVar = "I can be access by the Inner Function"
    console.log(innerVar); // ReferenceError: innerVar is not defined

    function Inner(){
        var innerVar = "I can NOT be access by the outter Function"
        console.log(outterVar); //I can be access by the Inner Function 

    }

    Inner(); 
}

outter();

The inner function does have access to its outer function local scope but the outer function does not have access to the variables inside the inner function. This is referred to as a lexical scope.

 if(true){
    let block = "I can only be access within the curly brackets"
    const block2 = "I am also stuck inside the curly brackets"
    var noBlockScope = " I can be access out outside of the curly brackets"
}

console.log(block); // ReferenceError: block is not defined
console.log(block2); // ReferenceError: block2 is not defined
console.log(noBlockScope) //" I can be access outside of the curly brackets"

Variables declared within a block ({}) are only available within the block. This only applies to let and const. Var does not have block scope and can be accessed.

Now that scoping has been discussed let’s see what other differences let, var, and const have

var myName = "Juan Restrepo"

var willChangeName = true; 

if(willChangeName === true){
   var myName = "Paco"
}

console.log(myName) // Paco

The main issue with var is that it can be redeclared and its value changes. This might not be an issue if you are aware of it but it can become a problem if you do not realize the myName variable has already been defined. If you have myName in other parts of your code you might get the incorrect output. This is the main reason let and const were introduce.

let myName = "Juan Restrepo";
let myName = "Paco" // error: Identifier 'myName' has already been declared

A let variable can not be re-declared.

let myName = "Juan Restrepo";
myName = 10
myName = { myRealName: "Juan Martin Restrepo"}
myName = [ "Juan Restrepo"]
console.log(myName) //["Juan Restrepo"]

let allow us to change the value contained in the variable. This is a different story with const.

const myName = "Juan Restrepo";
myName = "Paco"//Uncaught TypeError: Assignment to constant variable.
myName = 10; //Uncaught TypeError: Assignment to constant variable.

const follows the same idea as lets. It can not be re-declared and variable value can not be changed. If we change the value hold by the myName we will get an error. Variables declared with const that are objects ( array are also included) can be modified.

const listOfNames = ["juan", "paco"]
listOfNames.push("pepe")
console.log(listOfNames) //["juan", "paco", "pepe"]
listOfNames = [];  // Uncaught TypeError: Assignment to constant variable.

If we look at arrays we can push Pepe into an existing array declare with a const but we can not assign anything new to it (not even an array).

const juan = {
    name: "Juan Martin Restrepo", 
    age: 'old enought'
}

juan.age = 30; // updates the object without any errors

juan = {} // Uncaught TypeError: Assignment to constant variable.

The same idea can be used on objects. I can change and even add properties, methods to an existing object declared with const. I can not assign a new value ( in this case a new object).

Hope that helps understand the difference between const, let, and var. I will leave a small challenge for anyone who wants to attempt it. It should help you solidify what you read.

var global = " I am a global variable "; 


function outter(){

    var outterVar = " I live in the local scope of outter function "

    function inner(){

        var innerVar = " I live in the local scope of inner function "

        //console.log(outterVar, innerVar, innerInnerVar); // 1:  will this cause an error 

        innerInner();

        function innerInner(){

            var innerInnerVar  = " I live in the local scope of innerInner function "

            //console.log(outterVar, innerVar, innerInnerVar); // 2:  will this cause an error

                // 3. will the global variable be avaliable here?
                if(global === " I am a global variable "){ 

                    let block1 = " Hi, I am block Scope "
                    const  block2 = " Hi, Im also block Scope "
                    var freedom = " I am not block scope "
                }

                //console.log(block1, block2) //4.  will this error out ?
                // console.log(freedom)//5.  will this error out?  



        }
    }

    inner(); 


}

outter();

The challenge has 5 questions. Try to answer them without running the code. Once you are sure or if you can figure it out just run the code. You will either get an error in the console or get a string. I can explain the answers if someone needs additional help. Just leave a comment with the questions and I will reply back.

The "this" keyword in JavaScript

Juan Restrepo — Sat, 31 Oct 2020 13:40:59 +0000

The this keyword in JavaScript causes confusion amount beginner and experienced developers. I will try my best to shed light on the subject since the this keyword is used quite often.

What is the this keyword?
In simple terms, the this keyword points to the object we are currently in.

If we console.log(this) inside the console you will notice the this keyword returns the window object.

console.log(this) // window object

Now let us see what happens if we stick the this key work inside of a function. It still points to the window object. This should make sense since we are still inside the window object.

function a(){
  console.log(this);
}

a();

Another way of trying to figure out what this is referring to is the object you are calling a function on. If we call the a function again but now we write it using the window object you will see that the this keyword still points to the window.

function a(){
  console.log(this);
}

window.a();

Identifying what object the this keyword is pointing to
Regular functions as mention above the this keyword will point to the window object.

The this keyword inside a method will point to the object that holds that method.

let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const currentYear = new Date().getFullYear();
        console.log(this) //REFERING TO THE THIS IN HERE
        return currentYear - this.yearBorn;
    }
}

martin.age(); // {fullname: "Juan Martin Restrepo", yearBorn: 1990, age: ƒ} which is the martin object;

The this keyword in classes will point to instances of the class(objects) when inside instance methods. When the method juan.yearborn() is called the this keyword points to the juan object. If the this key work is inside a class method(the method starts with static keyword) it will point to the class. When the method Person.increasePersonCounter() is called the this keyword points to the class.

class Person{
    constructor(name, age){
        this.name = name; 
        this.age = age; 
    }

    static numberOfPersonMade = 0; 

    yearBorn(){
        const currentYear =  new Date().getFullYear();
        console.log(this); //REFERING TO THE THIS IN HERE
        return currentYear - this.age; 
    }

    static increasePersonCounter(){
        console.log(this); //REFERING TO THE THIS IN HERE
        this.numberOfPersonMade++; 
        return this.numberOfPersonMade;
    }
}

let juan = new Person("Juan Martin Restrepo", 30); 

juan.yearBorn(); 

Person.increasePersonCounter();

Now let’s see what will happen if we have a method that contains a function. What do you think the this keyword will be pointing to? A good assumption is since we are inside of a method the this keyword will be pointing to the object that contains the method. The this keyword actually points to the window object.

Developers in the JavaScript community will have different opinions regarding if this is correct or not. The rule is if the this keyword is inside of a function it will always point to the window object. The console.log() inside of the introduce function will return My name is undefined and I am undefined years old!. The reason why this.fullname inside the template literal is returning undefined is that is calling window.fullname. That property does not exist in the window object.

let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const currentYear = new Date().getFullYear();
        function introduce(){
            //REFERING TO THE THIS IN HERE
            console.log(`My name is ${this.fullname}`)
        }

        introduce(); 

        return currentYear - this.yearBorn;
    }
}

martin.age(); //My name is undefined

We could also solve this issue by creating a self variable that holds the value of this while we are still inside the method and not inside the function.

let martin = {
    fullname: "Juan Martin Restrepo",
    yearBorn: 1990, 
    age: function(){
        const self = this // this is pointing to the martin object. 
        const currentYear = new Date().getFullYear();
        function introduce(){
            console.log(`My name is ${self.fullname}`)
        }

        introduce(); 

        return currentYear - self.yearBorn;
    }
}
martin.age();

The self variable is pointing to the martin object so we can now call self.fullname and get the property from the martin object.

I hope that this is clearer in your mind after reading this blog. There are also methods that can be used to manually assign the this keyword. This will be cover in the next blog.

Reference vs. Primitive Values

Juan Restrepo — Sat, 24 Oct 2020 15:48:22 +0000

Primitive Types

A primitive data type is defined by the programming language. Primitive data types consist of numbers, strings, boolean, null, and undefined.

let a = 1; 
let b = 1; 

a === b; // true

let string1 = 'hi';
let string2 = 'hi';

string1 === string2; // true

Variables holding the same value and same data type will always return true in a condition as long a strict operator is used (===). This is not the same for reference types.

Reference Types

Reference types are nonprimitive types and are not defined by the user. Objects are considered a reference type; furthermore, arrays are also objects. Objects are created by the programmer.

let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object1 === object2; // false

When we assign a key-value pair to object1 and assign the same key-value pair to object2 and check to see if they are equal we get false. This is a bit confusing since this works for primitive types. Every time we create an object we are creating a space in memory to hold the information and a reference to that object in memory. Creating 2 objects creates 2 different references and 2 different addresses where the objects will be saved. Even though the objects contain identical key-value pairs this is the reason they are considered different.

let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object3 === object1; // true;

Now if we take a look at object3 variable the value assigned to it is object1. A new object is not being created this time. Only a reference to object1 is in the value of object3. Object1 and object3 point to the same address; therefore, the same object. Now doing a conditional statement will return true.

let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object1.value = 2; 

console.log(object3.value)// 2;

Changing the properties of object1 will also change the properties of object3 since they are the same object.

Reference types can be a bit difficult to understand, but I hope after reading this blog, it will be clearer in your mind.