# JavaScript Tricky Interview Questions 2023

A developer interview without JavaScript questions? That’s hard to believe 😃 And it’s not surprising tricky questions are asked from a few common categories in multiple interviews.

But why do interviewers ask these questions? Because they often arise in real-world situations! Here’s how:

## **1\. Type Coercion in Web Development**

Understanding type coercion is pivotal while building web applications, especially during string manipulations and URL formations.

What output would you expect?

```plaintext
console.log([] + []);
console.log([] + {});
console.log({} + []);
console.log({} + {});
```

Answer:

* `""` (Empty string)
    
* `"[object Object]"`
    
* `0` (In browsers, due to peculiarities of the unary `+` operator)
    
* `NaN`
    

JavaScript type `coercion` can give unexpected results, especially with complex types like `arrays` and `objects`.

## **2\. Precision Dilemma in Financial Apps**

Even a slight discrepancy can lead to significant issues when working on finance-based applications.

Is 0.1 + 0.2 equal to 0.3?

```plaintext
console.log(0.1 + 0.2 === 0.3);
```

Answer: `false`

Precision issues with floating-point arithmetic means 0.1 + 0.2 results in a number slightly more than 0.3.

## **3\. JavaScript’s Automatic Semicolon Insertion**

Have you ever thought why a function that seemed to work correctly gave you unexpected results? The behavior of semicolons in JavaScript might be the culprit.

What does the following function return?

```plaintext
function getNumber() {
  return 
  {
    value: 23
  };
}
console.log(getNumber());
```

Answer: `undefined`

Automatic Semicolon Insertion causes the return to be treated as a standalone statement, so the function returns `undefined`.

## **4\. Variable Hoisting Mysteries**

A deep grasp of hoisting is vital, especially when initializations don’t behave as expected.

Can you figure out what’s wrong?

```plaintext
var x = 21;
var girl = function () {
    console.log(x);
    var x = 20;
};
girl();
```

Answer: `undefined`

Due to variable hoisting, the variable `x` inside the function is declared but not initialized when `console.log` is executed. Therefore, its value is `undefined`.

## **5\. Tricky Increment Operations**

Simple arithmetic can sometimes confound developers.

Can you predict the output?

```plaintext
var num = 8;
function fun() {
    num += 7;
    num--;
    console.log(num);
}
fun();
```

Answer: `14`

The function first adds 7 to `num` (resulting in 15) and then decrements it by 1.

## **6\. Elusive Comma**

When writing a script for sequential data processing, it is sometimes important to know how to do more than one thing on a single line.

Do you know how it evaluates its operands?

```plaintext
var val = (1, 2, 3, 4);
console.log(val);
```

Answer: `4`

The comma operator evaluates each of its operands and returns the value of the last one.

## **7\. Scope in Large-Scale Applications**

When dealing with large applications using multiple libraries, correctly scoping variables becomes crucial.

Consider the following code:

```plaintext
var b = 5;
(function foo() {
    var b = 6;
    console.log(b);
})();
console.log(b);
```

Answer:

* `6`
    
* `5`
    

The IIFE (Immediately Invoked Function Expression) has its own scope, and the variable `b` inside `foo` does not affect the outer variable `b`.

%[https://twitter.com/mainulspace/status/1683770387052613635?s=20] 

## **8\. Context Handling in Modern Web Frameworks**

In modern web app development, especially with frameworks like React, maintaining context for callbacks is essential.

Why might this callback lose its context?

```plaintext
let obj = {
  value: 'hello',
  print: function(callback) {
    callback();
  }
};

function sayValue() {
  console.log(this.value);
}

obj.print(sayValue);
```

Answer: `undefined`

The `sayValue` function is called without context, so `this.value` doesn't refer to `obj.value`.

## **9\. Order Matters in Script Loading**

When building with a plugin-based architecture, the way in which scripts are loaded becomes very important.

Can you figure out what the problem is with this code?

```plaintext
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    var foo = '11';
}
console.log(typeof bar());
```

Answer: `function`

Due to hoisting, the function declaration of `foo` is moved to the top, above the return statement, making it the value that gets returned.

## **10\. Handling Sparse Arrays in Reservation Systems**

Sparse arrays may be a concern when designing systems such as theater seat reservations.

How does JavaScript handle sparse arrays in this example?

```plaintext
var a = [1, 2, 3];
a[10] = 10;
console.log(a[6]);
```

Answer: `undefined`

The array `a` now has a length of 11, but only indices 0-2 and 10 have values. All others are `undefined`.

## **11\. Parsing Operations in Dynamic Forms**

In dynamic survey forms, data operations based on user input can become tricky.

Can you explain the output?

```plaintext
let arr = [1, 2, 3];
let res = arr.map(parseInt);
console.log(res);
```

Answer: `[1, NaN, NaN]`

`map` passes three arguments to the callback: `(currentValue, index, array)`. `parseInt` can take two arguments: string and radix, which causes unexpected results.

## **12\. CMS and Variable Assignments**

Working within a CMS may require on-the-fly variable definitions based on user inputs.

What’s the output of this code?

```plaintext
let a = (b = 3) - 3; 
console.log(a, typeof b);
```

Answer: `0, "number"`

The value of `b` is set to `3`, and then subtracted, leaving `a` as `0` and `b` as a number.

## **13\. Temporal Dead Zones**

Frameworks like React and Vue require a clear understanding of block-scoping.

What would this code output and why?

```plaintext
console.log(typeof undeclaredVariable);
console.log(typeof y);
let y = 1;
```

Answer:

* `"undefined"`
    
* Throws a ReferenceError
    

Even though `let` and `const` declarations are hoisted, they're not initialized, causing a temporal dead zone.

## **14\. Shared State in UI Components**

While creating UI libraries, ensuring individual components don’t share unintended state is critical.

What will the following code log?

```plaintext
let arr = new Array(3).fill([]);
arr[0].push(10);
console.log(arr);
```

Answer: `[[10], [10], [10]]`

The same reference to the array is filled in all positions. Modifying one modifies all.

## **15\. Destructuring in API Responses**

Destructuring can simplify data extraction when working with API responses.

Can you explain the result of this destructuring operation?

```plaintext
let {x, x: y} = {x: 23};
console.log(y);
```

Answer: `23`

Here, `x` is matched with a property in the object and then `y` is assigned the value of `x`.

JavaScript remains a cornerstone in the developer’s toolkit, with its nuances often serving as gateways to deeper understanding.

As you prepare for interviews, remember that these tricky questions are not just about memorization but about grasping the essence of the language.

By diving deep into such challenges, you not only prepare for potential interviews but also enrich your JavaScript proficiency.

Best of luck, and keep coding!