In this article, we will see the outputs of various Javascript programs.
Predict and Explain the Output of the below JavaScript programs.
Example 1: 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 the value 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.
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}
Example 2: In foo1(), the bar object is returned as it should and hence it gives the output {bar:”hello”}. But in foo2(), the newline after the return is interpreted differently. It implicitly puts a semicolon after the return and the corresponding set of lines is treated as a block of statements. So foo2() has the following return statement- return; which gives output as undefined.
Javascript
<script type="text/javascript" charset="utf-8"> function foo1() { return { bar: "hello" } } function foo2() { return { bar: "hello"; } } console.log(foo1()); console.log(foo2()); </script> |
Output:
{bar:"hello"}
undefined
Example 3: The setTimeout() function is called only after the parent function has been executed fully and returned. So even though console.log(3) has a 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.
Javascript
(function() { console.log(1); setTimeout(function(){console.log(2)}, 1000); setTimeout(function(){console.log(3)}, 0); console.log(4); })(); |
Output:
1 4 3 2
Example 4: 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 the value of i in every loop will be preserved and finally printed after a timeout of 1 second.
Javascript
for (var i = 0; i < 5; i++) { (function(x) { setTimeout(function() { console.log(x); }, 1000 ); })(i); } |
Output:
0 1 2 3 4
Example 5: 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.
Javascript
var x= 5; function check(){ y = 10; console.log(x); var x =10; } function check2(){ console.log(y); } check(); check2(); |
Output:
undefined 10
