20 Essential JavaScript Interview Questions

    arr.sort((a,b) => b.year - a.year);
  

The callback function passed to the sort function determines the sort order. In the code above, the function compares the two values. When the result is greater than zero, b is placed before a which means they will be in descending order. If the result is less than zero, they're already in descending order.

It will print 31. This code is a typical example of closure. The inner function has access to the outer function's x variable even after it returns and when the inner function is called it uses the latest value of x.

    "test" === "test" //true

    [1,2,3] === [1,2,3] //false

    {} === {} //false
  

For primitive types like number, string, boolean, null, and undefined, the values are used for comparison. For objects like arrays, functions, and literal objects {}, object references are used for comparison.

It prints undefined. Note that any pair of curly braces defines a new scope. In an arrow function the value of this is derived from the enclosing scope. Here, the enclosing scope is that of the test object.

In the test object, the value of this is the window object. Since there is no 'value' set in the window object, it evaluates to undefined. The code below fixes the issue.

    const test = {
        value : 10,
        getValue: function() { return this.value  }
    };
    console.log(test.getValue()); //prints 10
 

This works because in a function expression the value of this is determined by how a function is invoked. getValue is invoked as a method of test object. So, the value of this is set to the test object.

    arr.map(elem => elem * 10)
       .filter(elem => elem >= 40)
       .reduce((acc, curr) => acc + curr);
 

The code doesn't throw an error because const is about assignment and not mutation. If you define a variable as const, a new value can't be assigned to a variable. But, the value itself - the object - can be mutated.

    document.querySelector("ul#parent li[data-color='blue']");
  

There is no guarantee that "hi" gets printed in exactly 1 second. It will take atleast 1 second but there is no upper limit.

This is because JavaScript is single threaded and event driven. User events like click, network events like fetch, and timer events generated by setTimeout and setInterval are added to an event queue as they're generated.

JavaScript processes events from the queue one by one. If other events are ahead of our timeout call back function in the queue (or) if any other event is still being processed, it could take more than 1 second for our function to be called.

    function increment() {
        let count = 0;

        function inner() {
          count++;
          return count;
        }

        return inner;
    }

    const inc = increment();
    inc(); //1
    inc(); //2
    

The code below flattens an array at any depth in a recursive way.

    function flatten(arr) {
        if (!Array.isArray(arr))
            return [];

        let result = [];

        for (const elem of arr) {
            if (Array.isArray(elem))
                result.push(...flatten(elem));
            else
                result.push(elem);
        }

        return result;
    }
  

In the input array, an element could be a value or an array. If it's an array, the flatten function is called recursively. Note the use of spread ... operator to expand the returned array into individual elements before adding them to the result.

    function palindrome(str) {
        return str ? str === str.split('').reverse().join('') : false;
    }
  

If the input is a valid string, it's split into an array, the array is reversed, and then joined as a new string. The original string is then compared with the new string.

'second' and 'third' will be printed. Why is that? The function passed to the Promise constructor is known as the executor. When the executor calls reject, control will pass to catch and 'second' gets printed. Once it's completed, control falls through to the next then and 'third' gets printed.

    import multiply, {add, subtract} from "./Math.js";
  

    function map(array, callback) {
        let index = -1;
        const length = array == null ? 0 : array.length;
        const result = [];

        while (++index < length) {
            result[index] = callback(array[index], index, array);
        }
        return result;
    }
 

For every array element, the callback function is called with the element, its index and the array itself. The return value is added to the result array.

Only the element is strictly required to pass to the callback. Index and the array are optional.

  document.getElementById("parent").addEventListener("click", (e) => {
    if (e.target && e.target.nodeName === "SPAN") {
        console.log("clicked")
    }
  });
 

The code above works through event bubbling. When any of the span elements are clicked, the event bubbles to the parent div and the parent's event listener captures the event. It checks if the event target matches the span element.

It's inefficient to write an event listener for every span element. Also, writing the event listener in the parent allows us to dynamically add and remove span elements.

    let result = {};
    codes.forEach(code => result['lang-'+code] = true);
 

The code uses the computed property name feature of ES6 to dynamically construct the object's key.

    function memoize(func) {
        let cache = {};

        function inner(...args) {
            const key = JSON.stringify(args);

            if(key in cache)
                return cache[key];

            cache[key] = func.apply(this, args);

            return cache[key];
        }

        return inner;
    }
  

In the code above, we receive a function func and return a memoized version of it using closure. Note the use of rest parameter ... in args to get any number of arguments as an array.

We build a cache with keys and values. The key is a string formed by combining all the arguments to the function func. The value is the result of calling the function using apply.

    first.filter(elem => !second.includes(elem));
 

    document.getElementById("submit").addEventListener("click", event => {
        event.preventDefault();
        event.target.innerHTML = "cancel";
    });
  

  function once(func) {
    let count = 2;
    let result;

    if (typeof func !== 'function') {
        throw new TypeError('Not a function');
    }

    return function(...args) {
        if (--count > 0)
            result = func.apply(this, args);

        return result;
    }
  }
 

Since count is closed over, it's easy to keep track of how many times a function is invoked.