Javascript interview tricks or the devil is in the details

I passed a lot of interviews and some of them were really tired because questions might be super easy, but if you have used it but never thought about how it works, it can create difficulties.

Nullish coalescing operator

For example, you may often see such construction in your codebase

const variable = 0;
const result = variable ?? 100;
console.log(result);

The question is what will be output in your console?

The output result is: 0
Because, the double question mark operator ?? is falsy when the variable is null or undefined, in other words when it isn't defined in your program. Otherwise, it is true.

Default sort behavior

Let's assume you have such a list of numbers

const arr = [590, 5, 88, 8, 9];
const sortedArr = arr.sort();
console.log(sortedArr);

What do you think the result value is equal to?
In one of my past interview, I answered logically, that result would be
[5, 8, 9, 88, 590]
It is wrong because Javascript sort function works differently, if you don't use any callback handler, by default sorting is based on the first symbols of array items, and doesn't matter what is the next after first. So, 590 first character is 5, 88 first character is 8, and so on. Therefore the result is [5, 590, 8, 88, 9].

Prototype

What is the difference between F.Prototype and object.__ proto__?

In order to answer this question, I would ask when do we use F.Prototype?
As rule, it calls only in case you gonna create a new object from the function constructor or create a new instance from the class. Let's take a look at this example:

class B {
  methodOfClass() {}
}

// Or the same in the traditional way

function myFunctionConstructor() {}
myFunctionConstructor.prototype.methodOfClass = () => {}

Usage

const bObject = new B();
bObject.methodOfClass();

This construction is almost equal to (until you want to use a constructor in your class, but for learning purposes, it is a good example)

const object = Object.create(B.prototype);

So, let's take a look under the hood operator "new", I prepared my own implementation operator "new", to show you in the nutshell how it works

function New(constructor, ...args) {
   const obj = Object.create(constructor.prototype);
   return constructor.apply(obj, args) || obj;
}
const newObject = New(B);

Here we set the prototype for the new object literal, and call the constructor of our class by method. "apply". So, F.prototype is special property to initialize a new instance of object, therefore F.prototype is a prototype for a new object.

And object.__ proto__ helps even better explain how works operator "new". __ proto__ is an internal built object property, which is useful when you want to extend your object B with new properties from object A.
Above example with F.prototype uses object.__ proto__ as well, as a mechanism to create new instance of an object with __ proto__ based on class B.prototype.
It is truly B.prototype === newObject.__proto__

How you can get the __ proto__ of an object?
Object.getPrototypeOf(obj);

How you can set the __ proto__ of an object?
Object.setPrototypeOf(obj);

So, __ proto__ is the internal basic feature for inheritance in Javascript, and the mechanism creating objects by "new", is based on this feature as well.

Example:

const cat = {
  color: 'black'
};
const catBob = {
  name: 'Bob'
};
Object.setPrototypeOf(catBob, cat);
console.log(catBob.color);

I hope this roadmap Javascript learning and interview preparation path more clear for you. Wish you good luck in this journey!

Follow me on 🐦 Twitter if you want to see more content.

Comments

[sunflowerseed]

yup, there are two things to remember about sort() in JavaScript:

1. it is sort in place (not creating a new array but sort inside the existing array)
2. by default, it compares the element as if they are strings