Day 29: Output

In this article, we'll delve into various scenarios of JavaScript output to help you solidify your knowledge and improve your coding skills 🚀.

1. What's the output of typeof null?
The output is 'object'. This is a well-known quirk in JavaScript due to historical reasons. Although null is a primitive value, typeof null returns 'object' which can be misleading.

2. Explain the output of 0.1 + 0.2 === 0.3.
The expression evaluates to false. This is due to the way floating-point numbers are stored and the inherent imprecision in representing decimal fractions in binary.

3. What will be logged from the following code?

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

It will log 5 five times. This happens because the setTimeout callback is executed after the loop completes, and by that time, the value of i is 5.

4. What's the output of the code below?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

The output will be:

one
three
two

This is because JavaScript event loop ensures that the setTimeout callback is pushed to the end of the queue, allowing the other synchronous code to execute first.

5. Explain the output of the below function

function foo() { 
   console.log(foo === foo); 
} 
foo();

The output will be true. In JavaScript, functions are first-class objects, and when foo is called, it references itself inside its scope.

6. What's the output of '5' + 3 and 5 - '3'?
'5' + 3 results in the string '53', while 5 - '3' yields the numeric value 2. JavaScript performs type coercion in these cases.

7. Predict the output of the following code:

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}

The output will be the same for all iterations, showing the last index and element (Index: 4, element: undefined). This is because the closure captures the reference to the variable i, which is updated to 4 when the loop completes.

8. Explain the output difference between let and var in the code below:

for (let j = 0; j < 3; j++) {
  setTimeout(function() {
    console.log(j);
  }, 1000);
}

Unlike var, the let keyword creates a new binding for j in each iteration, resulting in the expected output: 0, 1, and 2.

9. What's the output of the code:

const name = 'Dev';
(function() {
  if (typeof name === 'undefined') {
    console.log('Welcome to ' + name);
  } else {
    console.log('Hello, ' + name);
  }
  var name = 'to';
})();

The output is Welcome to undefined. This is due to JavaScript's function scope and hoisting behavior. The variable name is hoisted, but its value is undefined within the function scope.

10. Explain the output:

const person = { name: 'John', age: 30 };
const newPerson = person;
newPerson.name = 'Jane';
console.log(person.name);

The output is Jane. In JavaScript, objects are assigned by reference, so both person and newPerson point to the same object. Changing the object's properties through one reference affects the other reference as well.

11. What is the output of console.log(typeof NaN);? 🤪
The output will be "number". NaN (Not-a-Number) is considered a numeric value of type "number". 🔢

12. Explain the output:

var x = 1;
if (function f() {}) {
    x += typeof f;
}
console.log(x);

The output will be "1undefined". The function f inside the if statement is not accessible outside of it due to function scope. 🔍

13. What will the following code output?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);

The output will be:

true
false

In JavaScript, these chained comparison operators don't work as expected due to the left-to-right ↔️ evaluation.

14. Explain the output:

console.log(typeof typeof 1);

The output will be "string". The first typeof returns "number", and then the second typeof returns the type of "number" 🔄, which is a string.

15. What is the output of the following code snippet?

var x = 10;
var foo = {
    x: 20,
    bar: function() {
        return this.x;
    }
};
var baz = foo.bar;
console.log(baz());

The output will be 10. The value of this in JavaScript is determined by how a function is called, not where it's defined.