JavaScript Interview Questions — Operators
Tags: beginners, webdev, programming, productivity
Published: 2021-01-24 01:59:47

**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 frontend developer, we need to nail the coding interview.

In this article, we’ll look at some JavaScript operator questions.

### What does the `&&` operator do?

The `&&` operator is the logical AND operator and finds the first falsy expression in its operands and returns it.

For example, if we have:

```
console.log(0 && 1 && "foo");
```

Then we get 0 logged since 0 is the first falsy expression in the operands.

### What does the `||` operator do?

The `||` operator is the logical OR operator and finds the first truthy expression in its operands and returns it.

For example, if we have:

```
console.log("" || "foo" || false);
```

Then we get `'foo'` logged because it’s the first truthy operand in the expression.

It’s also useful for providing a default value if the ones before it are falsy.

### What does the + operator do?

The `+` operator converts whatever is after it to a number if it’s placed before an expression. So if we have:

```
console.log(+"1");
```

Then we get 1 logged.

If we have:

```
console.log(+("1" + 2));
```

Then we get 12 logged.

As we can it also serves as the concatenation operator for strings within the parentheses.

It’s also the addition operator if all operands are numbers.

For example, if we have:

```
console.log(1 + 2 + 3);
```

Then we get 6.

### What does the ! operator do?

The `!` operator converts the operand to a boolean and negates it. It’ll convert falsy values `true` and truthy value to `false` .

For example, if we have:

```
console.log(!0);
console.log(!"");
console.log(!false);
console.log(!NaN);
console.log(!undefined);
console.log(!null);
```

then they all log `true` .

If `!` is placed before a truthy expression then it’ll log `false` .

For example, if we have:

```
console.log(!`1`);
```

Then we’ll see `false` logged.

### What does the !! operator do?

`!!` is the double NOT operator, which coerces the operand to a boolean value. It’ll convert truthy values to `true` and falsy values to `false` .

For example, if we have:

```
console.log(!!0);
console.log(!!'');
console.log(!!false);
console.log(!!NaN);
console.log(!!undefined);
console.log(!!null);
```

They’ll log `false` .

Applying `!!` before any truthy expression should return `true` .

For example:

```
console.log(!!{});
```

logs `true` .

### What’s the rest operator?

The spread operator is denoted by `...` .

We can use it to assign objects or array entries that haven’t been assigned during destructuring into a variable with an array of the remaining values.

If the object is a variable, we can use the rest operator to assign the properties that haven’t been assigned to an object into a variable containing the remaining properties of the original object.

For example, if we have:

```
const [one, two, ...rest] = [1, 2, 3, 4, 5, 6];
console.log(one);
console.log(two);
console.log(rest);
```

Then `one` is 1 and `two` is 2, and `rest` has `[3, 4, 5, 6]` .

It can also be used to spread objects into variables. For instance, we can do that as follows:

```
const { foo, bar, ...rest } = { foo: 1, bar: 2, a: 3, b: 4, c: 5 };
console.log(foo);
console.log(bar);
console.log(rest);
```

Then `foo` is 1, `bar` is 2, and `rest` has `{a: 3, b: 4, c: 5}` .

We can also use it to get the arguments passed into a function that hasn’t been assigned to its own parameter as an array. For example, we can write:

```
const foo = (a, b, ...rest) => console.log(rest);
console.log(foo(1, 2, 3, 4, 5));
```

Then `console.log` should log `[3, 4, 5]` for `rest` .

### What’s the spread operator?

The spread operator is also indicated by the `...` operator. It’ll spread an object’s property into another object and spread the array entries into another array.

For example, if we have:

```
const foo = [1, 2, 3];
const bar = [...foo];
console.log(bar);
```

Then we get `[1, 2, 3]` as the value of `bar` since we made a copy of `foo` and assigned it to `bar` with the spread operator.

It’s also useful for merging arrays. For instance, if we have:

```
const foo = [1, 2, 3];
const bar = [3, 4, 5];
const baz = [...foo, ...bar];
console.log(baz);
```

Then `baz` would be `[1, 2, 3, 3, 4, 5]` since we combined the entries of the `foo` and `bar` arrays into the `baz` array.

The spread operator also works for objects. It’ll make a shallow copy of an object or merge multiple objects into one. If 2 objects have the same property when merging, then the one that’s merged later will overwrite the first one.

For example, if we have:

```
const foo = { a: 1, b: 2, c: 3 };
const bar = { a: 2, d: 4, e: 5 };
const baz = { ...foo, ...bar };
console.log(baz);
```

Then `baz` is `{a: 2, b: 2, c: 3, d: 4, e: 5}` since `bar` is merged in later so property `a` us 2.

The spread operator is also used to spread an array into a list of arguments in a function.

For example, if we have:

```
const add = (a, b) => a + b;
console.log(add(...[1, 2, 3, 3, 4, 5]));
```

Then the `console.log` will show 3 because the 1 and 2 from the array were assigned to the `a` and `b` parameters by the spread operator.

### Conclusion

The `&&` , `||` , `!` , and `!!` are logical operators.

The `&&` operator is the logical AND operator and finds the first falsy expression in its operands and returns it.

The `||` operator is the logical OR operator and finds the first truthy expression in its operands and returns it.

The `!` operator coerce an expression to a boolean then negates it.

The `!!` operator coerce an expression to a boolean without negation.

The `+` operator can be convert expressions to numbers, add numbers, or concatenate strings.

The rest operator is useful for getting the remaining parts of an array or object.

The spread operator is useful for merging objects and arrays or making copies of them. It can also be used to pass an array into a function as arguments.