Forem: clevercoderjoy

Variable Declarations JavaScript Edition

clevercoderjoy — Thu, 16 Feb 2023 19:57:26 +0000

What are variables?

Variables are just the names of memory locations with some values stored in them.

Why do we need them?

Imagine a scenario where you are asked to bring some water to drink. You bring water but that water is stored in some container. Why did you not bring only water?
Okay another one, imagine if we didn't have unique names given by our parents to uniquely identify ourselves. How would we call each other? Abey o human... idhar sun... Arey human sun na... O human sunte ho? Aji human, sunte ho... It would be so confusing to associate everyone with the word human.
So for this reason, we need variable names that uniquely identify each value memory in various different memory locations.

How do we use variables?

To use a variable, we will have to declare it first and then use the assignment operator " = " and initialize it with a value.

// This is how you declare a variable in javascript.
  a = 5;
  let b = 10;
  var c = 20;
  const d = 30;

If you don't know what " = " is or what it does then head on to my previous blog and read about it here.

Variables in JavaScript

In JavaScript, we can declare and use a variable in four ways.

1. Freestyle Declaration

In JavaScript, we can declare and use a variable by just writing the variable's name and giving it a value.
This means that we have declared a global variable.
A global variable is a variable that can be used from anywhere in the program.

// eg
  freeStyleVariable = 25;
  console.log(freeStyleVariable); // 25
  {
      freeStyleVariable = 35;
      console.log(freeStyleVariable); //35
  }
  console.log(freeStyleVariable); //35

If we see the above example, we have declared the variable and when we try to change its value inside the block, it gives the changed value as output outside the block too.
This is how a global variable behaves. It can be accessed from anywhere inside our code.
As convenient as it looks, this type of declaration is firmly not recommended as it creates ambiguity and results in unexpected errors.

2. var Declaration

var keyword allows us to declare variables that are functional scoped that can be initialized with a value either during declaration or later in the program.
Functional scoped means that the values that are declared with the var keyword can be accessed from anywhere inside the function where it has been declared.
Accessing a functional scoped variable outside its scope will throw a reference error.

// eg
  function varDeclaration(){
      var a = 14;
      console.log(a); // 14
  }
  console.log(a); // Reference Error

var declarations are hoisted.

What is hoisting?

Variables declared with the var keyword are created and given memory before they are initialized or assigned a value or any code is executed. This process is called hoisting.
The initial value of these variables will be undefined until the code execution reaches the line where these values have been initialized.

// example of var hoisting
var hoistingExample;
console.log(hoistingExample); // undefined
hoistingExample = 5;
console.log(hoistingExample); // 5

3. let Declaration

let keyword allows us to declare blocked scoped variables and can be initialized with a value either during declaration or later in the program.
This means that the variables declared inside a block can be accessed only inside that block. If we try to access these variables outside of the block it will throw a reference error.
Block is the region available inside the curly braces " {} ".

// eg
  let a = 10;
  {
      console.log(a); // Reference error
  }
  console.log(a); // 10

In the above example, accessing "a" from the block where it has not been declared will throw a reference error.
let can be accessed only after it has been declared and initialized which also means that let is not hoisted.
Many issues with let declarations can be avoided by declaring it on top of the scope in which it has to be used.
If the same let variables have been declared inside the same block, it will throw a syntax error.

// eg
let someVariable = 10;
let someVariable = 20;
// Uncaught SyntaxError: Identifier 'someVariable' has already been declared

To sum it all up, we can say that let is just a var with boundaries. So declare let not var.

4. const Declaration

const keyword allows us to declare constant variables that are block scoped just like let.
Constant variables are those variables whose values do not change throughout the program.
The primary key differences between let and const are:
A const variable has to be initialized with a value right at the time of variable declaration whereas let can also be initialized with a value at a later part of the code.
If the const declaration is not initialized during the variable declaration, it will throw a syntax error.

// eg
let a;
a = 50;
const b = 5;
const b;
// Uncaught SyntaxError: Missing initializer in const declaration

The value assigned to const cannot be changed by declaration or reassignment once it has been initialized whereas, in the case of let, the values can be changed.
If we try to reassign the const variable or redeclare it then it will throw a type error.

// eg
let a = 10;
a = 50;
const b = 20;
b = 60;
// Uncaught TypeError: Assignment to constant variable.

In case any object or an array has been declared as const, their values can be modified but the object or array can not be reassigned whereas, in the case of let, arrays and objects can be reassigned with a different value.
If we try to reassign a const array or object or if we try to redeclare it then it will throw a type error.

let obj = {name : "joy"};
obj = 10;
const anotherObj = {place : "lko"};
anotherObj.place = "ggn";
anotherObj = 50;
// Uncaught TypeError: Assignment to constant variable.

It is a good practice to declare const variables with all uppercase letters.
The variables declared as const are not hoisted.
let and const when declared are said to be in the temporal dead zone (tdz).

What is a temporal dead zone?

Imagine a baby inside a mother's womb. We know that the baby exists, but we can not touch and see it until and unless it has been born.
This is exactly what a tdz can be visualized as.
A variable that is declared as let or const is said to be in the temporal dead zone until the code execution reaches the line where the variable has been declared and initialized with a value.
While inside the tdz, the variables have not been initialized with a value yet, and any attempts to access these variables will throw a reference error.

This is all about the variable declaration in javascript. Drop down your comments and suggestions in case I have missed something. Any feedback will be appreciated.

Value Comparison Operators JavaScript Edition

clevercoderjoy — Tue, 14 Feb 2023 13:09:49 +0000

In JavaScript, we have three different value-comparison operators:

"="
"=="
"==="

What is ( = ) in programming languages?

A single equals symbol (=) is also called an assignment operator.
In simple terms, when I say " a = 5 ", this means that I am putting the value '5' inside the variable ' a '.
Now, when I try to print the value of ' a ', I will get the value ' 5 '.

const a = 5;
console.log(a); // 5

What is ( == ) in programming languages?

The pair of equal signs ( == ) when put together acts as a comparison operator.
This means that it will check for equality in the two values that are placed on both the left and right sides of this operator.

const a = 5;
const b = "5";
console.log(a == b); // true

We can see in the above example that the value of ' a ' is of Integer data type and the value of ' b ' is of String data type and when checking the equality for these values, it results in ' true '.
This means that this equality ( == ) operator does not consider the data type while checking for equality of the values. It only compares the values and if the values are the same, it results in ' true ' or else ' false '.
But before comparison actually takes place, coercion comes into the picture for this operator.
Coercion refers to the automatic conversion of one data type to another.
First, one of the values is converted from one data type into the data type that fits the other value. For eg: The string data type is converted to a Number data type.
After coercion, a comparison between the two values takes place.
For this reason, this operator is also called the loose equality operator.

What is ( === ) in JavaScript?

If we want to compare the data types also while checking for equality in values, then we have the triple equals operator ( === ) aka strict equality operator.
When used, this operator checks for equality in data types of the values along with equality in values.
If the values are of different data types then it will result in ' false '.

const a = 5;
const b = "5";
console.log(a === b) // false

We can see in the above example, even though the values are the same but they have different data types and for this reason, the expression results in ' false '.
Coercion does not take place here.
This operator checks for equality for data type along with the value, this operator is also known as the strict type operator.

This is all about the ( = ) operator in javascript.

JavaScript can be really tricky but I will make sure to explain these complex concepts and topics in as simple way as I possibly can.

ELI5 — Git: The Version Control System(VCS)

clevercoderjoy — Mon, 13 Feb 2023 14:53:05 +0000

What is git?

Git is an open-source version control system. Now, you might be thinking what the heck this means… but don’t worry, I will explain to you every single word that I have written like I am explaining to a 5-year-old.

Git is just a name that has been given to this version control system, which is an open-source software maintained by some amazing developers.
Version Control System is a system that has been developed to manage, maintain, and be in sync with your colleagues and other collaborators who are working on the same project.
There are projects, software, applications, etc being built, by some developers, and their source code is made available to the public so that developers around the world can see, go through the code, fix the existing issues, and contribute to the code base in order to maintain and improve the software. This is what exactly open source software means.

Why VCS?

Imagine a scenario, where you and two of your other friends are working from home because of covid, on a project that needs to be built with multiple features in it. Now, think of all the ideas by which you can collaborate with each other. If you think of sending the finished project files via email, then the attachments can be too large. If you think of doublt-tripple compression, even then the file will be too large, and another hassle to decompress the file multiple time comes into the picture. If you think that you will upload the files to a drive or something like that then there can be big conflicts in the file structure and can result in breaking the application.
So, exactly, for this reason, the version control system aka VCS was developed.

The VCS helps teams solve these kinds of problems. It tracks every individual change by each and every contributor and helps in preventing conflicts. It basically takes a snapshot of all the work you have done so far. Each of the contributors can work on their feature independently and merge everything into one after they are done with their work on the project.

How to use git?

To use git, like every software, we need to download and install git on our systems, and where do we download and install git from? We download and install git from here.

What after installing git?

After installing git, open your terminal and type:
git --version
This will show you the currently installed version of git.
To work with git or in other words, in order for git to track all the changes in the project, you need to ask git to do that for you, and how do you ask git to track your project? You simply type:
git init
This command will initialize an empty git repository for you. Basically, this means that git will now start to track all the changes made in your project.
Git will also tell you the status of all the tracked and untracked files when you type:
git status
For git to add the files to its tracking list, you will need to add the files manually by using the command:

git add file_name
# if you want to add all the files to the tracking list, then use the command:
git add .

After adding the files to the tracking list, you will need to confirm that you want to make the changes permanent by committing that change in the tracking list by using the command:
git commit -m 'commit-msg'
If you want to work on a different feature of the project that you are building and work in a way that the changes you make in your code do not change anything in the final code until you are satisfied with your work then you can create different branches by using the command:
git branch branch-name
You can create multiple branches and work on various features independently of other features by creating numerous branches.
To get an overview of all the branches you or your teammates have created so far you can use the command:
git branch
To switch between various created branches you can use the command:
git checkout branch-name
To combine the work you and your friends have done you can use the command:
git merge branch-name
To send your changes to production, you will need to push your code to your repository by using the command:
git push remote-repository branch-name
If you want to check the history of everything that has happened to a git repository then you can use the command:
git log

What are this production and repository?

Production is the final environment in a software development process. When a code is pushed to production, all the changes made in the code are finally available for the public to use.
A repository is the collection of files and folder structures containing all the different versions of a project.
If you have to collaborate on some existing projects that are already being worked upon, then you will need to pull the code from your GitHub or GitLab account by using this command:
git pull remote-repository-url

What is a remote repository?

A remote repository is a repository that is not on your local system but at a remote location like GitHub or GitLab.

What are GitHub and GitLab?

Github, Gitlab, and there are other services also. These are the companies that offer cloud-based git repository hosting services which makes it easier to collaborate on any project.

This is all the information that was required to understand the version control system — git. I have covered all the basic and most used commands that we use in our day-to-day life as software developers. I tried to explain everything in a way as if I was explaining to a 5-year-old.

Drop down your comments, suggestions, or something important that I missed. I will try to cover it in my next blog.

If you want to get in touch with me or know more about me then just google “clevercoderjoy”.