Guess Output of JS programs
📄 Table of contents
- Object.create()
- SetTimeout Exercise()
- shallow copy
- arguments | arguments.length | achieve using arrow functions
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬✦✦✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
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
Post increment will return your value before incrementing thats why we are getting 0 all the times. We should use ++num which will return after incrementing and will output 1,2,3.
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
The above code will output the following to the console:
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 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);# 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()
setTimeout() is non-blocking which means it will run when the statements outside of it have executed. All other statements that are not part of setTimeout() are blocking which means no other statement will execute before the current statement finishes.
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
Achieve same using arrow functions:
var myFunc={ showArgs=(...arg)=> {
for(var i =0; i< arg.length; i++){
console.log(i, ":", arg[i]);
}
}
};myFunc.showArgs(1, 2, 3, 4);
Q: https://stackoverflow.com/questions/39277394/why-settimeout-calls-make-different-result
setTimeout(function() {
setTimeout(function() {
console.log('foo');
}, 50);
}, 100);
setTimeout(function() {
setTimeout(function() {
console.log('baz');
}, 100);
}, 50);The question was what’s the output. But on running code I got different results on multiple runs — sometimes it’s foo baz, sometime it's baz foo.
The timeout specified is a minimum time that the browser should wait before executing the function, not a guaranteed time. If the browser is busy doing other things when the timer goes off, the function will be delayed.
So when you schedule the timer for 50 ms, it might not actually run until 53 ms later. Then it will set another timer for 100 ms after that, which is 153 ms after you started. Meanwhile, the timer that’s set for 100 ms could run in 101 ms, and then set its second timer for 50 ms later, which is 151 ms after everything started. In this example, it will print foo bar.
Or you could get different delays, and the result would be bar foo.
If you need to perform actions in a specific sequence, you should run them sequentially in a single function, or call the second one from a callback of the first, or use promises in a specific order. Depending on precise millisecond timing with setTimeout is not reliable.
setTimeout inside loops
for(var i = 0; i < 3; i++){
setTimeout(() => {
console.log(i)
},1000)
}
Output:
3
3
3
Explanation: The for loop is a blocking statement, so while the setTimeout() is non-blocking. The loop creates 3 setTimeouts which go to the event loop and then to event queue. While all the setTimeouts are waiting in the event queue, the value of “i” has already changed to 3 in the call stack. And the setTimeouts print the current value of “i”.
Traditional solution is to create a function scope (Closure) outside the setTimeout whereby which setTimeout can access the correct value of “i”.
for (var i = 0; i < 3; ++i) {
(function(i) {
setTimeout(function(){
console.log(i);
}, 1000);
}(i));}Output:
0
1
2
Another (recent/ES6) Solution to the above problem is to use let instead of var which creates a block scope.
for(let i = 0; i < 3; i++)
{
setTimeout(() => {
console.log(i)
},1000)
}Output:
0
1
2
The reason is because `let` is block scoped. What that means is that scope of a variable declared using `let` is on a block level, hence for each block of code, a new memory address is assigned to variable. Hence, each of the setTimout will log the value of the variable at that point in the loop.
But with `var` (which is globally scoped). The variable i retains it’s memory location(new memory locations are not assigned). For this reason , all the setTimout function are going to log the content of same memory location, unfortunately the value of i increases until the exit value 3. Hence all the setTimout functions will log 3. That’s you have 3 3 3 when it is var.
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”
more exercise on setTimeout @ https://levelup.gitconnected.com/understanding-settimeout-15c7de9e5fd6
- The console output will be an Uncaught SyntaxError: Unexpected number.
- Because in JavaScript, keys must be strings.
- As the array doesn’t have any number at index 4, it will be shown as undefined in the console.
- The output of console.log(array) will be [4,5,6, undefined].
