John Au-YeungCheck 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.
