DEV Community: Kashu_happy

Modern JavaScript for Everyone: Mastering Modern JavaScript the Right Way.

Kashu_happy — Sun, 06 Mar 2022 12:02:19 +0000

JavaScript is a high-level programming language that may be interpreted or compiled at runtime. JavaScript should not be mistaken with the Java programming language because the two have quite different use, semantics, and syntax.

Many people wonder how they will be able to learn modern JavaScript the right way. You must first meet certain conditions before you can practice JavaScript in a way that leads to mastery. In this post, we will explore the proper steps to do so.

Step 1: Why JavaScript?
Because you have chosen to learn JavaScript above all the other programming languages available, you should understand why. JavaScript is free and open source, according to one frequent argument. If you want to work as a web developer, the most obvious reason to learn JavaScript is because you will need it. This is because JavaScript is mostly used for Front-End development, but it may also be used for Back-End development. Because it is easier to study something you are enthusiastic about, knowing your why will make it easier to learn and comprehend JavaScript.

Step 2: Schedule time to study.
Now that you've figured out why you are learning JavaScript, the next step is to make a schedule for yourself, including study and practice time. This is a wonderful way to practice programming since you will know what to do and what not to do at any given moment. It will be difficult to progress if you do not set aside sufficient study time.

Learn the language's history in addition to scheduling time for studying. Also, become familiar with JavaScript's syntax, usage cases, and real-world applications. These are the first stages in becoming acquainted with the language before plunging into serious work with it. By answering these questions, you will have a better understanding of JavaScript's advantages, disadvantages, and quirks.

Step 3: Learn JavaScript concepts.

Learn about the JavaScript environment and runtime engines, as well as user interaction such as the browser console or input/output via HTML elements.
Datatypes in JavaScript that is; string, number, BigInit, Boolen, undefined, null, object, and symbol.
Comments.
Declarations of variables (var, let, and const).
The operators (arithmetic, logical and comparison).
Conditional statements (if , if else, if else if and switch)
Loops (for, while, do while, and event).
JavaScript functions.
Data Structures in JavaScript: stack, array, queues, linked list, trees, graph, and hash table.
Objects in JavaScript.
JSON.
JavaScript classes.
Asynchronous JavaScript: setTimeout function, promises, and async/await.

ECMAScript 2015 (ES6) included a substantial change to JavaScript. As a result, while studying modern JavaScript, it's critical to understand the new ES6 syntax.

Step 4: Research
It's possible that some of these ideas will be difficult to comprehend. To aid with comprehension, more study is necessary. Read JavaScript documentation and books, blogs, and watch tutorial videos to expose you to a variety of settings where other people might be able to explain ideas that you can't comprehend on your own.

Step 5: Practice
Practice, as we all know, makes perfect. As a result, take part in online JavaScript forums and activities. Join a physical or virtual community of programmers to learn from them. Participate in open source projects as an individual or as a group to gain hands-on coding expertise.

Happy Coding 👨‍💻!

Introduction to Data Structures and Algorithms With Modern JavaScript.

Kashu_happy — Fri, 18 Feb 2022 23:49:26 +0000

A data structure, in more technical terms, is a collection of data values, their connections, and the functions or operations that may be performed on the data.

1. Arrays.

An array is a single variable in JavaScript that keeps numerous elements,unlike other languages where array is a reference to several variables. When we wish to keep a list of elements and retrieve them with a single variable, we utilize it frequently.

In JavaScript, an array may hold different items such as Boolean, strings, and numbers, all of which can be stored in a single array.

1.1 Declaring an Array.

An array can be declared in one of the following two ways:

// Method 1:
let arr = [];

// Method 2:
let arr = new Array();

Method 1 is the most commonly used and preferred method above method 2 because when initializing;
Method 1:

// initialization and declaring
let arr = ["mango", "pineapple"];

Method 2:

// initialization and declaring
// array has 3 elements/strings
let arr = new Array ("Toyota", "Audi", "Porshe");

//array has 4 elements that are defined
let arr1 = new Array (1, 2, 3, 4);

//array has 4 undefined elements
let arr2 = new Array (4);

It is evident from the above example that arr1 has 4 items, however arr2 has 4 undefined elements instead of a single element 4. As a result, method 2 is not favored when working with integers, but it is good when working with Boolean and strings, as illustrated above.

In method 2 startup of part 3 can, however, be changed to:

//First create an array of 4 undefined elements
let fruits = new Array(4);

// Assign the array values
fruits[0] = "mango";
fruits[1] = "apple";
fruits[2] = "banana";
fruits[3] = "orange";

1.2 Accessing Items in an Array.

Because arrays are indexed from 0, a number in square brackets is used to access elements in an array.

let fruits = ["mango", "apple", "banana"];
console.log(fruits[0]); // mango
console.log(fruits[1]); // apple
console.log(fruits[2]); // banana

We already know that 0 always produces the first item in an array. You can use the length property, which we'll discuss later, to retrieve the final element in an array by performing the following procedure.

let fruits = ["mango", "apple", "banana"];
const lastItem = fruits.length -1;
console.log(fruits[lastItem]); // banana

//attempting to access a nonexistent element
console.log(fruits[5]); // returns undefined

You need add another index that corresponds to the inner array to be able to retrieve an item in a nested array.

let nestedArray = [
    [
        "mango",
        "banana",
    ],
    [
        "orange",
        "avocado",
    ]
];
console.log(nestedArray[1][1]); // avocado

1.3 Length property of an Array.

The number of elements in an array is returned using the length property of arrays.

An array's length attribute can be returned as:

let fruits = ["mango", "apple", "banana"];
console.log(fruits.length); // 3

However, to set the number of elements in an array, we may use the assignment operator with the length property.

let fruits = ["mango", "apple", "banana"];
fruits.length = 2;
console.log(fruits.length); // 2

1.4 Adding an Item to an Array.

We may assign a value to the next index to add a new value to our fruit variable, which has 3 items in the indices 0 to 2.

let fruits = ["mango", "apple", "banana"];
fruits[3] = "grape";
console.log(fruits);

Output:

[ 'mango', 'apple', 'banana', 'grape' ]

Push() can be used to add an item at the end of an array to avoid scenarios when you mistakenly skip an index while adding an item, resulting in an empty item or items in the array.

let fruits = ["mango", "apple", "banana"];
fruits.push("pineapple");
console.log(fruits);

Output:

[ 'mango', 'apple', 'banana', 'pineapple' ]

The unshift() function, on the other hand, may be used to add an item to the beginning of an array.

let fruits = ["mango", "apple", "banana"];
fruits.unshift("pineapple");
console.log(fruits);

Output:

[ 'pineapple', 'mango', 'apple', 'banana' ]

1.5 Removing an Item from an Array.

We utilize the splice() function to remove or delete a specific item from an array.

let fruits = ["mango", "apple", "banana"];
fruits.splice(1, 1);
console.log(fruits);

Output:

[ 'mango', 'banana' ]

There should be two parameters when using the splice() function. The first parameter specifies the index number to be eliminated (in our case, 1), while the second specifies the number of items to be removed. Otherwise, when one parameter is entered, the item in the index number enter is deleted, along with all subsequent items.

To delete the first item and the last item of an array, use the shift() and pop() methods, respectively. When feasible, however, it is preferable to use the pop() method since the rest of the items in the array will maintain their original index numbers.

//using pop() to remove last item
let fruits = ["mango", "apple", "banana", "pineapple"];
fruits.pop();
console.log(fruits);

//using shift() to remove first item from the remaining items
fruits.shift();
console.log(fruits);

Output:

[ 'mango', 'apple', 'banana' ]
[ 'apple', 'banana' ]

1.6 Looping Through an Array.

To loop through an array, we may use the for keyword to loop through the full array, taking use of the length parameter.

//create an array of vehicles
let vehicles = [
    "trucks",
    "vans",
    "buses",
    "lorries"
];

//loop through the length of the array
for (let i = 0; i < vehicles.length; i++) {
    console.log(i, vehicles[i]);
}

Output:

0 'trucks'
1 'vans'
2 'buses'
3 'lorries'

Although it does not obtain the index of each item, using for...of loop is a simpler and more succinct approach of looping through an array.

//create an array of vehicles
let vehicles = [
    "trucks",
    "vans",
    "buses",
    "lorries"
];

//loop through each vehicle
for (let vehicle of vehicles) {
    console.log(vehicle);
}

Output;

trucks
vans
buses
lorries

2. Queue

The FIFO (First in, First Out) principle governs the operation of a queue. Queue, like Stack, is a linear data structure. The name queue is derived from the analogy of a client waiting at a bank. The client who arrives first is served first, while the customer who arrives later is lined at the back of the queue and will be served later.

Implementing a Queue.

An array may be used as a queue by employing the two Array methods, push() and shift(). In this scenario, the push() function corresponds to an enqueue action, but the shift() method corresponds to a dequeue operation.

Below is an example of a queue class,

class Queue {
    constructor () {
        this.data = [];
        this.rear = 0;
        this.size = 8;
    }
 }

The following variables are used in the above code:

data - array where queue elements are kept.
rear - used to store the position in the queue where the next element will be put.
size - the queue's size, which indicates how many elements are in the queue.

As a result, a queue has two primary operations:

Enqueue inserting a new element at the end of a queue. After adding an element to the queue, we must increment the rear value by 1 such that the rear points to the next place where the next element will be added.

const enqueue = (item) => queue.push(item);

Dequeue removing an element from the front of a queue.

const enqueue = () => queue.shift();

Using enqueue, dequeue, peek() and checking length of a queue

class Queue {
    constructor() {
      this.nums = {};
      this.frontIndex = 0;
      this.backIndex = 0;
    }

    enqueue(num) {
      this.nums[this.backIndex] = num;
      this.backIndex++;
    }

    dequeue() {
      const num = this.nums[this.frontIndex];
      delete this.nums[this.frontIndex];
      this.frontIndex++;
      return num;
    }
    //peek item at the head of the queue
    peek() {
      return this.nums[this.frontIndex];
    }
    // the number of items remaining in the queue
    get length() {
      return this.backIndex - this.frontIndex;
    }
  }

// create an instance of queue
const queue = new Queue();
// enqueue  items into the queue
queue.enqueue(2);
queue.enqueue(4);
queue.enqueue(6);
queue.enqueue(8);
console.log(queue.dequeue()); // 2
console.log(queue.peek());    // 4
console.log(queue.length);    // 3

There are various extra ways that may be applied to the queue, in addition to the primary techniques of the queue, which are:

Peek (): used to obtain the value at the front end of the queue.
isEmpty (): used to determine if the queue has elements or is empty.
printQueue (): used to return all of the queue's entries as a string.

3. Stacks

Stacks are linear data structures that only enable actions on one end, which means that all fundamental operations, such as insertion, may only be performed on this end of the stack. This is due to the idea of Last in First Out (LIFO), which states that the data inserted last will be the first to be withdrawn.The diagram below depicts how stacks function.

Push and Pop are the most fundamental operations performed on Stacks. Push adds an element to the Stack in the image above, whereas pop removes the available item on top of the stack.

Basic operations of Stacks.

push() method - inserts items into the stack.

let stack = [];

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

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

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

pop() method - deletes or removes items from the stack. The code below demonstrates how to pop items from the preceding example.

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

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

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

console.log(stack.pop()); // undefined

peek() method - obtains the element at the very top of the stack that is recently added.

// prototype chain

Array.prototype.peek = function () {
    if (this.lemgth === 0) {
        throw new Error("can not be found");
    }
    return this[this.length - 1];
}
// create an array
const arr = [2, 4, 6, 8, 10];
//using peek() method
const data = arr.peek();
console.log(data); // 10

isEmpty - checks whether the stack is empty.

//Stack class
class Stack{
    constructor()
    {
        this.data = [];
    }
    isEmpty()
    {
        // returns true if stack is empty
        return this.data.length == 0;
    }
}
let stack = new Stack();
console.log(stack.isEmpty()); // true

Implementing a Stack.

A Stack data structure may be implemented in a variety of ways, the most popular of which being an array and a linked list.

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

    // add item into the array
    push(item) {
        this.items.push(item);
    }

    //returns the last item in the array by removing the item
    // will alter with the size of the array
    pop() {
        return this.items.pop();
    }
    //shows the last item in the array but does not remove the item
    peek() {
        if (this.items.length == 0) {
            return null;
        }
        return this.items[this.items.length - 1];
    }

    //returns the size of the stack
    getSize() {
        return this.items.length;
    }

    //checks if stack is empty or not
    isEmpty () {
        return this.getSize() === 0;
    }
}

//make a new stack
const fruits = new Stack();

fruits.push("mango");
fruits.push("apple");
fruits.push("banana");
console.log(fruits); // Stack { items: [ 'mango', 'apple', 'banana' ] }

console.log(fruits.pop()); // banana
console.log(fruits); // Stack { items: [ 'mango', 'apple' ] }

console.log(fruits.peek()); // apple
console.log(fruits); // Stack { items: [ 'mango', 'apple' ] }

console.log(fruits.getSize()); // 2

console.log(fruits.isEmpty()); // false

4. Linked Lists.

A linked list is a linear data structure that expresses a group of elements by pointing to the next one. This is to mean that, the head is the first element in the linked list, while the tail is the final element.

It is a dynamic structure composed of nodes that point to the next node in succession, producing a list. A node has two properties: data, which can be any time of data, and next, which refers to the next node in the list. Next can be null if it not pointing to any node in the list.

class Node{
    constructor(data){
        this.data = data;
        //this node is not referencing anything
        this.next = null;
    }
}

The following properties must be present in linked list elements:

head - the last element in the linked list.
tail - the last element in the linked list.
size - the number of nodes within the linked list.

// initializing an empty linked list

class LinkedList{
    constructor(){
        this.head = head;
        this.tail = tail;
        this.size = 0;
    }
}

Basic operations of Linked Lists.

insertAt: the function inserts an entry at the specified index.
getAt: the method returns the element at the specified index.
removeAt: the function deletes the element at the specified index.
reverse: the order of the linked list's elements is reversed.
clear: the linked list is cleared.

Implementation of Linked Lists.

An example of linking two nodes:

const node1 = {
    data: 1
}

const node2 = {
    data: 2
}

node1.next = node2;
console.log(node1); // { data: 1, next: { data: 2 } }

Creating a linked list:

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

// const node1 = new Node(10);
// console.log(node1); // Node { data: 10, next: null }

Introduction to Modern JavaScript

Kashu_happy — Sun, 13 Feb 2022 15:52:02 +0000

Today, JavaScript is one of the most widely used programming languages on the planet. It may be used to create online or mobile applications, as well as command-line utilities. The ECMAScript 6 (ES 6) standard, which was introduced in 2015 and includes numerous new capabilities for JavaScript, is used in modern JavaScript.

ECMAScript

The European Computer Manufacturers Association (ECMA) is a standard for scripting languages such as JavaScript. Most of the time, these specs add new features to the language that improve the development experience.

Let's have a look at some of the significant changes brought about by the new ECMAScript version.

Variable Declaration

To declare a variable in JavaScript, there are three keywords available, each with its own set of peculiarities. var, let, and const are the three variables. Prior to ES6, there were only two types of scopes in JavaScript: Global Scope and Function Scope. With the ES6 version, the keywords "let" and "const" were added. In JavaScript, these two keywords give block scope variables and constants. The table below shows if these three variables can be reassigned, mutated, and the type of scope:

var declared variables are also hoisted during execution, which means they are pushed to the top of the scope. The following code, for example,

console.log(myNum); // `undefined`
var myNum = 5;

is interpreted as follows during execution:

var myNum;
console.log(myNum); // `undefined`
myNum = 5;

When a variable is defined using the var keyword in a function, it is function scoped, which means that it may be accessed by everything in that function. A function scoped variable generated within a function, on the other hand, cannot be accessed outside of that function. For example:

function myFunc () {
   var myFunc = 'Mary';
   console.log(myFunc); // `Mary`
}
myFunc();
console.log(myFunc); // [Function: myFunc] 
// myFunc can not be accessed in the outermost scope of the function.

let - the assignment of let and const variables is also hoisted, but not their declarations. It may appear that there is no hoisting since they are designed to not be employed prior to assignation, but there is. Furthermore, a let variable cannot be re-declared:

let num = 2;
let num = 8; // Syntaxerror

Let's look at how block-scoping affects our prior example using let:

function myFunc() {
    let myFunc = 'Mary';
    if (true) {
        let myFunc = 'Joh';
        console.log(myFunc); // 'Joh' 
        // a new variable myFunc has been created
        // the variable can not be accessed outside this scope
    }
    console.log(myFunc); // 'Mary'
    // the if statement does not affect this value since it is in a different scope
}
myFunc();
console.log(myFunc); // [Function: myFunc]
// myFunc can not be accessed in the outermost function

const - variables can not be re-declared

const name = 'Mary';
const name = 'John'; // SyntaxError

Re-assignment is also not allowed with const

const name = 'Mary';
name = 'John'; // raises an error

Const variables, in a nutshell:

Before being assigned, it is not possible to access it.
It is not possible to declare it again in the same scope.
Are block scoped
Reassignment is not possible.

const variables are not immutable, as we well know. It does, however, imply that variables in an array or object marked as const can be mutated.

In the case of arrays:

const person = [];
person.push('Mary'); // variable is mutated but not reassigned
console.log(person[0]); // 'Mary' 
person = ['Roy']// TypeError. Reassignment not allowed

In the case of objects:

const person = {
  name: 'Mary'
};
person.name = 'Roy' // variable is mutated and not completely reassigned.
console.log(person.name) //
person = "Sandra" // TypeError. Reassignment not allowed

Arrow Function

Functions in JavaScript can be defined in the following ways:

// Method 1
function add1(a, b) {
    return a + b; // explicit return
}

// Method 2
let add2 = (a, b) => {
    return a + b;
}

let add3 = (a, b) => a + b; // implicit return

console.log(add1(2,3)); 
console.log(add2(4,5)); 
console.log(add3(6,7));

Output:

5
9
13

The first method is the standard JavaScript way for defining functions. The arrow function, which was introduced in ES6, is the alternative method 2.
The following are some of the benefits of employing arrow functions:

enables us to define more concise function syntax with implicit return as seen above.

When the return keyword is used in the body of a function, it is called an explicit return. You can use implicit return with arrow functions, which means you do not have to use the return keyword to return a value.

this is a result of the surrounding.

Because this is equal to the this value of the surrounding execution environment, you don't need to use the "that = this" technique before executing a function within a function when using arrow functions.

function myFunc() {
    this.num = 5;
    setTimeout(() => {
      this.num++;
      console.log(this.num) // 6
    }, 0);
  }
myFunc();

You can eliminate the parentheses surrounding your function if it just accepts only one parameter. For instance, have a look at the code below,

const mul = (x) => x * 2;

without the use of parentheses:

const mul = x => x * 2;

Object handling

If the variable name is the same as the property name, you can perform the following when assigning a variable to an object property:

const num = 10;
const myObj = { num };
console.log(myObj.num);

Output:

Before ES6, code was written like this when you wanted to define a new object literal and utilize variables as object property values:

const num1 = 10;
const num2 = 20;

const myObj = {
  num1: num1,
  num2: num2,
};

console.log(myObj.num1)
console.log(myObj.num2)

Output:

10
20

Because the names of the properties of myObj are the same as the variable names, this is somewhat redundant. Therefore, when the variable name and the property name are the same in ES2015, you may use the following syntax:

const num1 = 20;
const num2 = 30;

const myObj = {
  num1,
  num2,
};

console.log(myObj.num1) 
console.log(myObj.num2)

Output:

20
30

Object.freeze() method

This technique is used to freeze an item. This indicates that if we apply this method on an object, we will not be able to update or tamper with it.

let person = {
    name: 'Mary',
    contacts: {
        mobile: '123',
        home: '456'
    }
}
Object.freeze(person);

person.name = 'Nick';
console.log(person);

person.contacts.mobile = '789';
console.log(person);

Output:

{ name: 'Mary', contacts: { mobile: '123', home: '456' } }
{ name: 'Mary', contacts: { mobile: '789', home: '456' } }

I tried to set a new value to the "name" property after using the ".freeze()" method on the object, but as the output indicates, it is unaffected. However, even though I used the ".freeze()" method to provide a new value to the "mobile" field of the "contacts" object, it was assigned. This is because when the ".freeze()" function is used to an object, it only freezes the object's first-level value. That is, it has no effect on items on the second or inner levels.

Promises

In JavaScript, promises are the most prevalent approach to handle asynchronous tasks. Developers utilized callbacks to manage asynchronous activities before promises. As a result, many callbacks within callbacks were constructed, eventually leading to "The Callback Hell."

A promise established in JavaScript is primarily built on the idea that when the time comes, it will either be resolved or rejected. A promise exists in the following three states:

Fulfilled - the promised task was completed successfully.
Rejected - the promised task was not completed or is unsuccessful.
Pending - the promised task has neither been fulfilled nor rejected.

In a basic JavaScript example, let's utilize Promises.

function work() {
    return true;
}
const myPromise = new Promise((resolve, reject) => {
    let isopen = work();

    if(isopen === true) {
        resolve('Shop is open!')
    }
    else {
        reject('Shop is closed now!')
    }
});

myPromise.then((order) => {
    console.log(order);
}).catch((order) => {
    console.log(order);
});

Output:

Shop is open!

As you can see, I've generated a promise called "myPromise" with two parameters: one for success (resolve) and one for failure (reject). The return value of the "work()" function is sent to the "isopen" variable.

The result of the "task()" function is always "true." As a result, the Promise will verify the condition and, if it is true, resolve the Promise; else, it will be rejected. When we use the Promise, the "then()" function is invoked once the Promise has been resolved. Then we may determine what to do with the Promise that has been resolved. However, if the Promise fails, we must call the "catch()" function. In this case, it fulfilled the promise's requirement, and as a consequence, Promise will be resolved.

Classes

A JavaScript class is just a template for constructing objects. Because JavaScript is a prototype-based language, ES6 has introduced JavaScript classes as a prototype inheritance with syntactic sugar rather than a new class-based inheritance mechanism. If you are familiar with the C# or Java programming languages, you are probably already aware of the concept of classes.

Prototype syntax prior to ES6:

var User = function(name, age) {
    this.name = name;
    this.age = age;
  }
  User.prototype.stringSentence = function() {
    return "Hello, my name is " + this.name + " and I'm " + this.age;
  }
  var newUser = new User("Mary", 20);
  console.log(newUser.name)
  console.log(newUser.age)
  console.log(newUser.stringSentence());

Output:

Mary
20
Hello, my name is Mary and I'm 20

The following is the syntax for ES6 classes:

class User {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    stringSentence() {
      return `Hello, my name is ${this.name} and I am ${this.age}`;
    }
  }
  const newUser = new User("Kim", 25);
  console.log(newUser.name)
  console.log(newUser.age)
  console.log(newUser.stringSentence())

Output:

Kim
25
Hello, my name is Kim and I am 25

That brings me to the end of my article; I hope you enjoyed it. Happy Coding 👨‍💻!