Javascript : login question | concept

JS most frequently asked logic question and their answer

 Guess the output?

function sayHi() {

  console.log(name);

  console.log(age);

  var name = 'devin';

  let age = 21;

}

sayHi();

// answer is: undefined and Reference Error

Explaination of above answer :

Inside the function, we first declared the name variable with the var keyword. It means that the variable gets hoisted (memory space takes place during the creation phase) with the default value of "undefined", until we actually get to the line where we initialise the variable. 

We haven't defined the variable yet on the line where we try to print (log) the name variable, so it still holds the value of "undefined".

Variables with the let keyword (and const) are hoisted, but unlike var, don't get initialized with value of "undefined".

They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws a ReferenceError in let and const case.

Guess the output ?

for (var i = 0; i < 3; i++) {

    setTimeout(() => console.log(i), 1);

}

for (let i = 0; i < 3; i++) {

    setTimeout(() => console.log(i), 1);

}

// Answer: 3 3 3 and 0 1 2

Explanation:

In JavaScript,there is a event queue, the setTimeout callback function is called after the loop has been executed.

Since the variable i in the first loop was declared using the "var" keyword, this value was global. During the loop, we incremented the value of i by 1 each time, using the unary operator ++. By the time the setTimeout callback function was invoked, i was equal to 3 in the  prior (first) example.

In the second loop, the variable i was declared using the let keyword:

variables declared with the let (and const) keyword are block-scoped (a block is anything between { }).
During each iteration, we will have a new value, and each value is scoped inside the loop.

Guess the output?

const shape = {

    radius: 10,

    diameter() {

      return this.radius * 2;

    },

    perimeter: () => 2 * Math.PI * this.radius,

  };

 

  console.log(shape.diameter());

  console.log(shape.perimeter());

//   Answer is: 20 and NaN

Kindly note that the value of diameter is a regular function, whereas the value of perimeter is an arrow function.

With arrow functions, The "this" keyword refers to its current surrounding scope, unlike regular functions! This means that when we call perimeter, it doesn't refer to the shape object, but to its surrounding scope.

Since there is no value radius in the scope of the arrow function, "this.radius" returns "undefined" which, when multiplied by 2 * Math.PI, results in "NaN".

Gues the output ?

+true;

!'sonu';

// Answer is: 1 and false  

Explaination : 

Here we have unary plus try to convert an operand to a number. true is 1, and false is 0.

The string 'sonu' is a truthy value. What we're actually asking, is "Is this truthy value falsy?". This returns false.

Guess the output ?

let c = { greeting: 'Hey!' };

let d;

d = c;

c.greeting = 'Hello';

console.log(d.greeting);

// Answer is: hello

In JavaScript, all objects interact by reference when setting them equal to each other.

First, variable "c" holds a value to an "object". Later, we assign "d" with the same reference that "c" has to the object.

When we change one object, we change all of them.

Gues the output ?

let a = 3;

let b = new Number(3);

let c = 3;

console.log(a == b);

console.log(a === b);

console.log(b === c);

// Solution: true false false

 In JavaScript, new Number() is a built-in function constructor. It looks like a number, it's not really a number: it has a bunch of extra features and is an object.

When we use the == operator (Equality operator), This only checks whether it has the same value. They both have the value of 3, so it returns true.

However, when we use the === operator (Strict equality operator), both value and type should be the same. It's not: new Number() is not a number, it's an object. Both return false.

Gues the output ?

let greeting;

greetign = {};

console.log(greetign);

// solution : {}

first logs the object, because we created an empty object on the global object! When we mistyped greeting as greetign, the JS interpreter actually saw this as:

global.greetign = {} in Node.js

window.greetign = {}, frames.greetign = {} and self.greetign in browsers.

self.greetign in web workers.

globalThis.greetign in all environments.

In order to avoid this, we can use "use strict". This makes sure that you have declared a variable before setting it equal to anything.