JavaScript represents one of the three (most common) pillars of the internet, with HTML and CSS providing the structure and style (respectively) and JavaScript giving life to web pages. At this moment in time, it doesn’t seem that JavaScript is going anywhere anytime soon. The language is used by over 95% of all websites. All aboard the JS train.

In this post, I will be discussing four of the most important JavaScript concepts to master as a web developer.

# 1. IIFE

IIFE, aka, Immediately Invoked Function Expression, are JavaScript functions defined as expressions that are immediately invoked and executed as soon as they are defined. Variables that are declared within an IIFE are unable to be accessed externally, thus avoiding global scope pollution. As such, the primary reason to incorporate IIFE is immediate code execution and the resulting data privacy.

The syntax for defining an IIFE can be seen in the following example:

(function(a,b){         
     return a + b; 
})(10,20);

You can also use an arrow function in defining an IIFE:

(() => {     
    //... 
})();

# 2. Scope

Scope if referencing variable access, which variables you have (or do not have) access to in different contexts. In JavaScript, the default scope is window scope (aka the root scope). The scope can be visualized as a box of boundaries for variables, objects, and functions which includes restrictions on variables and determines whether you are able to access the variable or not. This limits both the visibility and accessibility of variables to other parts of your code. Having a strong grasp of this concept is essential for a developer. Scope can be either local or global — local scope allows for access to everything within the boundaries while global scope is everything outside of these boundaries. Global scope is unable to access variables defined within local scope as it is enclosed within boundaries unless it is returned.

For example, say you have a function in which you define a variable —

function sayHello() {
    let greeting = "Hello";
}
sayHello()
console.log(greeting); //a ReferenceError is returned stating that 'greeting' is not defined

This ReferenceError is returned as ‘greeting’ is defined within the local scope of the sayHello function, as such it is impossible to access the variable outside of the function.

3. Closures

In a previous post, I go into more depth regarding closures, if interested in a deeper dive into closures I will link the post below, but will surmise here as well.

A closure is a function within another function that is able to access variables defined within the outer function. This inner function is technically the closure and again is able to access variables defined within the parent (or outer) function, as well as variables defined within its own scope and global variables. However, the parent function does not have access to the variables of the inner function.

Closures are helpful to employ when you would like to pass variables, arrays, or methods from an outer function to an inner function in order to extend behavior.

4. Hoisting

Without knowledge of Hoisting, many developers experience unexpected results from their JavaScript code. Within JavaScript, you are able to call a function before it is defined without receiving a ReferenceError. This is because the JavaScript interpreter moves variable and function declarations to the top of the current scope (whether local or global) prior to execution — this is called Hoisting.

For example —

onePlusOne();
function onePlusOne(){
    console.log(1 + 1); 
}
//2 is returned in console

Read More

Deploy React App using AWS Amplify

How to Fetch API data with Axios and display it in a React app with hooks