JavaScript Questions Part -2

This is level 2 questions, based on core concepts of language , whenever a good JavaScript interview happens it always starts from here, so most of these questions are theoretical in nature.

Q.1 What are the scope rules in Javascript ?

Q.2 What is hosting ?

Q.3 What is Closures in Javascript ?

Q.4 Explain call, apply and bind functions ?

Q.5 add(2)(3) should return 5

Q.1 What are the scope rules in Javascript ?

A.1 Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime.

In JavaScript there are mainly two scope

a. Global Scope

b. Local Scope

Let’s understand them by examples

Global scope

var x = 1;
function foo() {
  console.log(x); // will print out 1
}

Local Scope

var x = 1;

function foo(x) {
  console.log(x); // will print 5
}
foo(5);
// local scope again
function bar() {
  var x = 3;
  console.log(x); // will print 3
}

No block level scope (ES5)

var x = 10;
function foo() {
  if (true) {
    var x = 4;
  }
  console.log(x); // will print 4
}

Block scope in (ES6)

var x = 10;
function foo() {
  if (true) {
    let x = 4; 
  }
  console.log(x); // will print 10
}

JavaScript has block scope in try-catch

try{ throw void 0 } catch(foo) {
 foo = "foo";
 console.log(foo);
}
console.log(foo);  // Reference Error

Q.2 What is hosting ?

Get Dev Negi’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A.2 All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

function foo() {
     console.log(x); // don't throw error, prints undefined, why ?
     var x = 10;
}
foo();

In the above example code is not throwing error because of hosting, the equivalent code is below

function foo() {
    var x;
    console.log(x);
    x = 10;
}
foo();

Q.3 What is Closures in Javascript ?

A.3 Child functions can access variable declared in parent function, but the same variable of parent function is not available outside of parent function, this is called lexical scoping.

function foo() {
    var x = 1;
    function bar() {
        console.log(x);  // will print 1
    }
    bar();
}
foo();
console.log(x); // will print undefined 

But rather then executing bar inside of “foo” function if you will return it, and assign to a new variable. That new variable will be a function and can access inner variable “x”

function foo() {
    var x = 1;
    function bar() {
       x++;
       console.log(x);
    }
    return bar;
}
var myBar = foo();
myBar();  // x = 2
myBar();  // x = 3

So here function bar and variable x are in “closure” in other word, closure is the combination of a function and the lexical environment within which that function was declared.

Q.4 Explain call, apply and bind functions ?

A.4 Call and Apply methods calls a function with a given “this” value. Here this refers to a Object instance.

var person = {
    firstName: 'dev',
    lastName:'negi',
    sayName: function() {
      return this.firstName + ' ' + this.lastName;
    }
}

Suppose you want to assign a role to the person object and you have already written that function like below

function assignRole(role) {
    this.role = role;
}

by using “call” method you can call assignRole function and pass a reference of “person” object

assignRole.call(person, 'developer');

Apply is also used in same scenario but instead of passing comma separated arguments you can pass array of arguments.

function totalIncome(source1, source2, source3){
   this.income = source1 + source2 + source3;
}
totalIncome.apply(person, [20,30,80]);

the bind method creates a new function that, when called takes the “this” reference to the value passed.

var devRole = assignRole.bind(person, 'developer'); 
// devRole is a new function 
devRole(); // will create a new property in person object 

Q5. add(2)(3)

A5. it is very simple when you have to add numbers only in two function parentheses

function sum(a) {
    return function(b){ return a+b; }
};

if there are more parentheses like this add(2)(5)(8)(9) then you have to write a curry function

var add = (function sum() {
    var num = 0;
    return function foo(a) {
            num += a;
            foo.valueOf = function() {
                return num;
            }
            return foo;
        }
})();