Basic JavaScript Interview Questions

John Au-Yeung - Jan 24 '21 - - Dev Community

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

To get a job as a JavaScript developer, front end or otherwise, we need to nail the coding interview.

In this article, we’ll look at some basic questions and the answers to them.


What’s the Difference Between undefined and null?

They both indicate a non-existent value, but we have to set null explicitly.

On the other hand, undefined is the value for undeclared variables, array positions that have been set with a value, and declared variables that haven’t been set with a value.

Also, null has the type object and undefined has type undefined. They’re both falsy and they are both primitive types.

The following will get us undefined:

let x;
let y = undefined;
Enter fullscreen mode Exit fullscreen mode

Also, array positions that haven’t been assigned a value will also be undefined:

let arr = [];
arr[1];
Enter fullscreen mode Exit fullscreen mode

arr[1] is undefined above.

Holes in arrays are also undefined:

let arr = [,1];
arr[0]
Enter fullscreen mode Exit fullscreen mode

They both convert to false when cast to a boolean as follows:

Boolean(undefined);
Boolean(null);
!!undefined;
!!null;
Enter fullscreen mode Exit fullscreen mode

null equals undefined when compared with the == operator, because they’re falsy. They aren’t equal when we compare them with the === operator since they’re of different types.


What Does the && Operator Do?

The && operator is the AND operator and it finds the first falsy expression and returns it. If there are no falsy expressions then it returns the last expression.

For example, if we have:

let foo = null && undefined && 'foo';
Enter fullscreen mode Exit fullscreen mode

The foo is null since null and undefined are falsy.

If we have:

let foo = true && 'foo';
Enter fullscreen mode Exit fullscreen mode

Then we have 'foo' assigned to foo. It does short-circuit evaluation to prevent unnecessary checks.

It’s also a handy shortcut for:

if (condition){
  doSomething();
}
Enter fullscreen mode Exit fullscreen mode

Because the code above is the same as:

condition && doSomething();
Enter fullscreen mode Exit fullscreen mode

Because, if condition is falsy then doSomething(); won’t run because of short-circuiting.


What Does the || Operator Do?

The || operator is the OR operator. It finds the first truthy expression and returns it.

It also uses short-circuiting to avoid unnecessary checks. Therefore, it’s handy for setting a default value of a variable in case the ones before the default choice are falsy.

For example, if we have:

let foo = null || undefined || 'foo';
Enter fullscreen mode Exit fullscreen mode

Then we have 'foo' as the value of foo.


What Does the + Operator Do?

The + operator has three meanings.

1. Unary +

If it’s put before an expression, it’ll try to convert it to a number. Putting an operator before an expression makes it a unary operator.

For example, if we want to get the UNIX timestamp for the current date-time, we can write:

+new Date();
Enter fullscreen mode Exit fullscreen mode

+new Date(2020,1,1); will return1580544000000.

It’s a fast way to convert a string to a number also. For instance:

+'1'
Enter fullscreen mode Exit fullscreen mode

This returns 1.

Therefore, the unary + operator tries to convert an expression after it. We can convert an expression to a number by wrapping it around parentheses as follows:

+(1 + '1');
Enter fullscreen mode Exit fullscreen mode

Then we get 11 since 1 + ‘1’ returns '11'.

If the expression can’t be converted to a number, it’ll return NaN.

2. Addition operator

If the + operator is between two numbers, it’ll add the two numbers.

For example, if we have:

1 + 2;
Enter fullscreen mode Exit fullscreen mode

Then we get 3.

If we have:

let a = 1, b = 2;
a + b;
Enter fullscreen mode Exit fullscreen mode

We also get 3.

3. Concatenation operator

If one or more operands in the expression aren’t numbers, it’ll try to convert it in different ways.

For example, if we have:

1 + '1'
Enter fullscreen mode Exit fullscreen mode

Or:

'1' + 1
Enter fullscreen mode Exit fullscreen mode

Then we get '11'.

Of course, if we have two strings as operands then the + operator will be used for string concatenation:

'foo' + 'bar';
Enter fullscreen mode Exit fullscreen mode

That’ll return “foobar”.


What’s the Difference Between == and ===?

The difference between == and === is that == only checks the content for equality and === checks both the content and the data type for equality.

For example:

2 == '2'
Enter fullscreen mode Exit fullscreen mode

This will return true since they both have 2 as their content. This is because == does type coercion.

The full list of rules for type coercion for the == operator is:

  1. If x and y have the same value, compare with the === operator.
  2. If x is null and y is undefined, return true.
  3. If x is undefined and y is null, return true.
  4. If x has the number type and y is a string, return x == +y.
  5. If x has the string type and y is a number, return +x == y.
  6. If y has the boolean type, return +x == y.
  7. If y is a boolean, return x == +y.
  8. If x is a string, symbol, or number and y is an object then:
  • Return x == y.valueOf() if y is a String instance.
  • Return x == y.valueOf() if y is a Number instance.
  • Return x == y[Symbol.toPrimitive]() if y is any other kind of object or value.

Conclusion

These are the most basic questions. To nail a JavaScript interview, these are the questions to start studying for.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .