JavaScript Console Input Output Question and Solutions

šŸ’”What is the output of the below program?

var person = {
	number: 10,
	printThis: () => {
		console.log(this)
	}
}

var person2 = {
	number: 10,
	printThis: function() {
		console.log(this)
	}
}
person.printThis(); 
window 
// window object because printThis is an arrow function and it contains only window object

person2.printThis(); 
{number: 10, printThis: ʒ}
// this is normal JS function that has person2 object scope inside this.

šŸ’” What is the output of the below program?

function hello() {
  var a = 10;
  function Two() {
    return a;
  }
  Two();
}
console.log('Print hello', hello());
output > 'Print hello' undefined 

Explanation – Because, We have a return statement inside inner function Two, not from the Main function, hello, means the main function hello is not returning anything.
To correct this we need to write the below code.

function hello() {
  var a = 10;
  function Two() {
    return a;
  }
  return Two();
}
console.log('Print hello', hello());
output > 'Print hello' 10 

šŸ’” What is the output of the below program?

function hello() {
	let  fName = surName = 'JSMount';
}
hello();
console.log(fName); // ReferenceError: fName is not defined
console.log(surName); // JSMount

Explanation – let has block level scope only, so When we create any variable with let – it has only block level local scope. We can not access this outside.
When we write like -> let a = b = 10; Here b is defined in window scope, not in the local scope.

šŸ’” What is the output of the below program?

function parent() {
	var name = 'mohit';
	function name() {
		return 'saxena';
	}
	return name();
}
parent();
output >

Uncaught TypeError: name is not a function

Explanation – This question is based on the Hoisting concept.
Hoisting is – All variables definition only moves to the top, not its value & all function declarations move to the top of the function scope.
JavaScript does this process during compile time.

Let’s covert the above function in compile time with Hoisting –

function parent() {
	var name = undefined;
	function name() {
		return 'saxena';
	}
	name = 'mohit';
	return name();
}
parent()

šŸ’” What is the output of the below program?

function parent() {
  console.log("1", hoisted);
  var hoisted = "Iā€™m a variable";
  console.log("2", hoisted);
  function hoisted() {
    return "I'm a function";
  }
  console.log("3", hoisted);
}
parent();

So again let’s see how the above function will behave in compile time. After Hoisting, it will look like the below code –  declarations of functions and variables move to the top.

function parent() {
 var hoisted = undefined;
  function hoisted() {
    return "I'm a function";
  }
  console.log("1", hoisted);
  hoisted = "Iā€™m a variable";
  console.log("2", hoisted);
  console.log("3", hoisted);
}
parent();
output >
 ʒ hoisted() {
    return "I'm a function";
  }
2 Iā€™m a variable
3 Iā€™m a variable

šŸ’” Write the output of the below toString questions.

12.toString()  //Invalid or unexpected token
12..toString() // '12'
12. .toString() // '12'
12...toString() // Unexpected token '.'
12.2.toString() // '12.2'

šŸ’” Write the output of the below questions.

-'1' //  -1
+'1' // 1
- '-1' // 1
-'1' + '1' //  '-11'
-1 - -'1' // 0
'1' + '1' // '11'
'1'- '1' // 0
'1' - -'1' // 2

-0 == +0 // true -> +0 and -0 treated as same value.
-0 === +0 // true
Number('123') //123
Number('0') //0
Number(-'-1') //1
Number(NaN) //NaN
Number('hello') // NaN
Number(undefined) // NaN
Number(null) //0
Number(true) //1
Number(false) //0
Number({} === {}) //0

šŸ’” What is the output of the below program?

function outside() {
  const x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}
outside()(10); 

returns 20 instead of 10

Explanation When two arguments or variables in the scopes of a closure have the same name, there is a name conflict. More nested scopes take precedence.
So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain.

šŸ’” What is the output of the below program?

function Person() {
  this.age = 0;
  setInterval(function growUp() {
    this.age++;
  }, 1000);
}
const p = new Person();
p.age //0 

Explanation We are increasing age inside normal function and it has its own scope. So outer this.age and inner function this.age are different scoped variables.
So you can solve this by assigning outer scope into some variable like ‘self’ or ‘outerthis’ etc.

function Person() {
const self = this;
  self.age = 0;
  setInterval(function growUp() {
    self.age++;
  }, 1000);
}
const p = new Person();

p.age //1 

You can also solve the above problem with the Arrow function.

function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // `this` properly refers to the person object
  }, 1000);
}
const p = new Person();
p.age // 1

šŸ’” What is the output of the below program?

const oneMap = new Map()
oneMap['name'] = 'JsMount';

oneMap.has('name') //false
oneMap.delete('name') // false

Explanation – Setting properties directly like Object does not interact with the Map data structure. And values are not stored in the Map data structure and Its operation on data fails. The correct usage for storing data in the Map is through the set(key, value) method.

šŸ’” What is the output of the below program?

const oneMap = new Map();
oneMap.set({}, 'value associated with object');
oneMap.get({}); // undefined 

Because if we do {} === {}, it is false. So to resolve this issue we can do like –

const keyObj = {};
oneMap.set(keyObj, 'value associated with keyObj');

oneMap.get(keyObj) //'value associated with keyObj'

šŸ’” What is the output of the below program?

const myMap = new Map()
myMap.set(NaN, 'not a number')
myMap.get(NaN) // "not a number"

Explanation – NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following above example works because NaNs are indistinguishable (they appear the same or they are not able to be identified as different) from each other.

šŸ’” What is the output of the below program?

const oneMap = new Map();
const twoMap = new Map(oneMap); // clone oneMap into twoMap variable
oneMap.set('name', 'JsMount');
const threeMap = new Map(oneMap); // clone oneMap again into threeMap variable
twoMap.get('name') // undefined
threeMap.get('name') // 'JsMount'

Explanation – We can clone Map and the newly created map also contains the same key values as its parent. But if add any key into the parent map after cloning then those values could not be read into cloned Map.
That’s why twoMap has nothing and threeMap has key ‘name’.

šŸ’” What is the output of the below program?

function outer() {
	var a = 2;
	function innerX() {
		return a;
	}
	return function innerY() {
			var a = 3;
			innerX();
	}
	innerY();
}
outer();	// will return function innerY body.
outer()();	// undefined

šŸ’” What is the output of the below program?

function outer() {
	var a = 2;
	function innerX() {
		return a;
	}
	return function innerY() {
			var a = 3;
			return innerX();
	}
	innerY();
}
outer();	// will return function innerY body.
outer()();	// 2

šŸ’” What is the output of the below program?

function outer() {
	var a = 2;
	function inner() {
		console.log(a)
	}
	return inner();
}
outer(); // undefined  - outer function is returning inner function call but inner function is not returning anything. So it is undefined.
function outer() {
	var a = 2;
	function inner() {
		return a;
	}
	return inner();
}
outer(); //2
function outer() {
	var a = 2;
	function inner() {
		return a;
	}
	inner();
}
outer(); // undefined  - outer function is not returning anything.
function outer() {
	var a = 2;
	function innerX() {
		return a;
	}
  function innerY() {
			var a = 3;
			return innerX();
	}
    return innerY()
}
outer() // 2

šŸ’” What is the output of the below program?

Input - const arr = [1, 2, [3, 4, [5, 6]]];

Output - [1, 2, 3, 4, 5, 6]
arr.flat(2)

Read more on array flat –
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

āœ” Top 30 JavaScript Interview Questions and Answers for 2021

āœ” JavaScript Top Interview questions & Answers You should know

āœ” JavaScript Interview Questions & Answers for Experienced ā€“ Part 2

āœ” JavaScript Interview Question to Write Programs for Experienced ā€“ Part 1

āœ” JavaScript Interview Questions & Answers for Experienced ā€“ Part 1

āœ” Top Interview Questions and Answer of HTML 5 Canvas

āœ” JavaScript Console Interview Questions | Input Output Program

āœ” JavaScript Hoisting Interview Questions & Answers | Console Programs

JavaScript Console Input Output Question and Solutions