Javascript interview tricks or the devil is in the details
Published: 2022-04-06 14:10:01

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

```javascript
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](https://twitter.com/modelfak) if you want to see more content.