DEV Community: John Katua

Modern Javascript for everyone: Mastering modern Javascript the right way.

John Katua — Fri, 04 Mar 2022 20:49:40 +0000

Javascript is one of the popular programming languages in the world. It is used develop web apps, mobile apps, and server side programming. If you are aspiring to become a web developer you should probably take time and understand all the key concept of the modern Javascript. This will make you are better programmer and be able to develop complex project which will land you a better job and also develop project which will have a great and positive impact to the community.

As a Javascript developer you can choose a path which you want to focus on. There a 3 paths which include Frontend development, Backend Development and Fullstack Development.

Frontend Development.

In this field you will majorly focus on the user interface. The technologies required in this path include HTML, CSS and of cause Javascript. Some of the popular frontend frameworks include React, Angular and Vue but you do not need to learn all of them so as to be regarded as a Frontend Developer. Some CSS frameworks which you may find useful include Bootstrap, Material UI,
Tailwind CSS and Bulma.
One of the best site you can learn more about Frontend Development is Frontend Masters(https://frontendmasters.com/) and if you are a student you can access courses for free for 6 months on Frontend Masters.
You can use this link to register
(https://frontendmasters.com/welcome/github-student-developers/).

Backend Development.

Here you will spend most for you time building Application Programming Interface(APIs). You are required to be familiar with NodeJS in order to be successful in this area. Some of the common frameworks used along with NodeJS include, ExpressJS, KoaJS, SocketIO and NestJS. You should be familiar with at least one those frameworks since it will simplify you work while creating APIs. If you want to be well versed with NodeJS you can go through its documentation (https://nodejs.org/en/).

Fullstack Development.

This combines both Frontend and Backend Development but you also need to have some knowledge about databases and some cloud computing. This is for the experienced developers who have been in the industry. Some of the stacks you need to be familiar include MERN stack (MongoDB, ExpressJS, ReactJS and NodeJS), PERN stack (Postgres, Express, ReactJS, and NodeJS).

Why you should learn Javascript.

Javascript is easier to learn as compared to other languages, by learning Javascript you will have a better understanding of core programming principles and practices that can be easily transferred to other programming languages.
Javascript developers are in high demand since most organizations require to have their own websites and this opens more job opportunities for web developers.
Huge online support is a great advantage for Javascript developers. You can always visit stack overflow in case you get stuck and you are rest assured someone solved the problem for you.

Usage of Javascript.

Adding functionality and increasing user interaction to web pages.
Developing web and mobile apps with the help of various Javascript framework e.g React for web developers and React Native for mobile developers.'
Building web servers and server-side applications using NodeJS.
Used as a query builder with the help of different libraries e.g KnexJS.

Some of the core concept you need to understand as a Javascript Developer.

Block binding.
Strings and Regular Expressions.
Functions.
Objects and its functionality.
Destructuring.
Symbols and its properties.
Sets and maps.
Iterators and generators.
Javascript classes.
Arrays.
Promises and Async await.
Proxies and the Reflection API.
Encapsulating code with modules.

Introduction to Data Structures and Algorithms with Modern Javascript.

John Katua — Mon, 21 Feb 2022 19:59:31 +0000

Objectives

Take an in depth look at Javascript arrays.
Go through stack _and _queues in Javascript.
Finally get a better understanding on how to work with Linked List data structure in Javascript.

Introduction.

In computer science, an array is a data structure consisting of a collection of elements, each identified by one array index or key.
Array play two roles in Javascript:-

Tuples: Arrays-as-tuples have a fixed number of elements and those elements can be of different types.
Sequences: Arrays-as-sequences have a variable number of elements and those elements of the same type.

Fundamental operations in an array.

Arrays have four fundamental operations which include insertion, deletion, access, and search(iteration).

Insertion Insertion operation implies adding a new element inside an existing array. The .push() method is used to perform the operation and a new element is added at the end of the array. Example

let array = [‘apple’, ‘mango’];
console.log(array); // prints [‘apple’, ‘mango’]
array.push(‘banana’);
console.log(array); // prints [‘apple’, ‘mango’, ‘banana’];

Deletion Deletion operation in an array has 2 operations. If you want to remove an element at the end of an array you use the .pop() method and returns the removed element from the array. Example,

let numbers = [1, 2, 3];
console.log(numbers.pop()); // prints 3
console.log(numbers); // prints [1, 2]

If you want to remove an element at the beginning of an array you use the .shift() method and returns the removed element.
Example,

let evenNum = [2, 4, 6];
console.log(evenNum.shift()); // prints 2
console.log(evenNum); // prints [4, 6]

Access Access operation is the process of reading elements in an array and it uses index to get the value directly from the address in memory. It is done by specifying the index of the target element. N/B: indexing always starts at 0.

let students = ['John', 'Tim', 'Sam'];
console.log(students[0]); // prints John

Iteration Iteration is the process of accessing each of the items contained within an array. There are multiple ways to iterate through an array in Javascript which include for loop, for (in) loop, for(of) loop and forEach iteration.

For Loop
It is the most common method of iteration. The structure of the loop is:-

for(variables; Condition; Modification);

let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
} // prints 1, 2, 3, 4, 5

For in Loop This method prints the index of each element in an array:

let arrayOfNames = ['John', 'Nimo', 'Lane', 'Victor', 'Lovell'];
for(let names in arrayOfNames) {
    console.log(names);
}; // prints 0, 1, 2, 3, 4

For of Loop This method prints out the elements of the array being looped on:

let arrayOfNames = ['John', 'Nimo', 'Lane', 'Victor', 'Lovell'];
for(let names of arrayOfNames) {
    console.log(names);
}; // prints all the names in the array

For Each For each is the preferred method of iteration because it cannot skip any elements in an array. It is more expressive and explicit by going through each element.

let arrayOfNames = ['John', 'Nimo', 'Lane', 'Victor', 'Lovell'];

arrayOfNames.forEach((name, index) => {
    console.log(name); // print John, Nimo, Lane, Victor, Lovell
  console.log(index); // prints 0, 1, 2, 3, 4
});

Javascript Functional Array Methods.

We are going to look at three different types of functional array methods in Javascript. They include map, filter and reduce functions. These methods are great because they do not mutate the original array.

Map The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

let num = [4, 9, 16, 25, 64];

num.map((val) => {
    console.log(Math.sqrt(val)); // prints 2, 4, 5, 8
});

Filter The filter() method creates a new array with all elements that pass the test implemented by the provided function.

let num = [4, 9, 16, 25, 64];

let res = num.filter((val) => {
    return val > 20
});

console.log(res); // prints [25, 64];

Reduce The reduce() method executes a callback function on each element of an array, in order, and calculates the return value from previous elements. The final result is always a single value.

let num = [4, 9, 16, 25, 64];
let res = num.reduce((prevVal, currentVal, index) => {
    return prevVal + currentVal
});

console.log(res); // prints 118;

Stacks and Queues

Stack This is a data structure which is mainly used to remove the last element in an array. It uses the Last in, First out form(LIFO). Stack has 2 main operations that occur only at the top of the array. The push and pop operations where the push adds an element to the top stack while pop removes the element at the top of the stack.

let stack = [];

stack.push('John');
stack.push('Ann');
console.log(stack); // prints John and Ann

console.log(stack.pop()); // prints Ann
console.log(stack); // prints John

Queue Queue is a data structure which allows removal of the first element in an array. It uses the first in, first out form. A queue has 2 main operations:

Enqueue
It is a method used to add an element at the end of an array.
Dequeue
It is a method used to remove an element at the beginning of an array.

Example of a queue operation:

function Queue() {
    this.data = [];
};

Queue.prototype.enqueue = function(e) {
    this.data.push(e);
};

Queue.prototype.dequeue = function(e) {
    return this.data.shift();
}


let newData = new Queue();
newData.enqueue('John');
newData.enqueue('Happy');
console.log(newData.data);// prints John and Happy
newData.dequeue();
console.log(newData.data);// prints Happy

Linked List

This is a data structure in which each node points to another node. Linked list has a dynamic structure and can allocate and deallocate data in memory at runtime. There are two types of linked lists:-

Singly linked list In a singly linked list the node(element) contains some data and a pointer to the next node in the list. It allows traversal elements in one way. It is mainly used for implementations of stack. The following code below is an implementation of a singly linked list:-

function SinglyLinkedList() {
    this.head = null;
    this.size = 0;
};

SinglyLinkedList.prototype.insert = function(element) {
    if(this.head === null){
    this.head = new SinglyLinkedList(element);
  } else {
    let temp = this.head;
        this.head = new SinglyLinkedList(element);
        this.head.next = temp;
  }
  this.size++;
};

let data = new SinglyLinkedList();
data.insert("apple"); // linked list now is: apple -> null
data.insert("mango"); // linked list now is: mango -> apple -> null

Doubly linked list It is different from singly linked list because the node(element) of a doubly linked list contains some data to the next node as well as the previous node in the linked list. You can traverse both ways in the doubly linked list. It can be used to implement heaps, binary trees and stacks. The following code below is an implementation of a doubly linked list:-

function DoublyLinkedList() {
  this.head = null;
  this.tail = null;
  this.size = 0;
};

DoublyLinkedList.prototype.insertInTheHead = function(element) {
    if(this.head === null){
    this.head = new DoublyLinkedList(element);
        this.tail = this.head;
  } else {
        let temp = new DoublyLinkedList(element);
        temp.next = this.head;
        this.head.prev = temp
        this.head = temp;
  }
  this.size++;
};


DoublyLinkedList.prototype.insertInTheTail = function(element) {
    if(this.tail === null){
    this.tail = new DoublyLinkedList(element);
        this.head = this.tail;
  } else {
        let temp = new DoublyLinkedList(element);
        temp.prev = this.tail;
        this.tail.next = temp
        this.tail = temp;
  }
  this.size++;
};

let data = new DoublyLinkedList();
data.insertInTheHead("apple"); // tail is apple, head is also apple
data.insertInTheHead("mango"); // tail is apple, head is mango
data.insertInTheTail("banana"); // tail is banana, head is mango

Introduction to Modern Javascript

John Katua — Sat, 12 Feb 2022 19:18:45 +0000

Objectives of the article.

Get a better understanding of different scopes in javascript.
Differentiate between var, let, and const and how to apply them in your code.

Introduction.

Javascript is a scripting language and is mostly used to build interactive web applications. It was first created for the Netscape web browser in 1995. The first prototype of Javascript was written by Brendan Eich.

Working with ECMAScript.

ECMAScript was created to standardize Javascript in an attempt to allow for the independent and compatible implementation of various Javascript concepts. The 6th edition, ECMAScript 6(ES6) came with a lot of syntaxes which helped Javascript developers write more complex applications.

Dive into scope.

The scope is a region in a program where the binding of a name to an entity, such as a variable or function is valid. There are two kinds of scopes in Javascript.

Function scope
Block scope

Function scope.

Function scope is created inside a function. When a function is declared a new scope is created inside that function. Variables declared inside that function cannot be accessed from outside that function but variables outside the function scope can be accessed within the function. Example of a function scope:-

let name = "John";
function displayGreetings(){
  let greetings = `Hello ${name}`;
  console.log(name); // prints John
  console.log(greetings); //prints Hello John
};
console.log(greetings); // uncaught ReferenceError: greetings is not defined
displayGreetings();

Hoisting

It means that all declarations are moved at the top of the scope before code execution. Functions and variables are always hoisted once they are declared using var. Be sure not to use a variable declared using var without assigning it a value, it will return undefined, and it can cause problems, especially if variables are used in the global scope.

console.log(num); // prints undefined
num = 20 // assign value
console.log(num); // prints 20
var num; // declare variable

Block scope

Block scope is the area within curly brackets. If statements, switch conditions, for loops and while loops will have their own block scope. In ES6, const and let keywords allow developers to declare variables in the block scope.
Block scope variables are not hoisted therefore cannot be accessed until they are declared. This means variables that are created within the block scope are on the Temporal Dead Zone which is the period when a scope is entered and a variable is declared.

Variables declaration

In Javascript, you can declare variable using either var, let or const keywords. The let keyword supports the variable reassignment, you can easily reassign your variables. It is also used in block scope and variables declared using let keyword are not hoisted e.g

let student = "John Katua";
console.log(student); // prints John Katua
student = {
  name: "John Katua",
  age:  19
};
console.log(student); // prints the student object

When using var keyword, you can reassign those variables and you get access to those variables from anywhere in the function.
The const keyword implies that the variable cannot be reassigned(a read-only reference to a value). You cannot also declare a variable without assigning a value e.g:-
const name; // Uncaught SyntaxError: Missing initializer in const declaration