Open in app
Anil Kumar

Sign in

Open in app

Guess Output of JS programs

Anil Kumar

Sep 3, 2020·12 min read

📄 Table of contents

Scoping

Scoping in JS
var str = new String("anil");
console.log(typeof str);var str1 = "anil";console.log(typeof str1);
console.log(str == str1);  # type-coersion takes place here
console.log(str === str1);#Output:
"object"
"string"
true
false// IIFE
(function(){
    let a = b = 100;
 })();console.log(b);  
console.log(a);  // 100
// "ReferenceError: a is not defined// IIFE
(function(){
    var b = 101;
    let a = 100;
 })();console.log(b);  
console.log(a);  // "ReferenceError: b is not defined "
//  will not reach here

LogMeIn

const a = [1,2,3];
const b = [1,2,3];
const c = “1,2,3”;console.log(a === b); // false
console.log(a === c); // false// convert [1,2,3] to String
[1,2,3] + ""// "1,2,3"▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬var a = 1;
function b() {
     a = 10;
     return;
     function a() {}
}
b();# undefined▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬function parent() {
   var hoisted = "a variable";
   
   function hoisted() {
      return "a function";
   }
   return hoisted();
}
console.log(parent());Output: # TypeError: hoisted is not a functionVariable assignments > function declarations > variable declarations▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬function containingFunction() {
    var hoistedVariable = 2 + 2;
    function hoistedFunction() {
        return hoistedVariable;
    }
    return hoistedFunction();
}
containingFunction()# 4
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬let arr = [4, 4];for (x of arr){
    console.log(x);   
}// output => 4,4for (x of arr.keys()) {
    console.log(x);    // output = 🤔 ?
}// output => 0,1
outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar
(function () {
    var a = 4;
    function f1() {
        var a = 5;
    }
    if (true) {
        var a = 6;
    }
    f1();
    console.log(a);
})()# 6function Base2() {
    this.num = 2;
}
Base2.prototype = {
    base_get_num: function () {
        return this.num;
    }
}
function Derived2() {}
Derived2.prototype = Base2.prototype;
var d = new Derived2();
console.log(d.base_get_num());# undefinedfunction Base2() {
    this.num = 2;
}
Base2.prototype = {
    num: 4,
    base_get_num: function () {
        return this.num;
    }
}function Derived2() { }
Derived2.prototype = Base2.prototype;var d = new Derived2();
console.log(d.base_get_num());# 4function Base3() {
    this.num = 2;
}
Base3.prototype = {
    num: 4,
    base_get_num: function () {
        return this.num;
    }
}
function Derived3() {
    Base3.apply(this, arguments);
}var d = new Derived3(2);function bar(){
     return foo;
     foo =10;
     var foo = "11";
     function foo() {}
}
alert(typeof bar()); # function
function display() {
  var a = b = 10;
}display();console.log('b', typeof b === 'undefined');
console.log('a', typeof a === 'undefined');
b false
a true
function display() {
  var a = b = 10;
}
function display() {
  var a = (b = 10);
}
function display() {
 b = 10; 
 var a = b;
}
'use strict';function display() {
  var a = b = 10;
}display();console.log('b', typeof b === 'undefined');
console.log('a', typeof a === 'undefined');

◉ Shallow Copy

const a = { foo: 
              {bar: 1 }
          }; // nested objectconst b = Object.assign({}, a) 
// get a clone of a which you can change with-out modifying a itselfb.foo.bar = "999";
console.log(a.foo.bar); 
# 999const orig = { foo: 
                {bar: 1}
             }; // nested objectconst copy = {...orig};  // get a clone of orig which you can change with out modifying 
orig itselfcopy.foo.bar = "999";
console.log(orig.foo.bar); # "999"

◉ Object.create()

(function(x) {
  return (function(y) {
    console.log(x);
  })(2)
})(1);# output:
1
--------------------------------------------------------------------(function () {
  try {
    throw new Error();
  } 
  catch (x) {
    var x = 1, y = 2; 
    console.log(x);
  }
  console.log(x);
  console.log(y);})();# output: 
1
undefined
2
--------------------------------------------------------------------function f1(arr) {
    arr.push(7);
}
function f1(arr) {
    arr.push(8);
}var arr = [6];
f1(arr);
console.log(arr.join(","));#  6,8
--------------------------------------------------------------------var count1 = 0, count2 = 0;
for (var i = 0; i < 3; i++) {
    try {
        if (i === 2) {
            console.log("inside try statement");
        }
    }
    catch (e) {
        count1++;
    } 
    finally {
        count2++;
    }
}
console.log(count1, count2);# inside try statement
# 0 3

◉ Guess o/p of below:

var myFunc = {
   showArgs(){    // no need to pass reserved keyword "arguments" 
     console.log(arguments);  
     console.log(arguments.length);
   } };myFunc.showArgs(11, 22, 33, 44);# output: 
{
  0: 11,
  1: 22,
  2: 33,
  3: 44
}4
var myFunc={   showArgs=(...arg)=> { 
     for(var i =0; i< arg.length; i++){
       console.log(i, ":",  arg[i]);
     }
   } 
};myFunc.showArgs(1, 2, 3, 4);
setTimeout(function() {
  setTimeout(function() {
    console.log('foo');
  }, 50);
}, 100);

setTimeout(function() {
  setTimeout(function() {
    console.log('baz');
  }, 100);
}, 50);

◉ SetTimeout Exercise()

console.log("1");
setTimeout(() => console.log("2"),0);
console.log("3");
Promise.resolve(console.log("4"));#
1
3
4
2
--------------------------------------------------------------------console.log("1");
setTimeout(() => console.log("2"),0);
Promise.resolve(console.log("4"));
console.log("3");#
1
4
3
2
console.log("1");
console.log("2");setTimeout(function () {
   console.log("3");
}, 0);var promise = new Promise((resolve, reject) => {
 resolve("Promises-resolved");
});promise.then(function (successMessage) {
  console.log(successMessage);
}, function (errorMessage) {
  console.log(errorMessage);
});Promise.resolve(console.log("exception"));console.log("4");# (same result in chrome & firefox)“1”
“2”
"exception"
“4"
'Promises-resolved’
“3"

setTimeout inside loops

for(var i = 0; i < 3; i++){
  setTimeout(() => {
    console.log(i)  
  },1000)
}
Output:
3
3
3
for (var i = 0; i < 3; ++i) {
    (function(i) {
        setTimeout(function(){    
        console.log(i);
        }, 1000); 
   }(i))}Output:
0
1
2
for(let i = 0; i < 3; i++)
{  
   setTimeout(() => {    
   console.log(i)  
   },1000)
}Output:
0
1
2

setTimeout() with fetch() combination

Microtask Queue:

synchronization code > micro task > macro task
setTimeout(() => {
    console.log('Macro task')
});new Promise((resolve, reject) => {
    console.log('Executor for Promise')
    resolve('Mirco task')
}).then(value => console.log(value));console.log('synchronization task');
Executor for Promise
synchronization task
Mirco task
Macro task

Guess the output here (closures):

const b = {
   a: 1,
   b: 2,
   3: 3
}
for(key in b){
   console.log(b[key]);
}
3 // its printed first as per priority
1
2
const arr = [4,5,6];
arr.length = 4;console.log(arr);

JS interview Questions Functions

Question

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

Solution

SyntaxError: Rest parameter must be last formal parameter

Question

var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

Solution

undefined
John Doe

Question

function greet() {
    console.log(this.name);
};
const sayHello1 = greet.bind({name: "Tom Cruise"});
sayHello1();const sayHello2 = sayHello1.bind({name: "Zac Efron"});
sayHello2();

Solution

Tom Cruise
Tom Cruise

Question

function greet() {
  setTimeout(function() {
    console.log(this.name);
  }, 500);
}
greet.call({name: 'Daniel Craig'});

Solution

undefined

Question

function Employee(name) {
    this.name = name;
};
Employee.prototype.getName = () => { # arrow function be attentive
    return this.name;
};const jason = new Employee('Jason');
console.log(jason.getName());

Solution

undefined

Question

var something = null;
var randomFunction = function () {
  var somethingElse = something;
  var unused = function () {
    if (somethingElse)
      console.log("hi");
  };
  something = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
setInterval(randomFunction, 1000);

Solution

Anil Kumar

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.