Difference between var, let and const
| var | let | const |
|---|---|---|
| The scope of a var variable is functional scope. | The scope of a let variable is block scope. | The scope of a const variable is block scope. |
| It can be updated and re-declared into the scope | It can be updated but cannot be re-declared into the scope. | It cannot be updated or re-declared into the scope. |
| It can be declared without initialization. | It can be declared without initialization. | It cannot be declared without initialization. |
| It can be accessed without initialization as its default value is “undefined”. | It cannot be accessed without initialization otherwise it will give ‘referenceError’. | It cannot be accessed without initialization, as it cannot be declared without initialization. |
| hoisting done , with initializing as ‘default’ value | Hoisting is done , but not initialized (this is the reason for error when we access the let variable before declaration/initialization. | Hoisting is done, but not initialized (this is the reason for error when we access the const variable before declaration/initialization. |
Difference between Map, forEach, fiter and find
1.Map
One of my favourite and most used array method of all time. As a ReactJS developer I use map a lot inside my application UI. Map like filter & foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.
Let’s understand map with an example
var sample = [1, 2, 3] // i am never gonna change Boo! Yeah
// es5
var mapped = sample.map(function(elem) {
return elem * 10;
})
// es6
let mapped = sample.map(elem => elem * 10)
console.log(mapped);
/* output */
[10, 20, 30]
Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array. Like filter, map also returns an array. The provided callback to map modifies the array elements and save them into the new array upon completion that array get returned as the mapped array. And last but not least …
2.Foreach
The easy one right ? we all know why this method is used for and even you don’t know about this method the name pretty much explains everything. Foreach takes a callback function and run that callback function on each element of array one by one..
Let’s understand map with an example
var sample = [1, 2, 3];
// es5
sample.forEach(function (elem, index){
console.log(elem + ' comes at ' + index);
})
// es6
sample.forEach((elem, index) => `${elem} comes at ${index}`)
/*
output
1 comes at 0
2 comes at 1
3 comes at 2
*/
For every element on the array we are calling a callback which gets element & its index provided by foreach. Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them. okay! so clear ? then let’s filter some arrays.
3.Filter
Whenever you have to filter an array Javascript inbuilt method to filter your array is the right choice to use. Filter let you provide a callback for every element and returns a filtered array. The main difference between forEach and filter is that forEach just loop over the array and executes the callback but filter executes the callback and check its return value. If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.
Let’s understand map with an example
var sample = [1, 2, 3] // yeah same array
// es5
var result = sample.filter(function(elem){
return elem !== 2;
})
console.log(result)
// es6
var result = sample.filter(elem => elem !== 2)
/* output */
[1, 3]
See how easy it was. We passed a callback to filter which got run against every element in the array. In the callback we checked if the element !== 2 if the condition fails ( when elem was equal to 1 or 3 ) include them into the resulting array else don’t include the element in the resulting array. Also take notice filter does not update the existing array it will return a new filtered array every time.
4.Find
The find() method returns the value of the first array element that satisfies the provided test function..
Let’s understand map with an example
let numbers = [1, 3, 4, 9, 8];
// function to check even number
function isEven(element) {
return element % 2 == 0;
}
// get the first even number
let evenNumber = numbers.find(isEven);
console.log(evenNumber);
Why should you use template string
JavaScript has never had an elegant way of handling string until the launch of ES6. ES6 introduces something know as template literals, which enable JavaScript to handle multiples lines of strings more efficiently and elegantly.
Syntax For Template LiteralsTemplate literals do not intend to add additional functionality to the existing JavaScript stings but try to solve the problem in a new way. Hence, the introduction of the new syntax. Instead of using single quotes or double quotes, you can delimit strings using backticks (`).
// This is how strings were declared pre ES6
var earlierStrings = 'How strings were declared pre ES6';
// Declaring strings using template literals in ES6
let templateLiterals = `How strings can be declared post ES6`;
console.log(typeof earlierStrings); // "string"
console.log(typeof templateLiterals); // "string"
Template Literals Are An Answer To Multiline Strings In JavaScript
Multiline strings have always been a problem pre ES6 because the strings were declared using double quotes and single quotes. This was a problem because when you are declaring strings using double quotes or single quotes, the stings must completely be contained in a single line. Let’s look at how developers used to insert multiple lines of HTML in your JavaScript code to understand how template literals can be a boom.
var profile = '' +
' \n' +
'\n' +
' John Doe \n'
'\n' +
' Web Developer\n'
'\n' +
' \n';
Populating data dynamically using template literal substitutions
Template literals are not just a fancy way of declaring strings in ES6. The real power of template literals can be understood using the substitutions. Using substitutions you can dynamically populate data within the strings declared using template literals much like you would be able to do using a templating engine. Let’s look at the following example:
let data = {
name: 'John Doe',
designation: 'Web Developer'
}
let profile = `
${date.name}
${data.designation}
`.trim();