JavaScript is tricky.
There are many scenarios that will confuse how it works because the output might be different in two different cases.
But after understanding the basic concepts of Javascript in detail, you will feel confident about the expected output or the results.
In this article, we will try to understand some core concepts that will help you understand the Javascript concepts and clear your doubts.
Before going further, kindly bookmark this post to revise the terms from time to time and keep the article handy.
Let us get started.
Table of Contents
Scope:
Variables that are created inside a function are only available within that function, which is called block scoping.
These variables if accessed outside the function will throw an error.
Always return the value inside a function, so it will not produce an error while calling the function.
Function scoping:
If a variable is declared inside a function and we try to access it outside the function, then it will throw an error.
Hoisting:
Functions that are declared with the function keyword are called hoisted.
If functions are called before their definition in a file, it will work. But in the case of function expression, that is storing a function in a variable and calling it before definition will throw an error.
What JavaScript does is hoist all the functions in the file and locate them up in the file internally known as global context.
Hoisting is when variable declarations and function declarations are hoisted to the top of the file.
But variables containing functions are not stored in a global context and therefore JS throws an error:
Uncaught ReferenceError: Cannot access ‘variable name’ before initialization.
First class citizens in JS:
Javascript allows you to store the functions in a variable. The ability to store a function in a variable is termed as first-class citizens.
example:
const doctor = function (name) {
return Dr. ${name};
};Closures:
Closures are the ability of a child function, or an inner function, to access variables from a higher level scope even after the functions have been called or closed or closed over.
Arrow functions:
Arrow functions are nothing but a shorthand version of the traditional function.
Consider the below examples:
function inchesToCm(inches){
const cm = 2.54*inches;
return cm;
}Converted to Arrow function:
const inchesToCm = (inches)=>{
return 2.54*inches;
}
Arrow function eliminates the function keyword and shortens the function body.
We can also convert the explicit return into an implicit return statement. An explicit return is when you type the return keyword before returning a value. Implicit return means we do not need to type the return keyword.
Example:
const inchToCM = (inches) => inches * 2.54;Timer Callback functions:
setTimeout();
It takes two things:
- a function to call after a certain amount of time
- a duration in milliseconds (after how long should I run this)
So let’s do 5000 milliseconds which is one second later.
setTimeout(function () {
console.log("Time to execute");
}, 5000);Maps in JS:
Maps are similar to objects, but with a few differences.
We can create a map using the new keyword followed by Map().
var myMap = new Map();These are some of the most widely used terms in Javascript. These Javascript concepts will improve your fundamental knowledge when you will code in JS.
This post will be updated regularly and we will keep adding more commonly used terms and understand them with basic examples.
Recommended reading:
