Guess Output of JS programs

📄 Table of contents

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

Shallow Copy:

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

Object.create()

(function(x) {
return (function(y) {
console.log(x);
})(2)
})(1);
# 1(function () {
try {
throw new Error();
} catch (x) {
var x = 1, y = 2;
console.log(x);
}
console.log(x);
console.log(y);
})();
# 1
# undefined
# 2

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
--------------------------------------------------------------------
(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 reseverd keyword "arguments"
console.log(arguments);
console.log(arguments.length);
}
};myFunc.showArgs(1, 2, 3, 4);# output:
{
0: 1,
1: 2,
2: 3,
3: 4
}
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 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
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);
})
console.log(“4");# (same result in chrome & firefox)“1”
“2”
“4"
'Promises -resolved’
“3”

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