Are you preparing for your next interview? Go through this and you are ready to go crack that interview.
✔️ var, let and const
❓ Difference between var, let and const
❓ Sample Code
var a = 1
var a = 2
let b = 1
let b = 2
const c = 1
const c = 2
console.log(a) // 2
console.log(b) // Syntax Error
console.log(c) // Syntax Error
🚩 Hoisting
Hoisting is JavaScript's default behavior of moving declarations to the top.
function and var declarations are hoisted. It is important here to note that the var declarations are hoisted and not the values.
❓ Sample Code
function logger() {
console.log(num)
var num = 1
}
logger() // undefined
// Why is it undefined? Also, why undefined & not error
// This is how it is considered during runtime
{
var num
console.log(num)
num = 1
}
✔️Array Methods
The most commonly asked methods are map, filter, find, reduce, forEach
Let's check a few examples of usage and solve problems
// Return the words with more than 5 letters
const words = ['html', 'react', 'graph', 'interview', 'javascript']
const response = words.filter((word) => word.length > 5)
console.log(response) // ['interview', 'javascript']
❓Difference between map and forEach
map returns a new array, forEach doesn't return a new array
// Return a new array where even numbers are multiplied by 2
let arr = [1, 2, 3, 4, 5, 6, 7]
function logToConsole(arr) {
let res = arr.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
console.log(res) // [1, 4, 3, 8, 5, 12, 7]
}
logToConsole(arr)
function logToConsole(arr) {
let res = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
console.log(res) // undefined
}
logToConsole(arr)
map and forEach does not mutate the array on which it is called.
map can be chained with methods like reduce(), sort(), filter().
method chaining can be done in map but not forEach
If you plan to change or use the data, you should pick map. But if you won't need the returned array, use forEach.
✔️ this
this refers to the object that the function belongs to, when put in a simpler way, it points to the owner of the function call. Its value depends on how it is invoked.
❓Implicit vs Explicit Binding
Implicit binding is when you invoke a function in an object using dot notation.
Explicit binding is when you force a function to use a certain object as its this. Ways to do explicit binding are call, apply and bind
//Implicit Binding
function newFunc() {
console.log(this)
}
const obj = {
bool: true,
newFunc: newFunc,
}
//Explicit Binding
const details= {
name: 'Raju',
country: 'India',
displayLocation: function () {
console.log(this.name, 'stays in', this.country)
},
}
details.displayLocation()
// creating an object newDetails and trying to use displayLocation
const newDetails = {
name: 'Ramu',
country: 'Australia'
}
// answer
newDetails.displayLocation.call(newDetails )
✔️ Async and defer
This is an important topic which is asked in interviews.
async and defer are boolean attributes, which are used to specify how the external scripts are to be loaded.
async is used to load an external script which is not dependent on the execution of any other scripts. async does not guarantee the order of execution of scripts.
If there are multiple scripts which are dependant on each other, use defer. These script are executed in the order in which they are defined.
💾Local and session storage
localStorage: Data persists even after closing your session
sessionStorage: Data is lost when your session is over, which means on closing the browser or the tab, the data is lost.
// save to localStorage
localStorage.setItem('key', 'value')
// get saved data from localStorage
let data = localStorage.getItem('key')
// remove saved data
localStorage.removeItem('key')
// The same applies to sessionStorage
⏱️ Timers - setTimeout, setInterval, clearInterval
setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
setInterval() method does the same for specified intervals.
clearInterval() is used to stop the timer.
console.log('JavaScript')
setTimeout(() => {
console.log('Hello')
}, 0)
console.log('World')
// output
JavaScript
World
Hello
Let's check an even more interesting example:
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i)
}, i * 1000)
}
// output
6
6
6
6
6
We would have expected an output like 1 2 3 4 5. But we get an entirely different output. This is because the entire loop has finished running and the value of i has become 6.
Now, if we want the output to be 1 2 3 4 5, all we have to do is change var to let.
This works because var is globally scoped but let is locally scoped so for let a new i is created for every iteration.
That's it for this blogpost. I will make another blog post where I'll cover a few advanced topics.
Share and comment if you found this helpful.
I have some amazing🧵 on Twitter .