Uncommon Knowledge about JavaScript Operators
Posted on May 26, 2019 in JavaScript by Matt Jennings
Note: The majority of the information below was taken from Eloquent JavaScript, 3rd edition.
Special Numbers
There are three special values in JavaScript that are considered numbers but don’t behave like normal numbers.
// Outputs "Infinity"
console.log(Infinity)
// Outputs "Infinity"
console.log(Infinity - 1)
// Outputs "-Infinity"
console.log(-Infinity)
// Outputs "NaN" even though
// "NaN" is a value of the number type
console.log(0 / 0)
console.log(Infinity - Infinity)
console.log(Number('blah'))
Unary operators
Operators that use two values are called binary operators, while those that take one are called unary operators. The minus operator can be used both as a binary operator and as a unary operator.
// Output is -8 and this includes // a unary operator and binary operator // (the two - symbols) console.log(-(10 - 2)) // Another unary operator // which does output of "string" console.log(typeof "blah")
Logical Operators
JavaScript supports three logical operators: and, or, and not. The && operator represents logical and. It is a binary operator, and its result is true only if both the values given to it are true.
console.log(true && false) // false console.log(true && true) // true
The || operator denotes logical or. It produces true if either of the values given to it is true.
console.log(false || true) // true console.log(false || false) // false
Not is written as an exclamation mark (!). It is a unary operator that flips the value given to it—!true produces false, and !false gives true.
console.log(!true) // false console.log(!false) // true
The last logical operator I will discuss is not unary, not binary, but ternary, operating on three values. This one is called the conditional operator (or sometimes just the ternary operator since it is the only such operator in the language). When it is true, it chooses the middle value, and when it is false, it chooses the value on the right.
console.log(true ? 1 : 2); // 1 console.log(false ? 1 : 2); // 2
undefined vs null
In JavaScript undefined means that a JavaScript variable has been declared but not yet assigned a value.
var a console.log(a) // undefined
null is an assignment value. It can be assigned to a variable as a representation of no value.
var a = null console.log(a) // null
Testing some things about null and undefined:
console.log(typeof null) // object console.log(typeof undefined) // undefined console.log(null === undefined) // false console.log(null == undefined) // true console.log(null === null) // true console.log(null == null) // true console.log(!null) // true console.log(null) // null console.log(!!null) // false because false is opposite // of true as console.log(!null) evaluates to true console.log(1 + null) // 0 (number) console.log(1 + undefined) // NaN
Automatic type conversion
When an operator is applied to the “wrong” type of value, JavaScript will quietly convert that value to the type it needs, using a set of rules that often aren’t what you want or expect. This is called type coercion.
The null in the first expression becomes 0, and the "5" in the second expression becomes 5(from string to number). Yet in the third expression, + tries string concatenation before numeric addition, so the 1 is converted to "1" (from number to string).
When something that doesn’t map to a number in an obvious way (such as "five" or undefined) is converted to a number, you get the value NaN. Further arithmetic operations on NaN keep producing NaN, so if you find yourself getting one of those in an unexpected place, look for accidental type conversions.
console.log(8 * null)
// 0
console.log("5" - 1)
// 4
console.log("5" + 1)
// "51"
console.log("five" * 2)
// NaN
console.log(false == 0)
// true
console.log(null == undefined);
// true
console.log(null == 0);
// false
Short-circuiting of logical operators
The logical operators && and || handle values of different types in a peculiar way. They will convert the value on their left side to Boolean type in order to decide what to do, but depending on the operator and the result of that conversion, they will return either the original left-hand value or the right-hand value.
The || operator, for example, will return the value to its left when that can be converted to true and will return the value on its right otherwise. This has the expected effect when the values are Boolean and does something analogous for values of other types.
console.log(null || "user")
// user
console.log("Agnes" || "user")
// Agnes