Day 29: Output
Tags: day29, javascript, 100daysofcode
Published: 2023-08-18 13:30:00

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?**

```javascript
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?**
```javascript
console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');
```
The output will be:
```javascript
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**
```javascript
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:**
```javascript
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:**
```javascript
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:**
```javascript
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:**
```javascript
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:**
```javascript
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?**
```javascript
console.log(1 < 2 < 3);
console.log(3 > 2 > 1);
```
The output will be:
```javascript
true
false
```
In JavaScript, these chained comparison operators don't work as expected due to the left-to-right ↔️ evaluation. 

**14. Explain the output:**
```javascript
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?**
```javascript
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.