Javascript Interview Questions

Q1. What is Function Declarations?

-Also called Function definition, Function statement.

:- Just a normal function:

function squire(num){
	    return num * num;
	}

Q2. What is Function Expression?

:- function expression are assign to a variable.

const squire = function (num) {
    	    return num * num;
    	}

Q3. What is anonymous Function?

:- Function that has no name

function (num) {
	    return num * num;
	}

Q4. What are First Class Functions?

:- Where a function can be treated like a variable their functions are called first class functions. In these cases function can be passed into another function. Can be use manipulated and return from those functions. And basically everything that a variable can do a function can also do. this is why we called function as first class function in JavaScript.

function squire(num){
	return num * num;
}


function displaySquire(fn){
	console.log("Squire is " + fn(5));
}

//Calling display function and 
//squire function as a variable

displaySquire(squire)

=====================
//Outpur: Squire is 25

Q5. What is IIFE?

Immediately invoked function expressions

:- in this case we can wrap a function into a parenthesis and call immediately

(function squire(num){
	    console.log(num * num)
    })(5);
    
    //==============
    //Output: 25
	//-----------------------------------
	A tricky code example:
	
	(function (x) {
		return (function (y) {
			console.log(x);
		})(2)
	})(1);
	===============
	//Output: 1
	
	//Why this is not undefined?
	//because of javascript closures

Q6. What is JavaScript Scope?

What is the output of the code below?

for (let i=0; i<5; i++){
	setTimeout(function(){
		console.log(i);
	}, i * 1000);
}
====================
//Output: 0, 1, 2, 3, 4
//Because 'let' have block scope

but for code below:

	
for (var i=0; i<5; i++){
	setTimeout(function(){
		console.log(i);
	}, i * 1000);
}
====================
//Output: 4, 4. 4, 4. 4
//Because 'var' doesn't have block scope

Q7. What is Function Hoisting?

Hoisting works differently in case of Functions. if we declare a variable it hoisted as undefined and only when we assign a variable then it get's it's value. But for function. Function get hoisted as fully declared. That is why we can call function before or after defining it.

Example:

squire(5)
    
function squire(num){
	console.log(num * num)
	}
// Output : 25
=================
//But for variable

console.log(x)
x = 10
// Output: Undefined

Q8. Interesting Hoisting Question

what will be the output of below code?

var x = 21
    
var fun = function(){
	console.log(x);
	var x = 20;
};

fun();
// you may think the output should be 21 as console log called before local x variable, so it should print out global variable value.
// But it will print undefined. 
// Because Hoisting is a two step process. 
// First it initialized global scope and then it will also initialize local scope as well.
// It will hoiest x in local scope as undefined. 

So, when we have a variable in a scope. we will not going to check global scope.

Q9: Params vs Arguments ?

function squire(num){ // this is params
	console.log(num * num);
}
	
squire(5); // This is Argument

// Wehen we pass a value it's argument.

Q10: Javascript Rest vs Spread operator

function multiply(...nums) { // This is Rest Operator ...nums
	console.log(nums[0] * nums[1]);
}
var arr = [5, 6]

multiply(...arr) // here ...arr is Spread operator

Q11: What will be the output of below code?

const fn = (a, ...numbers, x, y) => {
	console.log(x, y)
};

fn(5,6,3,7,8,9,10)
// Output: Error - Rest parameter must be last formal parameter
// let's write it in correct way
const fn = (a, x, y), ...numbers, => {
	console.log(x, y)
};

fn(5,6,3,7,8,9,10)

//output:  6, 3, [7,8,9,10]

Q12: What is a callback function?

A callback functiion is a function passed into another function as an arguments, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

function greeting(name) {
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

Q13: What is Arrow functions?

// Normal function

const add = function(firstNum, secondNum){
	return firstNum + secondNum;
};

// Arrow function

const add = (firstNum, secondNum) => {
	return firstNum + secondNum;
};

// Just removed function keyword and added arrow sign
// and even we can remove return keyword like below

const add = (firstNum, secondNum) => firstNum + secondNum;

//**We can't use arguments inside arrow function**

function fn() {
	console.log(arguments);
}

fn(1,2,3)
// Output: [1, 2, 3]

// but if we tries to write like this

const fnArr = () => {
	console.log(arguments);
}
// Output: arguments is not defined

// Also we can't use this keyword in arrow function like below

let user = {
	username: "Himel Rana",
	fn1: () => {
		console.log("Welcome to " + this.username);
	},
	fn2(){
		console.log("Welcome to " + this.username);
	},
}

user.fn1();
// output: username is undefined
user.fn2();
// output: welcome to Himel Rana

Q14: What is Closures ?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Laxical Scoping

Consider the following example code:

function init() {
  var name = "Mozilla"; // name is a local variable created by init
  function displayName() {
    // displayName() is the inner function, that forms the closure
    console.log(name); // use variable declared in the parent function
  }
  displayName();
}
init();

Closure

function makeFunc(){
	var name = "Himel";
	function displayName(num) {
		console.log(name, num)
	}
	return displayName;
}

makeFunc()(5)

//Output: Himel 5

Q15: Closure Scope Chain

Every closure has three scopes:

Local scope (Own scope) Enclosing scope (can be block, function, or module scope) Global scope A common mistake is not realizing that in the case where the outer function is itself a nested function, access to the outer function's scope includes the enclosing scope of the outer function—effectively creating a chain of function scopes. To demonstrate, consider the following example code.

// global scope
const e = 10;
function sum(a) {
  return function (b) {
    return function (c) {
      // outer functions scope
      return function (d) {
        // local scope
        return a + b + c + d + e;
      };
    };
  };
}

console.log(sum(1)(2)(3)(4)); // 20

Q16: What will be logged to console?

let count = 0
(function printCount(){
	if(count === 0) {
		let count = 1;
		console.log(count) // 1
	}
	console.log(count) // 0
})();

17: Write a function that would allow you to do like this

var addSix = createBase(6);
addSix(10) // return 16
addSix(21) // return 27

Answer:

function createBase(num){
	return function add(value){
		console.log(num + value)
	}
}

var addSix = createBase(6);
addSix(10) // result 16
addSix(21) // result 27