Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Output of JavaScript Programs

  • Difficulty Level : Hard
  • Last Updated : 01 Dec, 2020

1. Predict and Explain the Output of the below JavaScript program.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Javascript




function f(a, b, c) {
    m = ["1", "2", "3"];
    a = 3;
    b[0] = "X";
    c.first = false;
}
  
var x = 4;
var y = ["A", "B", "C"];
var z = { first: true };
  
f(x, y, z);
console.log(x, y, z);
  
function g(a) {
    a = { first: true };
    console.log(a);
}
  
g(z);
console.log(z);

Output: 

4 ["X", "B", "C"] {first:false} {first:true} {first:false}

Explanation: When (x, y, z) is logged, x gives value 4 (as primitives are passed by value and hence its value does not change even after function f()). y is an array, hence an object, and so it is passed by reference and its index 0 gets changed to X. So y logs X, B, C. Inside function f(), c.first has been changed to false and since it is passed by reference, it logs first:false. In function g(), a new object is created with value as true and so it logs first:true. Finally, in the last line, z.first is still equal to false and hence it logs first:false.



2. Predict and Explain the Output of the below JavaScript program:

Javascript




function foo1() {
   return {
      bar: "hello";
   };
}
  
function foo2() {
   return
   {
      bar: "hello";
   };
}
  
console.log(foo1());
console.log(foo2());

Output: {bar:”hello”} undefined

Explanation: In foo1(), bar object is returned as it should and hence it gives the output {bar:”hello”}. But in foo2(), newline after return is interpreted differently. It implicitly puts a semicolon after return and the corresponding set of lines are treated as a block of statements. So foo2() has the following return statement- return; which gives output as undefined.

3. Predict and Explain the Output of the below JavaScript program:

Javascript




(function() {
   console.log(1);
   setTimeout(function(){console.log(2)}, 1000);
   setTimeout(function(){console.log(3)}, 0);
   console.log(4);
})();

Output: 1432

Explanation: The setTimeout() function is called only after the parent function has executed fully and returned. So even though console.log(3) has timeout of 0 milliseconds, it is executed only after the parent function has returned after logging 1 and 4. Then 3 is logged. Finally after a timeout of 1000 milliseconds, 2 is logged.

4. Predict and Explain the Output of the below JavaScript code snippet:

Javascript




for (var i = 0; i < 5; i++) {
   (function(x) {
      setTimeout(function() {
         console.log(x);
      },  1000 );
   })(i);
}

Output: 0 1 2 3 4

Explanation: With the help of an Immediately Invoked Function Expression (IIFE), its own scope will be created, and we can pass i to the function. Variable i will be a local variable and value of i in every loop will be preserved and finally printed after timeout of 1 second.

5. Predict and Explain the Output of the below JavaScript program:

Javascript




var x= 5;
function check(){
   y = 10;
   console.log(x);
   var x =10;
}
  
function check2(){
   console.log(y);
}
  
check();
check2();

Output: undefined 10

Explanation: var x has been defined and initialized inside check() after it is logged. Hoisting works only for variable declaration and not for initialization, so it returns undefined. In check(), y has been initialized to 10. Since var is not used, the variable has its scope until it encounters a variable by the given name or the global object. So when check2() is called, it logs 10 as the output.




My Personal Notes arrow_drop_up
Recommended Articles
Page :