Forem: Muhammad Zubair

Strict Mode of JavaScript

Muhammad Zubair — Mon, 12 Sep 2022 15:34:32 +0000

Hey 👋, Guys Welcome.

Today we are deeply learning , that what's the difference between LET , VAR & CONST Keyword in JavaScript.

Let's Dive In ..

You will be surprised to know that JavaScript also have a strict mode. Now What does this strict mode do, This is What Today's article about.

Strict Mode

Strict Mode enables us to write much more secure code than normal. This Mode throws much exceptions than normal, so that we can avoid little mistakes that are often ignored by JavaScript. We Will Be Discussing Many Examples to Explore this Feature.

How to Use

In Order to use this Mode, we have to write these two words before writing JavaScript Code

"use strict" or 'use strict'

Working Environment

This Strict Mode can be used in two ways.

Inside Block
Globally

Inside Block, Strict Mode Will Only Work in Between these two curly brackets {}.
With Global, Strict Mode Will Work Globally in all our Code.

Example

function Mode() {
  "use strict";
  X=20; // X is not defined
}

Z=20;
console.log(Z) // 20
Mode()

In Above Example, We can see that due to strict mode in function, we get an Error. Because Strict Mode in only Enabled inside Function (Mode() Function). According to Exception thrown by strict mode "X is not defined". This exception is due to not defining variable X. We Must Have to use let const or var keyword to Get Rid of this Exception. See Given Example

Example

function Mode() {
  "use strict";
  let X=20;

  console.log(X) // 20
}

Z=30;
console.log(Z) // 30
Mode()

Lets See Few More Examples

Example

'use strict'

function Func(P1,P1) // Duplicate parameter name not allowed in this context
{
  return P1+P1 
}

console.log(Func(3,5)) // !! Output Will Be Wrong

// Always Try to Keep Arguments Name Different

Example

'use strict'

let X=010; // We Cannot Use Leading Zero before Number, Should Be 10 Only 

console.log(X) // Octal literals are not allowed in strict mode.

Example

'use strict'

let eval=20; // Error
let static=10; // Error
let private=10 // Error

We Cannot use Reserved Word as Variable in JavasSript if Strict Mode Enabled.

List of Few Reserved Words is

implements
interface
let
package
private
protected
public
static
yield

As i already mentioned , strict mode helps to write more secure code. JavaScript make it easier for developer code. but strict mode converts previously accepted bad syntax code into error. I think it's good practice to code in Strict Mode.

This is it For Today's Lesson. Hope you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Handling Errors in JavaScript.

Muhammad Zubair — Fri, 09 Sep 2022 15:02:14 +0000

Hey 👋, Guys Welcome.

Today we will be covering that how to handle with errors in JavaScript and display the custom Error details. Don't Worry this article is gonna be short 😀

Let's Dive In ..

While working with the JavaScript , it mostly happens that we probably get and error dues to the mistakes in coding. this mistake may be in our code or may be a Typo.

Sometimes We have to fetch some data from an API and we are working as asynchronously , then we have to face some difficulty if found any error in our code.

For Handling the Errors we can use try and catch block

try block contains the code that is necessary or have to run
catch block contains the code that is used to handle the errors.

Custom Error

In order to define our custom error we can use the throw operator

Example

try{
  let Object={
    Name:"Muhammad Zubair",
    Age:25
  }

  for (let Key in Object)
  {
    console.log(`${Key}: ${Object[Key]}`)
  }
}
catch(Error){
  console.log("No Error Occured , Code in try-block is Fine")
}

In Above Example code written in try block will be executed and everything will work fine. we will get no any error, that's why code written in catch block will not be executed.

Let create a scenario in which we get an error. see

Example

try{
  let Array=[1,2,3,4,5]

  console.log(Array) // 1 2 3 4 5
  console.log(B)
}
catch(Error){
  console.log(Error)
}

In Above example you see that Variable Array was defined and initialized , but variable B was undefined. At First we will get the result of console.log(Array) , after this we will get error due to variable B. On Getting error our code written inside catch block will be executed.

throw operator

As i mentioned earlier that with the help of throw operator we will be able to define our custom error.

Example

try {
  let Array = [];

  if (Array.length == 0) throw "Array is Empty"; // Array is Empty
  else {
    Array.map((Element) => {
      if (Element % 2 == 0) throw "Even Number";
      else throw "Odd Number";
    });
  }
} catch (Error) {
  console.log(Error);
}

Example

try {
  let Element = 20;

  if (Element % 2 == 0) throw "Even Number"; // Even Number
  else throw "Odd Number";
} 
catch (Error) {
  console.log(Error);
}

This is it for Today's Lesson.Hope you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Most Important JavaScript Array Iteration Methods.

Muhammad Zubair — Thu, 08 Sep 2022 04:50:14 +0000

Hey 👋, Guys Welcome.

Today we are deeply learning about the most Important Array Iterations Methods in JavaScript

Let's Dive In ..

Others Programming Languages Such As C, C++, Python and C# .. have Arrays like Concepts and different Methods to Iterate the Arrays or List. In JavaScript there are Bulk of Iteration Methods for Arrays. Lets Uncover Them.

1.Foor Loop

let Array = [1, 2, 3, 4, "Zubair", "USA"];

for(let i=0 ; i<Array.length ; i++)
{
  console.log(Array[i]) // 1 2 3 4 Zubair USA
}

Here We Use a Variable i That Iterate through each Index and Then With the Array[i] we access each Element in That Array. The variable starts from 0 and ends upto less than the length (0-5) of Array.

2.For In

For In Loop is another way to loop through all Elements in Array. We Can also use this methods for objects.

let Array = [1, 2, 3, 4, "Zubair", "USA"];

for (const key in Array) {
  console.log(Array[key]) // 1 2 3 4 Zubair USA
}

With this method , we can also get the Each Index and Element of Array. This can also be used to iterate through keys and values of Object.

const person = {Name:"John Doe", Age:25};

for (let x in person) {
  console.log(`${x} : `,person[x]) //Name :  John Doe Age :  25
}

3.For Of

This Method also loops through all of the values of iterable Object such as Array , String etc. This Methods Does'nt work with Objects.

let Array = ["Zubair", "John", "Doe"];

for (const elemet of Array) {
  console.log(elemet) //Zubair John Doe
}

let Name="John";

for (const elemet of Name) {
  console.log(elemet)
}

In The Above Example , we have for of method applied to a string. This will iterate through each character in the string and display the result like that

J o h n

4.While Loop

let Array = [23,34,45,67,78,89];

let I=0;

while(I<Array.length)
{
  console.log(Array[I]) // 23 34 45 67 78 89
  I++
}

This While Loop serves same as for loop. In Above Example While Loop Running until Value in I variable is less than the size of our Array.

5.For Each

The foreach() methods uses callback function that runs on each array element. The Callback takes the 3 arguments

Element
Index of Element
Array Itself

let Array = [23,34,45,67,78,89];
Array.forEach(Callback=(Element,Index,TempArray)=>
{
  console.log(Element) // 23 34 45 67 78 89
  console.log(Index)  // 0 1 2 3 4 5
  console.log(TempArray[Index]) // 23 34 45 67 78 89
})

As You Can see in the Callback Function we have our Three Arguments working on our Array.

6.Map Method

Map Methods also works similar to Foreach Method. This can also takes 3 argunent

let Array = [23,34,45,67,78,89];
Array.map(Callback=(Element,Index,TempArray)=>
{
  console.log(Element) // 23 34 45 67 78 89
  console.log(Index)  // 0 1 2 3 4 5
  console.log(TempArray[Index]) // 23 34 45 67 78 89
})

But If we return something from callback after performing some functionality, then map method creates new array ,See

let Array = [23,34,45,67,78,89];

let New=Array.map(Callback=(Element,Index,TempArray)=>
{
  return Element*2
})

console.log(New) // [ 46, 68, 90, 134, 156, 178 ]

7.Indexof

The Indexof Methods also iterates through each element of Array and return the index of specific element. If Element not Found , it returns -1

let Array = [23,34,45,67,78,89];

let Ind=Array.indexOf(67)

console.log(Ind) // 3

That's Enough for Today's Lesson.

Like , Comment and Share if you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Why Arrow Function is Preferred over Simple Function ?

Muhammad Zubair — Tue, 06 Sep 2022 16:33:39 +0000

Hey 👋, Guys Welcome.

Today we are deeply learning , that why we should use Arrow Function rather than Simple Function.

Let's Dive In ..

In Most of the Programming Languages such a C++, C , Python and JavaScript , Functions are mostly used to make the code re-usable.

Definition of Function

Function is Defined as the Piece of Code that can be used again and again instead of writing same logic multiple times.

Function in JavaScript

In JavaScript Mainly there are 2 ways to describe a function

Simple Way (with function keyword)
With Arrow Function

Simple Way (with function keyword)

Before 2015 , the typical way of writing functions was same , as i am going to show you below.

Example

function Sum(Param1 , Param2)
{
    return Param1+Param2
}
console.log(Sum(3,5)) // 8

In The Above Example , you can see that the function is accepting 2 parameters and returning the sum of these 2 parameters. In This is way of writing function it is compulsory to write function keyword before name of function followed by () parentheses.

With Arrow Function

These were introduced in 2015 (ES6). This is the latest and widely used method of writing functions. Here Look at the given examples to get better understanding of that , how the arrow functions are written.

Example

let Minus=(Param1 , Param2)=>
{
    return Param1-Param2
}
console.log(Minus(12,8)) // 4

In Above Example we provide the let Keyword followed by Function Name followed by =()=>. These Parentheses are for accepting Parameters Passed to this Arrow Function.

Why Arrow Function

Helps to Write Short Code
Works Best with Array Methods (filter , reduce) , callbacks etc.

Lets See , How Arrow Function Help us to Write Short Code

Example

let Minus=Param1=>
{
    return `My Value is ${Param1}`
}
console.log(Minus(12)) // My Value is 12

Boom , You Can See That , if we have only one parameter in our function than we can omit the Parentheses. Now Lets Make this Code Much Shorter

Example

let Minus=Param1=> `My Value is ${Param1}`

console.log(Minus(12))

Wow , You can See That , if our function has one parameter and only a return statement then we can omit parentheses () , curly braces {} and return keyword as well. Our Function has been converted to single line only because of Arrow Function Super Powers 💥.

Remember : If Our Function has multiple statements in it , then we cannot omit curly braces. Just Like In Given Example

Example

let MyName=Param=>{ let X=23; let Y=10; console.log(`I am ${Param}`) }

MyName('Zubair') // I am Zubair

Anonymous Function

Arrow Functions also gives us the ability to write Anonymous Functions. These are those functions that don't have name associated with them

Example

()=>
{
    console.log("Hello World");
}

These Anonymous Functions are very helpful during callbacks (We Will Cove this later).

Like , Comment and Share if you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Var VS Let VS Const in JavaScript

Muhammad Zubair — Mon, 05 Sep 2022 16:48:56 +0000

Hey 👋, Guys Welcome.

Today we are deeply learning , that what's the difference between LET , VAR & CONST Keyword in JavaScript.

Let's Dive In ..

In JavaScript there are mainly 3 methods to declare the variables.

Using var
Using let
Using const

1) Using var

Before the release of (1995-2015) ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

Example

var X=12;
console.log(X) // 12

var Y="John Doe";
console.log(Y) // John Doe

var Z=[1,2,3,4,5];
console.log(Z) // [1,2,3,4,5]

2) Using let

After the release of ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

let X=12;
console.log(X) //12

let Y="John Doe";
console.log(Y) //John Doe

let Z=[1,2,3,4,5];
console.log(Z) //[1,2,3,4,5]

2) Using const

After the release of ECMA Script 6 (ES6) in 2015 , This was the keyword most used to declare variables , arrays or objects etc.

const X=12;
console.log(X) //12

const Y="John Doe";
console.log(Y) //John Doe

const Z=[1,2,3,4,5];
console.log(Z) //[1,2,3,4,5]

As you can see that we use all these three methods to declare and initialize the variables , now we will discuss few things that differentiate them

Re-Declaration of Variable

With the help of var keyword, we can re-declare the variable with same identifier , see below example

var X=21;
var X=12;

console.log(X) // 12

Now , If we try to re-declare the variable with same identifier with let or const keyword , this will generate the error

let X=21;
let X=12;

console.log(X) // Identifier 'X' has already been declared

Scope (Global and Block)

In JavaScript everything written inside the curly braces {} is considered as block. var has function scope if a variable is declared using var keyword it will be accessible throughout the function.

In Given below example you can see that if we declare the variable with let keyword and try to access it outside the block , this can not be accessed and give error

{
    let X=12
}
console.log(X) // X is not defined

But if we do the same thing with var keyword , then there will be no error and variable can be easily accessed outside block scope , see example

{
    var X=12
}
console.log(X) // 12

Immutability

Now Let's discuss something about const keyword. with const , once its initialized , its value (reference) can never be changed , that's why they are immutable

const Z="Good Morning"
console.log (Z)  // Good Morning
Z="Good Evening" // Error :Assignment to constant variable.

const Arr=[1,2,3,4,5]
Arr[1]=1.5
console.log(Arr) // [1,1.5,3,4,5]

const allows us to only modify the value of the variable (array or objects etc), but the reference to the array cannot be changed, for example

const Arr=[1,2,3,4,5]
console.log(Arr) // [1,2,3,4,5]
Arr=[1,5,6,7,8]  // Error: Assignment to constant variable.

These Were the Major Differences in these three keywords. Now its totally depends upon you , that which one you preferr to use. The let & const are widely used nowadays

Hope you liked my article 💛. I will meet you in the next post with something new to learn.

Happy Coding !! ⚡

Lets Start JavaScript With Me.

Muhammad Zubair — Sun, 04 Sep 2022 04:09:49 +0000

Hey 👋 , I am Muhammad Zubair.

I am a computer science student. I am learning Full Stack (MERN) web development. Currently, I am making projects to practice, what I have learned throughout my Full Stack web development learning journey.

This is actually an introductory post about what we are going to start learning together. We, will, be learning some core concepts of basic and advanced JavaScript. I will try my best to deliver my 100%. This will help us to keep our programming basics strong. Because as you know JavaScript is fundamental of web development. If we don't have much grip on JavaScript, then we won't be able to build beautiful dynamic websites

I will meet you in the next post with something new to learn.

Happy Coding !! ⚡