DEV Community: Yash Kalaria

var, let and const : ✨demystified✨

Yash Kalaria — Fri, 25 Mar 2022 03:48:06 +0000

Hello folks. Welcome to my another post.

In this post, we will learn about var, let and const from the basics to the magical parts of it. So please bear with me till the end.

Variables

Variables in programming languages are means to store information in memory and assign a human-readable label to it for future references.
There are a few rules for variable naming:
- The name must contain only letters, digits, or the symbols $ and _
- The first character must not be a digit
- It can't contain any whitespace characters
- There are some reserved words that can't be used as variable names
In Javascript, there are two types of variables: Primitives and Reference types. Boolean, string and number are examples of primitive types while objects and arrays are examples of reference type.
Javascript is a dynamically typed language. That means we can assign different types to different variables without having an error(for var and let keywords and not const)
In Javascript, we can declare a variable using var, let and const.

Some of the terms that I will be using in this post

Scope

Scope in Javascript refers to the variable's accessibility in the code. Based on the scope of a variable, some variables can be accessed in some part of the code while some can't be accessed in that part of the code.
There are three types of scopes: Global, Function and Block.
- Variables declared at the top level(outside any function) are global scoped. They can be accessed throughout the program.
- Variables declared inside a function are function scoped and can only be accessed inside that function. It will throw a reference error if tried to access outside the function.
- Variables declared inside {} are called block scoped and their accessibility depends on the keyword that was used to declare them(from var, let and const).

Scope chain

Javascript creates scopes for every executing function and {} block. There is also a global scope that holds some special values and variables that are in the global scope.
Each scope has access to the parent scope in which it is defined. By using it, the current scope can access the variables from the parent scope. This creates a chain of scope which is called a scope chain.

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, before execution of the code.

I won't be going deep into any of these topics right now. (Maybe in the future posts 😉)

Now let's learn about var, let and const.

var

The var keyword is an old way of creating variables in Javascript.
Javascript engine doesn't throw an error if we try to create two variables of the same name in the same scope using var. If the second statement is an assignment then it will replace the value within the variable. If the second statement is just a declaration then it will be ignored. Javascript engine won't throw an error here.

var test = "Hello";
var test;
console.log(test); // Hello
var test = "Nice";
console.log(test); // Nice

The scope of a variable declared with var is its current execution context and closures(Maybe in the future post). In simpler words, var declarations are function scoped and accessible inside that function and variables that are declared in the global scope are accessible anywhere.

function testFn() {
  var test1 = "Hello";
  if (true) {
    var test2 = "Nice";
  }
  console.log(test1, test2); // Hello Nice
  function innerFn() {
    var test3 = "Wow";
    console.log(test1, test2); // Hello Nice
  }
  // test3 is not accessible here.
  // It will throw a ReferenceError.
}
testFn();

// test1, test2 and test3 are not accessible here. 
// They will throw a ReferenceError.

When using var, we can modify or re-assign any type of primitive values or reference values.

var test = "Hello";
test = "Nice";
console.log(test); // Nice
test = 5;
console.log(test); // 5
test = ["wow"];
console.log(test); // ["wow"]

var declarations are hoisted and initialized with the value undefined. What this means is that we can use a variable before it is declared but it won't have any value till any one of the assignment statement gets executed.

console.log(test); // undefined
// It didn't throw an error 🙂
var test = "Hello";

let

let keyword is used for creating block scoped variables.
Unlike var, we can't have two variable declarations using let with the same name inside the same scope. It will throw an error.

let test = "Hello";
let test = "Bad"; 
// SyntaxError: Identifier 'test' has already been declared

The scope of a variable declared with let is the curly brackets containing the variable and for the global scope, it is accessible after the declaration throughout the program.

if (true) {
  let test = "Hello";
  console.log(test); // Hello
}
console.log(test); // ReferenceError: test is not defined

let declarations are also hoisted but not initialized. That means accessing a variable before its declaration will throw an error.

console.log(test); // ReferenceError: test is not defined
let test = "Hello";

Same as var, when using let, we can modify or re-assign any type of primitive values or reference values.

const

let and const are the same. The only difference is in the modification and re-assignment of the variable.
All the variables declared using const and having a primitive value can't be modified or re-assigned. It will throw an error if tried to do so.

const test = "Hello";
test = "Wow"; // TypeError: Assignment to constant variable.

All the variables declared using const and having a reference type value, can be modified but can't be re-assigned.

const test = ["Hello"];
test.push("World");
console.log(test); // ["Hello", "World"]
test = ["Wow"]; // TypeError: Assignment to constant variable.

Now let's demystify some of the magical cases.

Case 1

Let's try to assign a value to a variable before its declaration with let(orconst) and see what happens.

test = "Bad"; 
// ReferenceError: Cannot access 'test' before initialization
let test = "Hello";

As expected, this gives an error. But a lot is going on here and let's try to understand it.
Here test is declared using let, so it will get hoisted, but it won't get initialized. Since it doesn't get initialized, trying to assign it a value will give an error "Cannot access 'test' before initialization".
Now let's try to do the same thing with var and see what happens.

console.log(test); // undefined
test = "Wow";
console.log(test); // Wow
let test = "Hello";
console.log(test); // Hello

Here var declaration is first hoisted and then initialized with the undefined value which is why the first console will print undefined.
Then as the variable is initialized assigning a value Wow to it works fine and the second console prints Wow.
When the Javascript engine comes to the let declaration it simply assigns the value Hello to it and that is why the third console prints Hello.

Case 2

Let's see an interesting case with hoisting and variable shadowing.

let test = "Hello";
if (true) {
  let test = "Wow"; // Will this throw an error???
  console.log(test); // Will this execute???
}
console.log(test);

Let's try to dissect it.
Here we have declared a variable named test and initialized it with the value Hello.
Then when it enters the if block, it will create a new scope. As always, Javascript will hoist the declaration of the test variable and it won't get initialized as it is declared using let.
Then the Javascript engine will assign it the value Wow. It will work as the let is block scoped and Javascript can have the same named variables in different scopes.
Now when we reach the console Javascript engine will try to find the variable in the current scope and as the current scope has the variable with the name test it will use it and it won't use the variable from the parent scope. This is called variable shadowing.
As the inner variable's scope is over with if's curly brackets, the last console will print Hello.
Let's look at an example with a small variation.

let test = "Hello";
if (true) {
  console.log(test); // 🤔
  let test = "Wow";
  console.log(test);
}
console.log(test);

Here when the Javascript engine enters the if block, it will create a new scope. As always Javascript engine will hoist the declaration of the test variable and it won't be initialized as it is declared using let.
So as we can guess now there is a variable with an uninitialized state in the current scope so Javascript won't use the parent value and throw ReferenceError: Cannot access 'test' before initialization.
Now let's look at the same example using var

var test = "Hello";
if (true) {
  console.log(test); // 🤔
  var test = "Wow";
  console.log(test);
}
console.log(test);

Here when the Javascript engine enters the if block, it will create a new scope. As always Javascript will try to hoist the declaration of the test variable but the variables declared using var are not block scoped, they are function scoped.
Javascript engine will not hoist it as a same named variable is already there in the current scope. So the first console will use the value from the parent which is Hello.
When the engine reaches the declaration of the test variable inside the if block it is treated as the declaration of the same named variable as the var is function scoped and the engine will simply assign the value Wow to the test variable and the second console will print Wow.
As the parent variable is re-assigned with the new value, the third console will also print Wow.

Bear with me there is more 😁

Case 3

Let's look at an interesting case of var inside the if block.

if (false) {
  var test = "Hello";
}
console.log(test); // Reference error??? 🤔

Here as we can see that the if block doesn't get executed as the condition, is false, so it should throw a Reference error. Right? Right???
Well here it won't throw a Reference error and instead, it prints undefined 🙂.
The reason for this is that the Javascript engine still hoists the test variable even if this code doesn't get executed and our global scope is now polluted with an extra unnecessary variable. One of the reasons why you should avoid using var 😅.
In the older code you may see an interesting pattern called IIFE - Immediately Invoked Function Expression through which people avoided the scope pollution.

if (false) { // or true
  (function () {
    var test = "Hello";
    // Some code that uses test
  })(); // Note the invocation here
}
console.log(test); // ReferenceError: test is not defined

Here we have created an anonymous function and immediately called it. Javascript treats it as an expression(thus IIFE).
As we know that the var is function scoped and thus it can't be accessed outside the anonymous function.

Case 4

Let's look at some of the weird cases of the variables declared using var in the case of for loops. Let's start with a simple example.

for (var i = 0; i < 3; i++) {
  // Do something
}
console.log(i); // 3

As we can see here that the console prints the value 3 and that is because the variables declared using var are function or global scoped and not block scoped. So here i is accessible even after the for loop. Again scope pollution 🙂.
Let's look at another famous for loop problem with var

var fnArray = [];
for (var i = 0; i < 3; i++) {
  fnArray[i] = function () {
    console.log(i);
  };
}
for (var j = 0; j < 3; j++) {
  fnArray[j]();
} // 0, 1 and 2 ??? 🙂

Here we may think that it should print 0, 1 and 2 but it won't and let me tell you why.
Here we have created an array named fnArray and we have pushed some functions in it which is using the variable i from the for loop.
We know that var is function scoped so its accessibility doesn't have to do anything with the for loop. The function is using the variable i but it will only access its value when it is being executed.
In the last iteration of the first for loop, i++ will be executed with the value 2 and it will become 3 which will stop the loop. Now variable i will be accessible outside the for loop with value 3.
Now when the second for loop gets executed, it will call the anonymous function which will try to console the value of the variable i and as the value of i is now 3 it will print 3 three times.
This problem can be solved easily by using let in the first for loop.

var fnArray = [];
for (let i = 0; i < 3; i++) {
  fnArray[i] = function () {
    console.log(i);
  };
}
for (var j = 0; j < 3; j++) {
  fnArray[j]();
} // 0, 1 and 2 as expected

This will work because the let variables are block scoped. So each iteration of the for loop will create a scope and it will hold the value of i for that iteration.
So when the function will try to access the value of i, it will see the correct value in the scope created by the for loop and print 0, 1 and 2 as expected.

Summary

So that's it for today folks 😅.
Thanks for bearing with me till the end. Give the post a Heart if you liked the post and give a comment or ping me in case I have missed anything.

You can reach me on:

[2021] Setting up Husky pre-commit hook with ESLint, Prettier and lint-staged for React and React Native.

Yash Kalaria — Mon, 09 Dec 2019 09:55:52 +0000

Hello folks. I hope you all are doing well.
In this post, we will talk about how you can setup Husky pre-commit hook with ESLint, Prettier and lint-staged to avoid bad commits and properly format code before committing. So let's get into it.

What is Husky?

Husky lets us run commands or script before committing or pushing our code to git. There are a lot of other use cases of Husky too but we will only be using pre-commit hook for this article.

What is ESLint?

ESLint is a tool that can analyze our code and find errors in that code using ESLint rules. It can also fix some errors on its own.

What is Prettier?

Prettier is an opinionated code formatter that can format our code with the help of rules that you set or defaults are used.

What is lint-staged?

lint-staged can run multiple linters against staged git files which in our case are ESLint and Pretttier.

Setup new React or React Native project.

For React use
npx create-react-app demo
cd demo

For React Native use
npx react-native init demo
cd demo

Let's install some necessary libraries.

npm i -D husky lint-staged eslint-config-airbnb prettier

Here we are saving these modules as devDependencies to specify that these are only required in the development and not in runtime. I am using Airbnb's pre config file for ESLint. You can also go plain if you want to setup all ESLint rules by your self or you can also extend multiple pre configs like this.

Setting up ESLint

Replace or create .eslintrc.js file with the following code. If you have created a React project then remove "eslintConfig" from the package.json file as we have created a separate configuration file for the ESLint.

It is advisable to extend "react-app" for React projects and "@react-native-community" for React Native projects. These files are automatically installed so you don't need to worry about them. Just append this to the start of the array in the extend option in the file.

Setting up Prettier

Replace or create .prettierrc.js file with the following code.

Setting up Husky pre-commit hook and lint-staged

In the latest versions of Husky we need to enable Git Hooks and then create and add the pre-commit hook. To do that run the following commands in the terminal.
npx husky install
npx husky add .husky/pre-commit "npx --no-install lint-staged"

Make sure to commit the auto-generated husky folder to your Git repo.

The above code will run lint-staged command against the staged files before committing. Make sure to run npx husky install if you clone your Husky configured git repo.

So now let's add the lint-staged in our package.json file.

Open your package.json file and add the code that I have specified at the same level as dependencies.

The above code will run Prettier and ESLint rules against all js,jsx,ts,tsx staged files. You can also specify more file extensions or you can write a script for a specific folder you want.

Read Also: How React Native Improves Developer Productivity

So yeah that's it. Now when you will try to commit any changes, ESLint and Prettier rules will execute and it will format your code and give you errors if there are any and stop you from causing any bad commits.

Note: If you get dependency errors for eslint-plugin-jsx-a11y or eslint-plugin-import while commiting, then also install them as devDependencies.

At BoTree Technologies, we build web and mobile applications to add value to our client’s business. We align ourselves to ensure that our client benefits the most out of our engagement.

We work in Ruby on Rails, Python, Java, React, Android, iOS and RPA as well.

Drop us a line to discuss how can we help take your business to the next level. Reach out to learn more about the software development companies in NYC for the various ways to improve or build the quality of projects and across your company.