Vishal Tiwari

Posted on Oct 19, 2024

Top Challenging and hardest javascript technical interview questions with solutions.

#javascript #interview

Hello! I am Vishal Tiwari and I am going to provide you with some challenging javascript interview questions.

1. What will be the output of the following code?

console.log(typeof null); // Output?

Answer:

Output: object

Explanation: This is a well-known quirk in JavaScript. The typeof operator returns "object" when applied to null, even though null is not an object. This behavior is due to how JavaScript was implemented and has been retained for backward compatibility.

2. What will be the output of the following code?

console.log(0.1 + 0.2 === 0.3); // Output?

Answer:

Output: false

Explanation: Due to the way floating-point arithmetic works in JavaScript (and many programming languages), 0.1 + 0.2 does not precisely equal 0.3. Instead, it results in 0.30000000000000004, leading to the comparison returning false.

3. What will be the output of the following code?

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };

a[b] = 123; // What happens here?
console.log(a[b]); // Output?

Answer:

Output: 123

Explanation: When you try to set a property on an object using another object as a key (a[b]), JavaScript converts the object b to a string, which results in "[object Object]". Thus, you are essentially setting the property "[object Object]" to 123, and when you log a[b], it returns 123.

4. What will be the output of the following code?

const arr = [1, 2, 3];
arr[10] = 11;
console.log(arr.length); // Output?

Answer:

Output: 11

Explanation: When you assign a value to an index that is larger than the current length of the array (like arr[10] = 11), JavaScript creates "empty slots" in the array for the indices from 3 to 9. However, the length property of the array reflects the highest index plus one, which in this case is 11.

5. What will be the output of the following code?

let x = 1;
let y = 2;

const obj = {
    x: 10,
    y: 20,
    sum: function() {
        return this.x + this.y;
    }
};

console.log(obj.sum()); // Output?
console.log(obj.sum.call({ x: 100, y: 200 })); // Output?
console.log(obj.sum.apply({ x: 1000, y: 2000 })); // Output?

Answer:

Output:

First console.log: 30
Second console.log: 300
Third console.log: 3000

Explanation:

obj.sum() uses the this context of obj, so it adds 10 and 20, returning 30.
obj.sum.call({ x: 100, y: 200 }) uses the call method to change this to a new object with x and y values of 100 and 200, respectively, returning 300.
obj.sum.apply({ x: 1000, y: 2000 }) does the same with apply, returning 3000.

6. What will be the output of the following code?

console.log(1 + '1'); // Output?
console.log(1 - '1'); // Output?

Answer:

Output:

First console.log: '11'
Second console.log: 0

Explanation:

In 1 + '1', JavaScript performs type coercion, converting the number 1 to a string, resulting in '11'.
In 1 - '1', JavaScript converts the string '1' to a number, resulting in 1 - 1, which equals 0.

7. What will be the output of the following code?

const foo = () => {
    console.log(this);
};

foo(); // Output?

Answer:

Output: The output will depend on the context in which foo is called, but if it's in the global context, it will log the global object (window in browsers or global in Node.js).

Explanation: In arrow functions, this is lexically bound, meaning it uses the this value from the surrounding context. If foo is called in the global scope, this will refer to the global object.

8. What will be the output of the following code?

function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // Output?
console.log(counter.increment()); // Output?
console.log(counter.getCount());  // Output?
console.log(counter.decrement()); // Output?
console.log(counter.getCount());  // Output?

Answer:

Output:

First console.log: 1
Second console.log: 2
Third console.log: 2
Fourth console.log: 1
Fifth console.log: 1

Explanation: The createCounter function creates a closure that maintains its own count variable. Each method (increment, decrement, getCount) accesses and modifies the same count variable, providing consistent behavior.

9. What will be the output of the following code?

const a = [1, 2, 3];
const b = a;
b[0] = 99;
console.log(a); // Output?

Answer:

Output: [99, 2, 3]

Explanation: In JavaScript, arrays (like all objects) are reference types. When b is assigned to a, both variables point to the same array in memory. Thus, modifying b affects a.

10. What will be the output of the following code?

var a = 1;

function outer() {
    var a = 2;

    function inner() {
        var a = 3;
        console.log(a);
    }

    inner();
}

outer();

Answer:

Output: 3

Explanation: In this example, the inner function has its own a variable, which shadows the a variable in the outer function. When console.log(a) is called within inner, it refers to the a defined in inner, which is 3.

11. What will be the output of the following code?

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); // Output?

Answer:

Output: { a: 1, b: 3, c: 4 }

Explanation: The Object.assign() method copies the values of all enumerable properties from one or more source objects (obj1 and obj2) to a target object (an empty object {}). If the same property exists in multiple source objects, the last one takes precedence. Hence, b: 3 from obj2 overwrites b: 2 from obj1.

12. What will be the output of the following code?

function f1() {
    return
    {
        key: "value"
    }
}
console.log(f1()); // Output?

Answer:

Output: undefined

Explanation: JavaScript automatically inserts a semicolon after the return statement if there’s a line break. Therefore, it’s interpreted as return;, which returns undefined. To return the object, you should put the opening brace { on the same line as the return keyword.

13. What will be the output of the following code?

var x = 1;

function foo() {
    console.log(x);
    var x = 2;
}

foo(); // Output?

Answer:

Output: undefined

Explanation: The variable x inside the function foo is hoisted but not initialized until the assignment var x = 2;. Thus, when console.log(x); executes, the local x is declared but not yet assigned, so it outputs undefined.

14. What will be the output of the following code?

const a = [1, 2, 3];
const b = a;

b[0] = 99; // Modifying b
console.log(a[0]); // Output?

Answer:

Output: 99

Explanation: Both a and b refer to the same array in memory. When you modify b[0], you are also modifying a[0] because they both reference the same array.

15. What will be the output of the following code?

console.log(1 + "2" + "3"); // Output?
console.log(1 + 2 + "3"); // Output?

Answer:

First console.log: "123"
Second console.log: "33"

Explanation:

In 1 + "2" + "3", JavaScript converts 1 to a string and concatenates, resulting in "12" and then "123".
In 1 + 2 + "3", JavaScript first evaluates 1 + 2, which equals 3 (a number), and then concatenates "3", resulting in "33".

16. What will be the output of the following code?

const arr = [1, 2, 3];
arr.length = 0;
console.log(arr); // Output?

Answer:

Output: []

Explanation: Setting the length property of an array to 0 effectively clears the array. Therefore, arr is now an empty array.

17. What will be the output of the following code?

function outer() {
    let a = 1;

    function inner() {
        let a = 2;
        console.log(a);
    }

    return inner;
}

const innerFunc = outer();
innerFunc(); // Output?

Answer:

Output: 2

Explanation: The inner function, when called, has its own a variable which is 2. When you call innerFunc(), it logs 2 since it refers to the local variable a within inner.

18. What will be the output of the following code?

const obj = {
    a: 1,
    b: 2,
    c: function() {
        console.log(this.a + this.b);
    }
};

obj.c(); // Output?

Answer:

Output: 3

Explanation: The c method is called on the obj, so this inside the method refers to obj. Thus, it outputs the sum of obj.a and obj.b, which is 3.

19. What will be the output of the following code?

console.log(0.1 + 0.2 === 0.3); // Output?
console.log(Number((0.1 + 0.2).toFixed(1)) === 0.3); // Output?

Answer:

First console.log: false
Second console.log: true

Explanation:

The first statement returns false due to floating-point precision issues (0.1 + 0.2 equals 0.30000000000000004).
The second statement rounds 0.1 + 0.2 to 0.3 with toFixed(1) and converts it back to a number, resulting in a comparison of 0.3 === 0.3, which is true.

20. What will be the output of the following code?

function test() {
    console.log(this);
}

test(); // Output?

Answer:

Output: global object (or undefined in strict mode)

Explanation: In non-strict mode, the value of this inside a function called in the global context is the global object (i.e., window in browsers or global in Node.js). In strict mode, this would be undefined.

21. What will be the output of the following code?

const obj1 = { a: 1 };
const obj2 = { a: 2 };

const obj3 = Object.create(obj1);
Object.assign(obj3, obj2);

console.log(obj3.a); // Output?
console.log(obj3.__proto__.a); // Output?

Answer:

First console.log: 2
Second console.log: 1

Explanation:

Object.assign(obj3, obj2) copies properties from obj2 to obj3, so obj3.a becomes 2.
obj3.__proto__ refers to obj1, which has the property a with the value 1.

22. What will be the output of the following code?

var a = 1;

function outer() {
    var a = 2;

    function inner() {
        a++;
        console.log(a);
    }

    inner();
}

outer(); // Output?

Answer:

Output: 3

Explanation: In the inner function, a refers to the variable defined in outer. When inner is called, a is incremented from 2 to 3 and logged.

23. What will be the output of the following code?

const person = {
    name: 'John',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const greet = person.greet;
greet(); // Output?

Answer:

Output: Hello, my name is undefined

Explanation: When greet is called without a context (i.e., not as a method of person), this is not bound to person. In non-strict mode, this defaults to the global object, and since name is not defined on the global object, it logs undefined.

24. What will be the output of the following code?

console.log([1] == true); // Output?
console.log([0] == false); // Output?

Answer:

First console.log: true
Second console.log: true

Explanation:

For console.log([1] == true), the array [1] is converted to a primitive type, resulting in 1, and 1 == true is true.
For console.log([0] == false), the array [0] converts to 0, and 0 == false is also true.

25. What will be the output of the following code?

const foo = (function() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
})();

foo(); // Output?
foo(); // Output?
foo(); // Output?

Answer:

First foo(): 1
Second foo(): 2
Third foo(): 3

Explanation: The foo function maintains a closure around the count variable, which is incremented each time foo is called, preserving its state across calls.

26. What will be the output of the following code?

let a = 1;

function first() {
    let b = 2;

    function second() {
        let c = 3;
        console.log(a); // What does this log?
        console.log(b); // What does this log?
        console.log(c); // What does this log?
    }

    second();
}

first(); // Output?

Answer:

Output:

First console.log(a): 1
Second console.log(b): 2
Third console.log(c): 3

Explanation: a is accessible in the second function due to closure. b is also accessible as it is defined in first. c is local to second, so all three variables are logged correctly.

27. What will be the output of the following code?

const obj = {
    num: 1,
    increment: function() {
        this.num++;
    }
};

const newObj = { num: 2 };
obj.increment.call(newObj);
console.log(newObj.num); // Output?

Answer:

Output: 3

Explanation: The call method invokes increment with newObj as this, so this.num refers to newObj.num. The increment operation changes newObj.num from 2 to 3.

28. What will be the output of the following code?

function count() {
    for (var i = 1; i <= 3; i++) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    }
}

count(); // Output?

Answer:

Output:

4
4
4

Explanation: The setTimeout functions are all referencing the same i variable due to hoisting. When the timeouts execute, i has already been incremented to 4, resulting in 4 being logged three times.

29. What will be the output of the following code?

const array = [1, 2, 3];

const newArray = array.map((item) => {
    item += 1;
    return item;
});

console.log(array); // Output?
console.log(newArray); // Output?

Answer:

array: [1, 2, 3]
newArray: [2, 3, 4]

Explanation: The map function creates a new array based on the transformation applied to each item. The original array remains unchanged, while newArray reflects the increments.

30. What will be the output of the following code?

const foo = () => {
    console.log(this);
};

foo(); // Output?

Answer:

Output: The output will depend on the context in which foo is called, but if it's in the global context, it will log the global object (window in browsers or global in Node.js).

31. What will be the output of the following code?

const obj = {
    value: 42,
    method: function() {
        const inner = () => {
            console.log(this.value);
        };
        inner();
    }
};

obj.method(); // Output?

Answer:

Output: 42

Explanation: The inner function is an arrow function, which lexically binds this to the method function's context. Therefore, this.value refers to obj.value, which is 42.

32. What will be the output of the following code?

const x = 10;

function myFunction() {
    console.log(x);
    const x = 20;
}

myFunction(); // Output?

Answer:

Output: ReferenceError

Explanation: The variable x is hoisted within myFunction, meaning it exists in the function scope but is not initialized until after the console.log(x). This results in a ReferenceError because the x variable is accessed before its declaration.

33. What will be the output of the following code?

const obj = {
    name: 'Alice',
    greet: function() {
        console.log('Hello ' + this.name);
    }
};

const greet = obj.greet;
greet(); // Output?

Answer:

Output: Hello undefined

Explanation: When greet is called without an explicit context, this does not refer to obj, so this.name is undefined.

34. What will be the output of the following code?

console.log(typeof NaN); // Output?

Answer:

Output: number

Explanation: In JavaScript, NaN (Not-a-Number) is considered a numeric type, and typeof NaN returns "number".

35. What will be the output of the following code?

const a = [1, 2, 3];
const b = a; // reference
b.push(4);
console.log(a); // Output?

Answer:

Output: [1, 2, 3, 4]

Explanation: Both a and b refer to the same array in memory. When you push 4 into b, it affects a as well.