Day 19 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-06-19 06:49:56

Hey reader👋 Hope you are doing well😊
In the last post we have talked about about Math library, RegEx and destructuring in JavaScript. In this post we are going to know about hoisting and interpolation in JavaScript.
So let's get started🔥

## Hoisting in JavaScript

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase. This means that you can use variables and functions before you declare them in your code.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17q26n7m9kjet6bsxis3.png)
So here you can see that we can use `x` before it is declared this is what hoisting is.

**Hoisting of variables**

For variables declared using var, the declaration is hoisted to the top, but the initialization stays in place. Until the code execution reaches the line where the variable is initialized, it will have a value of `undefined`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiwexfx9yvlv70tc67bp.png)

For variables declared using `let` and `const`, the declarations are also hoisted, but they are not initialized. Accessing them before their declaration results in a `ReferenceError`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vx0e5gzbwj8az3bdmbj4.png)

**Function Hoisting**

Function declarations are hoisted entirely, including their definitions. This means you can call a function before you declare it in the code.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/soqybe0hzy16x6vkrqxd.png)
However, function expressions (both regular and arrow functions) are treated like variables and only the variable declaration is hoisted, not the assignment.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz0lzshbdt8wvmzao2i6.png)

## Interpolation in JavaScript

String interpolation is a great programming language feature that allows injecting variables, function calls, and arithmetic expressions directly into a string. String interpolation was absent in JavaScript before ES6.
Let's see how string concatenation works-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uchvcbaddqxf70j2rzdr.png)
Here you can see that we can easily use variables in string by just concatenating them to the string. But this becomes very complex and tedious with large strings. This is why interpolation that is use of ``(backticks) and $ {expression} were introduced in ES6. 
Let's see the above code using interpolation-:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jasrhsm5rkiivxe4f4tk.png)
You can see that now we don't have to worry with adding whitespaces like `" "` and complex concatenation.
Interpolation is just use of JavaScript expression in string.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wu9o2bwcakrp1d0j685.png)
You can see that how we are easily using ternary expression in string using interpolation.

So this was it for this blog. I hope you have understood it well. In the later blogs we are going to see some more important concepts of JavaScript. Till then stay connected and don't forget to follow me.
Thankyou 🩵