DEV Community: Zahab Kakar

Learn Javascript __Array

Zahab Kakar — Mon, 03 Jan 2022 15:45:44 +0000

Array

You may know that a variable can store only a value at a time, for example,

( var student = "jack", )this is totally fine and we may use it many times while building a project, however, sometimes it is required to collect many values in a single variable like a list of students' names, this is where we can use the Array concept.

The array is a single variable that stores a list of values and each element is specified by a single index.
The array syntaxt is const array_name = [item1, item2, ...];

const names = ["Zahab", "JavaScript","Ada Lovelace"];
const everthing = ["JS", 123, true];

You can also create an array using new keyword.

const names= new Array("Zahab", "JavaScript", "Ada Lovelace");
const everthing = new Array ("JS", 123, true);

The recommended method for creating Array is the first one and in most of the programs you see the array is created using the first syntax.

Now we know how to create an array, let's discuss how to access the elements inside the array. I have mentioned that each element in an array has an index, the index for the first element is always zero and the index for the last element is (array size-1);

const names = ["Zahab", "JavaScript","Ada Lovelace"];
//accessing the first elemnt of the array

const firstElement =  names[0];
console.log(firstElement);

//  Output:  Zahab

You can find the length of an array using length.

const names = ["Zahab", "JavaScript","Ada Lovelace"];

//array length
const firstElement =  names.length;
console.log(firstElement);

//  Output:  3

Now let's learn some array methods

Array Methods

pop()

The pop() method removes the last element of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

shift()

The shift() method removes the first element from an array.


 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

push()

The push() method adds one or more elements to the end of an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.push('Zahab', 'Kakar');
   console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

** unshift()**

The unshift method adds one or more elements to the beginning of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]

length

The length returns the number of elements in an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)

[ 'Jack', 'James', 'Robert', 'John' ]
4

splice()

The splice() method is used to add new elements to an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

As we said before, this method is used to add elements into an array, however, we must indicate that where the new elements should be added. In the above example, 2 indicates the index number where the new elements should be placed and 1 shows the number of elements that should be deleted, as we mentioned 1 element should be deleted, we do not have the 'Robert' in the second array.

concat()

The contact method is used to creates a new array by concatenating or merging existing arrays.


var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);
var myFriends = ['Jennifer','Mary','Patricia']
  console.log(myFriends);

  var allNames =  students.concat(myFriends);  
  console.log(allNames)

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

slice()

This method slices out a part of an array starting from mentioned array element index.
Slice can have two arguments, which indicate the starting and up to (but not including) the end argument.
This method also accept negative numbers.

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(1,3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(-1);  
  console.log(newStudent);

[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

Sorting Arrays

You can sort an array using the sort() method alphabetically.

const names = ["Zahab", "JavaScript","Ada Lovelace"];
const firstElement =  names.sort();
console.log(firstElement);

// Output: [ 'Ada Lovelace', 'JavaScript', 'Zahab' ]

Now let's sort the numbers array using sort method.

const numbers = [9, 12,30];
const firstElement =  numbers.sort();
console.log(firstElement);

// Output: [ 12, 30, 9 ]

You can see that the output is wrong, the right output should be [9,12,30]. But here the javaScript only evaluated the first number, so in 12 and 30, it just checked the 1 and 3.

To solve this we can use the bellow function.

const numbers = [9, 12,30];


const firstElement =  numbers.sort(function(a, b){return a - b});
console.log(firstElement);

// Output: [ 9, 12, 30 ]

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Feel free to contact me on Twitter

Learn Javascript Functions

Zahab Kakar — Tue, 28 Dec 2021 19:44:25 +0000

Introduction

This article explains JavaScript function in detail and followed the previous JavaScript article Learn JavaScript__Part1. Therefore if you are not familiar with JS basics, you may check the mentioned articles.

What are Functions in JavaScript?

Functions are containers that hold reusable code and perform a particular task. Not just JavaScript but almost all programming languages have a concept of functions and every developer must deal with that while coding.

Functions are independent pieces of code and manage the large code. Before moving on how it performs a task, let's see how we can create a function.

In javaScript the function keyword is used to declare a function, to identify a function it should have a name.
Here is the syntax for function declaration

function  name(){

YOUR_CODE

}

Here is the example, the function "sayHi" can be created using a function keyword followed by "sayHi" [function name] and a set of parentheses, the function code will be written inside the curly braces. Whenever the function is called, it performs whatever instruction is written inside it, here I created this function that whenever it is called it should print I like JavaScript.

  function sayHi(){
      console.log("I like JavaScript")
  }
  sayHi();

// I like JavaScript

Here is another function example


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();

/*
      Hello world
      8
*/

JavaScript functions can be used as reusable code. In below example, I don't need to type the code every time I need it, I can just call the function.


  function myFunction(){
      console.log("Hello world");
      let c =  3 + 5;
      console.log(c);
  }

  myFunction();
  myFunction();

/*
      Hello world
      8
      Hello world
      8
*/

Functions also accept parameters - parameters are the symbolic name for "data" that goes into a function. A function can have one or more parameters.

In the below example, the function has a parameter called num, num accepts a value and performs the function task based on that value. The parameter value will be initialized while calling the function.

  function myFunction(num){
     console.log(num * num)
  }
  myFunction(3);
  myFunction(10);


/*     9
       100
*/

You don't need to console.log in functions, the " return " is used to return the function statements.

  function myFunction(a, b){
    return a + b;
  }
  console.log(myFunction(3, 5));

//     8

What are the arrow functions?

ES6 introduced more cleaner and proper method for declaring function, let's compare these two functions.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

I write the function called square in an arrow function method. To convert a JavaScript function to an arrow function method, you need to remove the function keyword and after the parenthesis we need a (=>), if there is no parameters for the function, just add an empty parenthesis.

If the return is just a single line, you can remove the return and curly braces.
You can read the arrow function as " number goes to number times number".

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Feel free to contact me on Twitter

Learn Javascript __part1

Zahab Kakar — Mon, 27 Dec 2021 15:54:50 +0000

Introduction

The JavaScript Part 1 is the First article of Learn JavaScript Series which includes the explanation, example of all the basics of JavaScript. So, if you are a developer, who has no idea about JavaScript or you are a beginner JavaScript developer, You can start from this article.

What is JavaScript?

JavaScript is the most popular programming language and is used on both the client-side and server-side that allowing you to make web pages interactive. JS creates and controls dynamic website content, this means that anything changes and moves on your screen without reloading a web page are done by javascript.

Why do you need to learn javascript?

Highest community size

JavaScript has the highest community size and almost 97% of the websites are using JavaScript.

Easy to learn

JavaScript is very easy and does not require any environment setup.

If you learn javascript, you can develop

1.   Websites
2.   Mobile apps
3.   Desktops apps
4.   Machine learning models

JavaScript basics

Hello World

The first step is to learn how to execute your code, as I said before Js doesn't require any environment setup, You can just use your browser Developer Tools. Click right and select inspect, then go to the console.

Here console.log just printed the Hello world at the console of the browser.

Variables

Variables in JavaScript are just a container that stores the value. The variable declaration has the following syntax: " variableKeyword variableName = value; "

There are three keywords in JS that can be used as a variable keyword (var, let, const). variableName is the name that you give to the variable and the value which will be assigned to the variable means this variable holds this value inside itself and whenever the variable is called, it provides the value.

var course  = "JavaScript";
let name = "Zahab";
const number = 123;
console.log(course, name, number);

If you paste the above code on the console and click enter the output will be "JavaScript Zahab 123".

It just provided the value of each variable.

You can see that (var, let, const) are all doing the same thing, they are all just providing the value of the variable but what is the difference between them? Here I will briefly mention their difference, however, if it is still not clear, you can read this article.

var: The variable defined by the var keyword will be accessible in your entire program and you can reassign it

Let: When you declare a variable with the let keyword, the variable is only accessible inside that block in which it is declared.

const: The variable which is defined by the const keyword cannot be reassigned. In the above example, you can not reassign the value of the number from 123 to any other value.

comment

Comments are used to write notes or ignore the code without deleting them. This means the code or anything which are commented in your program will not be executed. There are two ways that you can comment in JavaScript ( Single line using "//") and (multiple lines using "/* your comment */" )

Have a look at the below example.

// variables example
var course = "JavaScript";
let name = "Zahab";
const number = 123;

console.log(course);
// console.log(name);
console.log(number;

The first line is just a text and it's just for more clarification. It is just a single-line comment.

I have also commented the (console.log(name)) so that the compiler will not execute that line of code. The output is multiple lines so we can use multi-line comments, you can see that the comments have a grey color and the "name" variable is not executed because it was just a comment.

DataTypes

Datatypes are the types of data that you provide for the variables. Do you remember this syntax " variableKeyword variableName = value; ", here the value that you assign for a variable can be any type like a number(123), a string(Zahab), or a boolean(true/false). Following are the types of data in JavaScript:

String
Number
Boolean
Object
Undefined
Null

Here is an introduction to the JavaScript datatypes and I will explain each of them and its methods in another article.

String: A string is a collection of characters, it can be a name or sentence. If the value of a variable is a string then it should be written inside the single or double-quotes.

*Boolean: * It is a datatype when the value of a variable is either true or false.

Object: In JavaScript, an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

Number: when a number is the value of the variable then the variable has a number datatype. The number can be with, or without decimals. We will discuss the numbers method in another article.

Undefined: When a variable has no value or there is no value for the variable then its datatype is undefined.

Null: A null means absence of a value. It is declared when the variable does not have any value for now but it will have later on.

let name = "zahab";
let number = 123;
let isLoading = true;
let enterValue  = null;
let noValue;

console.log(name , number , isLoading , enterValue,  noValue)

Operators

Operators are used to perform specific mathematical and logical computations on operands. Following are the JS operators:

JavaScript Arithmetic operator

let a = 3;
let b = 2;

let addition = a+b     
let subtraction = a-b  
let multiplication= a*b 
let division = a/b     
let modulus = a%b      
let increment = ++a    
let decrement = --a    


console.log(addition, subtraction, multiplication, division, modulus, increment,  decrement);

JavaScript Comparison Operators

Here the output might confuse you, so I explain it.

These operators are comparing the operands, the first output is false or the result of the equal operator is false because 3 is not equal to 2. The equalType is also false because it checks both the value and type, the value is not equal because 3 is not equal to 2 and checking the types of the two operands means checking their data types, both are numbers so type is true but because the value is false the result will be false.

The third one is true because 3 is not equal to 2, the "!" indicates the "not". The greater variable is true because 3 is greater than 2. The less variable is false because 3 is not less than 2. The last two are true and false respectively because their first condition is true.

JavaScript Logical operator

There are three logical operators in JS (AND, OR, NOT). The AND operator returns true if both the conditions are true. In the below example 8 is less than 10 and greater than 1, here both of the conditions are true, hence the result is true.

The OR operator is true if both or any one of the conditions are true.

The not operator returns True when the result is False and returns False when the result is True.

JavaScript Bitwise Operators

JavaScript Bitwise Operators perform operations on the bit level. Followings are the types of bitwise operators in JS.

Conclusion

I am going to explain these topics in detail in the next article, so if you are confused with maybe objects or operators, it's fine. We will have a complete discussion about them in the operators' article.

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

If you have any questions or need help, feel free to contact me on Twitter

Top 6 JavaScript Chart Libraries

Zahab Kakar — Wed, 24 Nov 2021 21:13:20 +0000

JavaScript is a programming language used to develop dynamic and interactive websites.
There are over 1.8 Billion websites in the world, and JavaScript is used on 95% of them. I have compiled the best and useful Chart Libraries that you need as a Javascript developer. The JavaScript Chart Libraries helps you easily visualize data using JavaScript

ChartJS

Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free. It is a community maintained an open-source library that helps you easily visualize data using JavaScript.

link: ChartJS

Data Driven Documents (D3)

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

Link: D3

Google Charts

Google Charts is an interactive Web service that creates graphical charts from user-supplied information. The user supplies data and a formatting specification expressed in JavaScript embedded in a Web page; in response, the service sends an image of the chart.

Link: Google Charts

ApexCharts.Js

ApexCharts is a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. This library allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples.

Link:ApexCharts

Chartist

Chartist JS is a simple, flexible way to visualize so many types of data, it is developed to create simple responsive charts.

Link: Chartist

G2Plot

G2Plot is an interactive and responsive charting library based on the grammar of graphics. The responsive ability of g2plot guarantee your chart's readability in any display space and data status.

Link: G2Plot
Thanks for reading, I hope you found this useful.

Feel free to connect with me on Twitter

What CSS Framework Should You Learn? CSS vs Bootstrap vs Tailwind CSS

Zahab Kakar — Thu, 21 Oct 2021 10:41:22 +0000

Introduction

As a developer, we all deal with plenty of recommendations, various options to choose and having no idea what to choose. One of the most common aspects that provide you job opportunities, having a high number of clients and income is your skills as a developer. This includes what you know or what you must know.

"What CSS framework should I know? " Have you ever heard this question or have you ever asked yourself this question? If yes! You are welcome, we are going to discuss it in this article, if not! You will. Therefore, let's explore it.

I've started my styling journey with CSS, and it was so great for me to create basic things even changing the background colour, however, it was too tedious to write lots of words. At the same time, I got many recommendations about bootstrap and when I start learning bootstrap, it was tough but I liked it. Bootstrap was so cool because everything that I needed was ready. I recently moved to tailwind and, it's also too great for me, I will discuss why I left CSS or bootstrap and What to choose.

No need to overthink, all involve a simple mechanism of adding style to your project and, we discuss what to choose.

CSS

Cascading Style Sheets (CSS) is a stylesheet language, it is very simple and easy for developers and, almost all beginners choose it. It is easy to become familiar with CSS and play around but, it takes much more time to master it. However, you do not need to be proficient in CSS, even just learning basics like page layouts, colours, and fonts is enough to get a job and make money, the next reason for learning CSS is that it improves your project speed as you use only the particular styles that you need.

You might think " If it is easy to learn and I can get a job then why do I need to learn other frameworks?"

Well, Using CSS is great but the reason I do not use CSS most of the time is that I had to write many lines of code for each page or simply it is really time-consuming especially when you have less time to complete your project.

It doesn't work always the same for all the browsers even sometimes doesn't work at all which is a headache for many developers, specifically when they need to test the compatibility, running of a program across multiple browsers.

Bootstrap

Bootstrap is a front end development framework. It is a massive collection of reusable and versatile pieces of code which are written in HTML, CSS, and JavaScript. Everything in bootstrap is ready and one of the reasons to learn bootstrap is that it has a responsive suction and is supported by many communities. Bootstrap allows you to design a website easier and faster and includes design templates for typography, forms, buttons, tables, navigation, modals etc.

If you want to use bootstrap on your project, you have to add all its CSS files even if you don't need them, and this will slow down your website. Bootstrap is still one of the most popular CSS frameworks and developers prefer to use it. I personally found it difficult at the starting, but It works great once you become familiar.

Tailwind CSS

Tailwind is a utility-first CSS framework used for building user interfaces. It is also one of the most popular CSS frameworks and is used by many developers. The difference between bootstrap and TailwindCSS is that Bootstrap provide styled component like button, nav etc while tailwind provide styled classes like flex, text-centre and rotate-90 etc.

Not only does it speed up production, but it offers so much flexibility and customisation being so low-level. Unlike Bootstrap, you are free to give any look you want for your project as you use only the style you need and the HTML will be styled too fast.

As the Tailwind CSS and HTML should be written together, it is hard to read and sometimes confuses developers while reading the code. It takes time to learn Tailwind as there are many classes and it doesn't include components too, therefore a developer must style the components which are already styled in Bootstrap.

Conclusion

You might already decide what to learn. There is no way to select a particular one as the best. Each of them is very popular and widely used by developers. It totally depends on you, the project you work on and your client preferences.

It is always advised to start with CSS if you are a beginner because it is simple or If you have less time and don't want to write many lines of code then Bootsrap is the best option and if you want more control over your style and if the HTML, CSS mixed code doesn't confuse you, go with Tailwind CSS.

That's all for now.

Thanks for reading, I hope you found this article useful.

Feel free to connect with me on Twitter :)

Top 40 JavaScript Methods You Must Know!!

Zahab Kakar — Fri, 15 Oct 2021 05:11:22 +0000

JavaScript is a programming language used to create web pages and mobile apps. If you have been studying Javascript for so long and still it looks scary to you, probably you haven't learnt these methods yet. This article is for all javascript developers at any level. If you are looking for a specific method, feel free to jump and skip others. If you are familiar with javascript, I recommend you to read ES6 The modern Javascript to explore more about JS.

Array
String
Objects
Numbers
ES6

If you are already familiar with the definition of the above topics, feel free to explore their methods only.

Array

You may know that a variable can store only a value at a time, for example
var student = "jack", this is totally fine and we may use it many times while building a project, however, sometimes it is required to collect many values in a single variable like a list of students names, this is where we can use the Array concept.
Array is a single variable that store a list of values and each element is specified by a single index.

Array methods:

pop()

The pop() method removes the last element of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

shift()

The shift() method removes the first element from an array.


 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.shift();
   console.log(students)

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'James', 'Robert', 'John' ]

push()

The push() method adds one or more elements to the end of an array.

 var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.push('Zahab', 'Kakar');
   console.log(students)

Output: 
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]

unshift()

The unshift method adds one or more elements to the beginning of an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
   students.unshift('Zahab', 'Kakar');
   console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]

length

The length returns the number of elements in an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
var length = students.length;
   console.log(length)

[ 'Jack', 'James', 'Robert', 'John' ]
4

splice()

The splice() method is used to add new elements to an array.

var students = [ 'Jack', 'James', 'Robert', 'John'];
   console.log(students);
students.splice(2, 1, "Zahab", "Kakar");
  console.log(students);

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]

concat()

The contact method is used to creates a new array by concatenating or merging existing arrays.


var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);
var myFriends = ['Jennifer','Mary','Patricia']
  console.log(myFriends);

  var allNames =  students.concat(myFriends);  
  console.log(allNames)

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'Jennifer', 'Mary', 'Patricia' ]
[ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]

slice()

This method slices out a part of an array starting from mentioned array element index.
Slice can have two arguments, which indicate the starting and up to (but not including) the end argument.
This method also accept negative numbers.

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(1,3);  
  console.log(newStudent);

Output:
[ 'Jack', 'James', 'Rober', 'John' ]
[ 'James', 'Rober' ]

var students = [ 'Jack', 'James', 'Rober', 'John'];
   console.log(students);

 var newStudent  = students.slice(-1);  
  console.log(newStudent);

[ 'Jack', 'James', 'Rober', 'John' ]
[ 'John' ]

String

A JavaScript string stores a series of characters or a string is a collection of characters. A string can be any text inside double or single quotes.

toUpperCase()

The toUpperCase method is used to convert a string to upper case.

var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
 var newStr = str.toUpperCase()
 console.log(newStr)

Output: 

LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY.

toLowerCase()

The to Lowercase is used to convert a string to lower case.

var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. "
 var newStr = str.toLowerCase()
 console.log(newStr)

Output:
lorem ipsum is simply dummy text of the printing and typesetting industry.

slice()

This method is used to return the sliced part of a string, it takes one or two arguments that indicate the initial and end of the slice. The arguments can also be negative.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.slice(-8, -1)
console.log(newStr);

Output:

industr

substring()

This method is used to return the sliced part of a string, however, it doesn't accept negative numbers as an argument.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substring(1, 6)
console.log(newStr);

Output:

orem

substr()

This method is similar to slice, however, the second parameter indicates the length of the part that should be extracted.


var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.substr(8, 13)
console.log(newStr);

Output:

sum is simply

replace()

The replace method is used to replace a part of a string with another string.
This method is case sensitive.

var str = "lorem ipsum is simply dummy text of the printing and typesetting industry"
var newStr = str.replace("is", "are")
console.log(newStr);

Output:

lorem ipsum are simply dummy text of the printing and typesetting industry

concat()

This method is used to concatenate two or more strings.


var str1 = "Java";
var str2 = "Script";

var str = str1.concat(str2);
console.log(str)

Output:
JavaScript

trim()

This method is used to remove the spaces from both sides of the string.

var str1 = "       JavaScript        ";
str2 = str1.trim();
console.log(str2);

Output:

JavaScript

split()

The split is used to convert a string to an array.

var str = "JavaScript, is, nice"
var newStr = str.split(",")
console.log(newStr[0]);

Output:

JavaScript

charCodeAt

The charCodeAt returns the unicode of the character at a specified index in a string.

var str = "JavaScript is nice"
var newStr = str.charCodeAt(str[1])
console.log(newStr);

Output:

74

charAt()

This method returns the character of a specific index in a string.

var str = "JavaScript is nice"
var newStr = str.charAt(1)
console.log(newStr);

Output:

a

padStart

This method is used to add padding at the starting of a string.

var str = "15"
var newStr = str.padStart(4, "3")
console.log(newStr);

Output:

3315

padEnd

It adds padding at the end of the string.


var str = "15"
var newStr = str.padEnd(4, "3")
console.log(newStr);

Output:

1533

length

This method is used to return the length of a string.

var str = "JavaScript is nice."
var newStr = str.length
console.log(newStr);

Output:

19

Objects

The Object is the JavaScript data type. It is used to store various keyed collections and each key can have a value.

keys()

This method returns the keys of an object.

const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.keys(object1));

Output:

[ 'name', 'age' ]

values()

This method returns the values of an object.

const object1 = {
  name: 'John',
  age: 20,

};

console.log(Object.values(object1));

Output:

[ 'John', 20 ]

create()

This method is used to create an new object from existing object.

const person = {
  name: "John",
  introduction: function() {
    console.log(`My name is ${this.name}`);
  }
};

const me = Object.create(person);

me.name = 'Robert'; 

me.introduction();


Output:

My name is Robert

freeze()

The Object.freeze() method freezes an object. This method will allow an object to be changed, freezing an object prevents changing, for example, adding new properties to it, removing existing properties from it.

const person = {
  name: "John",

};


Object.freeze(person);

person.name = "Robert";


console.log(person.name);

Output:

John

assign()

This method is used to copy the properties of one object to another object.

const person = {
  name: "John",
  age : 20
};

const obj = {
  ishuman : true
}
Object.assign(person, obj);

console.log(person);

Output:

{ name: 'John', age: 20, ishuman: true }

Numbers

The number is the numeric data type of Javascript that stores a normal integer, floating-point values.

toFixed()

This method writes the number with a specified number of decimals and return its value as a string.


var x = 9.656;
var newX = x.toFixed(0);
console.log(newX)
var newX = x.toFixed(2); 
console.log(newX)
var newX = x.toFixed(4);  
console.log(newX)
var newX = x.toFixed(6);  
console.log(newX)
console.log(typeof(newX))

Output:
10
9.66
9.6560
9.656000
string

toPrecision()

This method is used to convert a number to a specified precision and return its value as a string.

var x = 9.656;
var newX = x.toPrecision(2);
console.log(newX)
var newX = x.toPrecision(4);  
console.log(newX)
var newX = x.toPrecision(6);  
console.log(newX)
console.log(typeof(newX))

Output:
9.7
9.656
9.65600
string

parseFloat()

This method converts the function argument to a string first and returns a floating-point number.


function addition(r) {
  return parseFloat(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))

outPut:
4
4
6.6

Number()

This method is used to convert the value of other data types to numbers.

var x = true;
console.log(Number(x))
var x = false;
console.log(Number(x))
var x = "999";
console.log(Number(x))


1
0
999

parseInt()

This method converts the function argument to a string first and returns an integer.

function addition(r) {
  return parseInt(r) * 2.0;
}

console.log(addition(2))
console.log(addition("2"))
console.log(addition("3.3"))

Output:
4
4
6

ES6

ES6 introduced many important methods in javascript that we will discuss in this article.
If you don't know the ES6 yet, I recommend you to have a look at this article because, in the below paragraphs, we used a few topics which might look tough, however, they include their definition and example.

map()

This method takes an array, and performs a particular function on each of the elements of the array, and returns a new array.

var arr=[2.1,3.5,4.7]; 

var result= arr.map((num) => 2*num );  
console.log(result)

Output:

[ 4.2, 7, 9.4 ]

every()

This method is used to check whether elements in a given array satisfy a particular given condition or not. It returns true if all of the array elements satisfy the condition, otherwise, it return false

const ages = [32, 33, 16, 40];


function checkAge(age) {
  return age > 18;
}

console.log(ages.every(checkAge))

Output:

false

includes()

This method is used to check a particular element exists in an array or not. it returns true if the element includes in the array.

const ages = [32, 33, 16, 40];

console.log(ages.includes(33))

Output:

true

for…of iterator

The for ...of creates a loop over object and array.


const ages = [33, 32, 16];

for (const element of ages) {
  console.log(element + "b");
}


Output:

33b
32b
16b

Spread operator

The spread operator is used to )take an array and expands it into individual elements. The ... indicates the spread operator.

const ages = [33, 32, 16];

console.log(...ages)

Output:

33 32 16

filter()

This method creates a new array with all elements that pass the provided condition.

const ages = [33, 32, 16];

console.log(ages.filter((age)=> age>20))


Output:

[ 33, 32 ]

reduce()

This method is used to reduces an array to a value.

const ages = [33, 32, 16];

const reducer = (first, second) => first + second;


console.log(ages.reduce(reducer))


Output:

81

That's all for now.
Thanks for reading, I hope you found this article useful.

Feel free to connect with me on Twitter :)

5 Ways to Fetch API Data in React.js

Zahab Kakar — Fri, 24 Sep 2021 08:16:34 +0000

This article is a reference guide to strengthen your skills as a React developer and for job interviews.

Introduction:
Ways of Fetching Data
- 1. Fetch Data in React Using the Fetch API
- 2. Fetch Data in React Using Axios
- 3. Fetch Data in React Using async / await syntax
- 4. Fetching Data with Custom Hook
- 5. Fetch Data in React Using the React Query Library

Introduction:

React is one of the JavaScript libraries for building user interfaces or UI components. Many react projects require interaction with the outside world data. For example, when we want to create a weather application, we need accurate data which should change dynamically. We can access this data by fetching API. In this article, we will explore different ways that you can fetch data in react.js.

Ways of Fetching Data

1. Fetch Data in React Using the Fetch API

Fetch API is available in modern browsers (window. fetch) and allows us to make requests using JavaScript promises. We can use the fetch() method to get the data. To make a simple GET request with fetch, we just need to include the URL endpoint to which we want to make our request. Here is an example of how we can use it.

useEffect(() => {
  fetch("https://randomuser.me/api/")
  .then((response) => response.json())
  .then((data) => console.log(data));
  }, []);

The first .then is for returning a JSON object of the result and the second one is for printing at the console.

2. Fetch Data in React Using Axios

This is used to make requests with React using axios. It is the same as the Fetch, however, in this approach, we don't need to convert the data to JSON and use the first .then, axios directly fetch data and return the JSON object. Axios is the shorter syntax that allows us to cut down on our code and it includes a lot of tools and features which Fetch does not have in its API.
Here is how to use axios.

first installing axios

$ npm install axios
        or
$ yarn add axios

import it to your project

import axios from "axios"

Here is the syntax

useEffect(() => {
  axios.get("https://randomuser.me/api/")
      .then((response) => console.log(response.data));
  }, []);

3. Fetch Data in React Using async / await syntax

Async / await enables us to remove our .then() callbacks and simply get back our asynchronously resolved data. Remember, We can not make an async function inside the useEffect.

useEffect(() => {
      getData()
  }, []);

async function getData() {
  const response = await fetch('/movies');
  const result = await response.json();
  console.log(result.data));

}

4. Fetching Data with Custom Hook

It is always better to have a clean code and short syntax, and you might realize that using useEffect over and over again is tedious, even sometimes it confuses many developers. Here we have a more clear way to fetch data. Using a third library **react-fetch-hook **allows us to fetch data and cut down on our reused code.

First, we need to install *react-fetch-hook *

$ npm install react-fetch-hook
             or
$ yarn add react-fetch-hook

javascript

import it to your project

import useFetch from "react-fetch-hook"

Here is how we can use it

const {data} = useFetch("https://randomuser.me/api/");
console.log(data);

5. Fetch Data in React Using the React Query Library

You might think that using custom hooks is a great approach, Yes! However, React Query takes the fetching with hooks to the next level. React Query not only provide a simple and clear syntax but also deal with state management tools to control when, how and how often our data is fetched.

First, install the react query

$ npm i react-query
           or
$ yarn add react-query

import it to your project

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

Here is how we can use it

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

 const queryClient = new QueryClient()

 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

 function Example() {
   const { isLoading, error, data } = useQuery('nameForYourData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query')
.then(response =>
       response.json()
     )
   )

   if (isLoading) return 'Loading...'

   if (error) return 'An error has occurred: ' + error.message

   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <p>{data.subscribers_count}</p>
     </div>
   )
 }

That's all for fetching data!🎉🎉

Thank you for reading my article, I hope you found this article useful.

Feel free to connect on
Twitter :)

6 Tips and Tricks Every Developer Should Know in Visual Studio Code 🤩

Zahab Kakar — Sat, 18 Sep 2021 06:16:23 +0000

One of the most common text editors used by developers is Visual Studio Code. Microsoft created it to be the first cross-platform programming tool in the Visual Studio family that supported OS, Linux, and Windows .Visual Studio Code is by far one of the most popular code editors for web, mobile, and hardware developers.

In this article, we will talk about the most essential tips every developer should know in VS Code

Go to Definition

You may come across a lot of variables or methods that you are unfamiliar with when programming. By selecting the “Go to Definition” option from the right-click menu of the required variable or method in Visual Studio Code, you may quickly get to the definition.

Zen Mode

It's a view with no distractions. All of your window's superfluous toolboxes and bars will be gone, allowing you to concentrate just on your code. To use zen mode simple go to View > Appearance > Toggle Zen Mode

Split view

Go to the split view if you're skilled at multitasking and are working on two separate files of the same project at the same time, or if you need to compare two files. You can open as many editors as you like side by side vertically or horizontally.

Quick Open

If you want to open a file quickly without using sidebar , you can simply use quick open. To open quick open press cmd+p on Mac and for Windows / Linux you can use ctrl + p

Command Palette

The command palette, allows you to quickly access any registered command, including those offered by extension. In addition, if a key binding is connected with a specific command, it will be presented in the type-to-search drop-down list.

You can open Command Palette by pressing cmd+shift+p in Mac and ctrl+shift+p for Windows / Linux.

Multi cursor selection

You may utilise multi-cursor editing to modify several lines of text in various areas of your document. This function allows you to add, modify, or remove text by using several cursors in separate locations.

You can do this by clicking anywhere in your text document while holding down the Alt or Option keys on your keyboard.

Gif by Nacimota from SOF

Thanks for reading!

Let's connect on Twitter

Top 5 Useful Packages That Every React Developer Should Know

Zahab Kakar — Sun, 12 Sep 2021 16:43:23 +0000

React JS is a popular JavaScript framework for building front-end applications, such as user interfaces that let people interact with software. When it comes to developing modern React apps, choosing the right library might be difficult. Therefore in this article, I have compiled the best and useful packages that you need as a React developer.

Axios

Axios makes it simple for us to communicate with APIs in our React projects. Though alternative techniques like Fetch or AJAX may do this, Axios can give extra functionality that goes a long way with React-based apps.

Installation

Using NPM

npm install axios

Using Yarn

yarn add axios

Usage

import axios from 'axios'

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Redux

Redux is a JavaScript library that allows you to manage and centralize your application's state. For creating user interfaces, it is most often used alongside frameworks like React or Angular.

Installation

Using NPM

npm install redux

Using Yarn

yarn add redux

Usage

import { createStore } from 'redux'


function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Formik

Formik is a small group of React components and hooks for building forms. It helps with the three most annoying parts: Getting values in and out of form state. Validation and error messages.

Installation

Using NPM

 npm install formik --save

Using Yarn

yarn add formik

Usage

 import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   // Pass the useFormik() hook initial form values and a submit function that will
   // be called when the form is submitted
   const formik = useFormik({
     initialValues: {
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />

       <button type="submit">Submit</button>
     </form>
   );
 };

Styled Components

Styled Components is a CSS tool that makes your React project run more smoothly. This package enables you to construct reusable, tiny components that are crucial to your application's design.

Installation

Using NPM

npm install --save styled-components

Using Yarn

yarn add styled-components

Usage

import styled from "styled-components";

// Styled component named Button
const Button = styled.button`
  background-color: black;
  font-size: 18px;
  color: white;
`;

function MyComponent() {
  return <Button> Sign up </Button>;
}

Chakra UI

Chakra UI is a React component toolkit that seeks to help developers spend less time writing code and more time focusing on providing a great user experience. It provides you with the flexible, accessible, and easy user interface components you'll need to create apps.

Installation

-Using NPM

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

-Using Yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Usage

import React from "react";
import { Button, ButtonGroup } from "@chakra-ui/react";
// Button: The button component with support for custom icons, spinners, etc.
// ButtonGroup: Used to group buttons whose actions are related, with an option to flush them together.

export default function MyComponent() {
  return (
    <div>
      <Button colorScheme="blue">Button</Button>
    </div>
  );
}

Thanks for reading!

Let's connect on Twitter

ES6 Learn Modern JavaScript! Part 1

Zahab Kakar — Tue, 10 Aug 2021 10:32:37 +0000

Let's start with a simple introduction to ES6.

ES6 Stands for ECMAScript 6 which is a base language that JavaScript is based on and JS is listed as a major implementation on ES6.

ES6 or ECMA Script 2015 introduced by ECMA organisation which present modern and essential JavaScript feature.

Enough theories! Let's learn ES6.

Part 1 contains the explanation of the given topics.

Var/ Let /Const

I briefly explained these three topics because I have already written about them, if you think you need to know more, I recommend you the read my article about Let/Var/Const. here

Objects
this
Arrow Functions
Array.map()

Var

Var is one of the JavaScript variable keywords with is scoped to the function, it means you are able to reassign or re declare it.

Let

Let was introduced by ES6, because the var keyword was not scoped to the block where it was defined, therefore, the let keyword is used where the variable should be scoped within the block where it is defined.

Const

cont is similar to let ,however, you can not the reassign the const value.

Objects

You may know that an object is a set of key value pairs, I am going to explain object concept in the below example.

Here I defined an object using cont keyword called myObject. I added a few key pairs, the first one is course and we set it to a string and the second one is a function. When we have a function inside an object, we call that function as a method.

const myObject = 
{
course : "ES6",
learn : function() {}
};

In ES6 we have a clear and a simpler syntax to define a function inside an object. I defined another function called study, however, here I don't need to type a colon or function keyword, just a set of parenthesis and curly braces. Finally we have an object with three members, one property and two methods.
Let's discuss about how to access these members.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

Maybe you are familiar with dot notation method, where you can access the key value pairs of an object, for example myObject.learn(); . We also have another method to access the members of an object using bracket notation.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

myObject['course'] = "JavaScript";

The reason for using the bracket method is that, some times we don't know what property or method we are going to access. Let me explain it

Image target is an input field in a form and based on the user value we are going to access the member inside our object. So we have to pass the target inside the bracket and if its an input field we will have the value of "target.value".

This is what we call dynamically access of a property or a method inside an object.

const myObject = 
{
course : "ES6",
learn : function() {},
study() {}
};

myObject.course;

const target = "course";

myObject[target.value] = "JavaScript";

this

this is a special keyword in JavaScript, the problem with this is that it always confuse the JS developers because it doesn't behave the same as the this in other programming languages, it always return a reference to the current object.

here I have an object, the function inside this object is learn, let's console.log(this)to see what is this ?
let's call myObject.learn().

const myObject = 
{
course : "ES6",
learn() {
console.log(this)
},
};

myObject.learn();

Here is the console result!, you see that this is returning the reference of the object.

However, here we have a weird point in Javascript, this (this) do not always work that way. Let's see what I mean!

I defined a variable called learn using var keyword and set it to myObject.learn. You see that I didn't keep parenthesis in front of learn, here the learn which is before the = sign is the function. Let's console.log(learn).

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn;

console.log(learn);

Here is the console result, you can see that the function is displayed.

Now if I call the learn function I will get undefined instead of getting reference of the object, this is because this behave differently.

The value of this depends on how you call the function, if you call the function as an object method ( myObject.learn() ),it always give the reference of the object, however, if you call it outside of the object( learn() ), it gives global variable which is window. Here instead of window object, I got undefined, that is because the restrict mode is enabled by default.

restricted mode is used to execute JS code in a protective way.

How to solve this?

Here you should know that the JavaScript functions are object, here after my learn i selected the bind method and I pass myObject, this will return a new reference of my object. With bind method you can set the value of this permanently.

const myObject = 
{
course : "ES6",
learn() {
console.log(this);
},
};

myObject.learn();

const learn = myObject.learn.bind(myObject);

console.log(learn);

Arrow Functions

ES6 introduced more cleaner and proper method for declaring function, let's compare these two functions.
I rewrite the function called square in an arrow function method. To convert a JavaScript function to an arrow function method, you need to remove the function keyword and after the parenthesis we need a (=>), if there is no parameters for the function, just add an empty parenthesis. If the return is just a single line, you can remove the return and curly braces.
You can read the arrow function as number goes to number times number.

// Normal function
const square = function(number){

return number * number;

}

//Arrow function
const square = number=> number * number;

Array.map()

ES6 introduced a new method called map, its used to render a list of items. Let's discuss how to use map method.

Here I have an array called courses with four items, now let's imagine I need a sentence "I learned {courses}" for each item.
We call map method for this array and we have to use a callback function, this means that for each item in my array, map method calls this function. It takes each item of this array and return a new item. So, we have a function takes a course and return a new string like this ( "I learned " + color ). This method will return a new array, so let's defined it learnedCourses

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(function(course){
return 
' I learned '+ course;

})

Let's make this code more clear!

I converted the function to an arrow function.

Remove the function keyword.
If one parameter, you can remove parenthesis.
put (=>) after parameter.
We have only a single line of code, so remove curly braces and return.

const courses = ['PHP', 'Python', 'JS', 'Node'];
const learnedCourses = courses.map(course => ' I learned '+ course )

Let's discus about template string here, I want to change the single line of code. In ES6 instead of using single and double quotes, you can use { ` }character. Let's define it and in middle we can render course dynamically. Add a $ and curly braces, and inside the braces, that is the argument placeholder, whatever you put inside, it will be rendered dynamically, In this case course will be placed. This is what we call template literal.

...Due to the editor misbehave, I couldn't type the code, however, it looks like this.

That's all for part 1 🎉.

I hope you find this useful :)

Let's connect on Twitter

React Native layout properties!

Zahab Kakar — Sat, 07 Aug 2021 14:06:48 +0000

A simple guide with examples for React Native layout properties!

Content

flexbox
Shadow Prop Types IOS

flexbox

alignContent

Types

flex-start
flex-end
center
stretch
space-between
space-around

Description

determine how should children's components be aligned along the primary axis of their container.

Examples

### alignItems
Types

flex-start
flex-end
center
stretch

Description

determine how should children's components be aligned along the secondary axis of their container.
Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.

Default

stretch

Examples

alignSelf

Types

auto
flex-start
flex-end
center
stretch

Default

auto

Description

alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent.

Examples

Flexwrap

Types

wrap
nowrap

Description

Controls whether items are forced on a single line or can be wrapped on multiple lines.

Examples

Position

Types

relative
absolute

Description

position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.

Default

relative

Examples

Shadow Prop Types IOS

Name	Type	Description
shadowColor	customColorPropType	Sets the drop shadow color
shadowOffset	customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )	Sets the drop shadow offset
shadowOpacity	number	Sets the drop shadow opacity (multiplied by the color's alpha component)
shadowRadius	number	Sets the drop shadow blur radius

Thanks for reading!

Let's connect on Twitter

Const / Let / Var Which One Should You Use?

Zahab Kakar — Wed, 04 Aug 2021 08:50:30 +0000

Difference between var let and const

Var

Here I am going to explain the var keyword in the below function.
Let's define a function and call it hello.
Inside the function, I defined a (for) loop, so for var i we set the value 0 and as long as it's less than 3, increment it by one then it should print the numbers on the console and I called the function at the end.

function hello(){
     for(var i=0; i<3; i++){
        console.log(i);
    }
}

hello();

Here is the browser console result!

In most of the programming languages, when we declare a variable, that variable should only be accessible in the block where it is defined that's what we call scope, however, here if a console.log(i) is outside of the scope, it is still accessible.

function hello() {
  for (var i = 0; i < 3; i++) {
    console.log(i);
  }
  console.log(i)
}

hello();

We got i which is displayed because in the last iteration i became 3 and because 3 is not less than 3 we exit from the loop.

So when you declare a variable with the var keyword, that variable will be accessible inside the given function, and this is one of the weird points about javascript.

After 2015, two keywords were introduced by ES6, and that's let and const.

Let

let solved this problem, have a look!

function hello() {
  for (let i = 0; i < 3; i++) {
    console.log(i);
  }
  console.log(i)
}

hello();

When you declare a variable with let keyword, the variable is only accessible inside that block in which it is declared. let's see the result.

Here we got an error on the console, which is " i is not defined ".

Let me make it more clear,
The variable that declares with var keyword is scoped to the function, however, the variable which is defined with let keyword is only scoped inside the block in which it is defined.

So, use let keyword unless you have a valid reason for defining var keyword.

Const

Another new keyword in ES6 is const and it is used to define a constant.
const is also scoped inside the block in which it is defined, same like let, however, I show you the difference between let and const.

const x = 1;
 x = 2;

let's define a variable called x with const keyword and set it to 1, now we resign this to 2.

Let's see what we got!

You see, it's given an error that x is already defined. This means that the variable which is defined by the const keyword cannot be reassigned that's why we call it constant.
Use const over let and use let only when you need to reassign the variable value.

I hope you find this useful :)

Thanks for reading!

Let's connect on Twitter