Javascript Interview Questions ( Functions ) - Hoisting, Scope, Callback, Arrow Functions etc

Functions in JavaScript

In this video, we will discuss different types of functions, their scope, how they are hosted, the ES6 version of function and a lot of important interview questions.

Function Declaration and Expression

• A function declaration is when we declare a function using the function keyword followed by the name of the function.

• A function expression is when we store a function inside of a variable.

• An anonymous function is a function without a name that can be assigned to a variable or passed as a callback.

First-Class Functions

• Functions in JavaScript are first-class functions because they can be treated like variables.

• First-class functions allow us to pass them into other functions, manipulate them and return them from those functions.

Immediately Invoked Function Expressions (IIFE)

• IIFE stands for immediately invoked function expressions. It allows us to call a function right after it's defined without needing to assign it to a variable first.

• An IIFE with an inner anonymous function can access variables from its parent scope through closure.

Understanding Function Scope in JavaScript

In this section, the speaker explains function scope in JavaScript using examples from the official MDN docs. The speaker also discusses an output-based question on function scope and how to answer it.

How Function Scope Works

• Functions have access to variables defined in their outer scope.

• When a variable is not defined inside a function, it is taken from the global scope.

• If there is a copy of a variable inside a function, that copy will be used instead of the one in the outer scope.

• Shadowing occurs when local variables with the same name as global variables are defined inside a function.

Output-Based Question on Function Scope

• The speaker presents an example of a for loop with setTimeout and asks what the output will be.

• Since let has block scope, each iteration of the loop creates its own block scope for i.

• If var was used instead of let, all iterations would use the same value of i.

Hosting Variables and Functions in JavaScript

In this section, the speaker explains how hosting works for variables and functions in JavaScript.

Hosting Variables

• Variables are hosted at the top of code before execution.

• If you log a variable before it is declared, you will get undefined due to hoisting.

Hosting Functions

• Functions are hosted completely differently than normal variables.

• A function can be called before it is declared because it is hosted completely.

• The complete function is copied to its respective scope.

Function Scope vs Global Scope

• Inside a function, we have function scope which works exactly like global scope but only within that specific function.

Function Hosting

In this section, the speaker discusses function hosting and how it works. They explain a tricky output-based question on function hosting and discuss the difference between local and global variables.

Local vs Global Variables

• When a variable is present in a scope, we will not check the global scope.

• The value of x will be undefined because of hoisting.

• Hoisting is a two-step process that initializes the complete code by first initializing the global scope, then coming to the local scope and initializing it as well.

Params vs Arguments

In this section, the speaker explains what parameters and arguments are in functions.

Parameters vs Arguments

• Values passed into a function are called arguments.

• Values received inside of a function are called parameters or params.

Spread vs Rest Operators

In this section, the speaker explains spread and rest operators in JavaScript functions.

Spread Operator

• The spread operator is used to pass an array's values to a function.

• It uses three dots followed by an array name (e.g., ...arr).

Rest Operator

• The rest operator is used to receive multiple arguments as an array.

• It uses three dots followed by a parameter name (e.g., ...args).

Combining Concepts - Params, Arguments & Rest Operator

In this section, the speaker combines concepts from previous sections to explain how they work together.

Combining Concepts

• When using rest or spread operators in functions, they should always be at the end of the list of parameters so that they take all remaining arguments.

• If not placed at the end of parameter lists, an error will occur.

Callback Functions

In this section, the speaker explains what callback functions are in JavaScript.

Definition of a Callback Function

• A callback function is a function passed into another function as an argument and then invoked inside the outer function.

Callback Functions

In this section, the speaker explains what a callback function is and provides examples of how they are used in JavaScript.

Definition of a Callback Function

• A callback function is when a function is passed as an argument to another function and then called inside that function.

• Examples of predefined JavaScript functions that use callbacks include setTimeout, map, filter, and reduce.

• Event listeners are also an example of using a callback function.

Arrow Functions

In this section, the speaker introduces arrow functions in JavaScript and discusses their syntax and differences from regular functions.

Syntax of Arrow Functions

• Arrow functions were introduced in ES6 version of JavaScript.

• The syntax for arrow functions involves removing the function keyword and adding an arrow (=>) between the parameters and the body.

• If the body only contains one line, curly braces can be omitted, along with the return keyword.

Differences Between Arrow Functions and Regular Functions

• The syntax is different between arrow functions and regular functions.

• Arrow functions have implicit return keywords if there's only one line in their body.

• The arguments keyword cannot be used inside an arrow function.

• The behavior of the this keyword differs between arrow functions and regular functions.

Conclusion

In this section, the speaker summarizes the main points covered in the video regarding callback functions and arrow functions.

Main Points Covered

• Callback functions involve passing a function as an argument to another function to be called inside it.

• Predefined JavaScript methods like setTimeout, map, filter, and reduce use callbacks.

• Arrow functions have a different syntax than regular functions, with implicit return keywords if there's only one line in their body.

• The arguments keyword cannot be used inside an arrow function, and the behavior of the this keyword differs between arrow functions and regular functions.