You want to add some numbers together.

The output is:

As you can see, JavaScript’s addition operator is simple reflection of the same mathematical operator. You can add number literals together, or variables of numbers, or a mixture. Additions can happen multiple times in one statement. Essentially everything you expect from the Math operator, you can do in JavaScript. It should be noted that adding number variables together does not affect the underlying variable.

If you attempt to add two strings together, you’ll actually get both of those strings combined into one new string, rather than the addition of those numbers. For example, '1' + '1' actually gives you 11, not 2. This is because + is also the string concatenation operator (see Chapter 3 for more info on string concatenation).

You want to subtract some numbers from each other.

The output is:

Just like the mathematical operators in JavaScript, the subtraction operator works pretty much identically to its mathematical equivalent. Importantly: variables you use as operands in the statement will not be modified as part of the operation.

Internally, the subtraction operator also coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' - '1' is the same as '1 - 1'. This is a big difference between how the subtraction and addition operators behave. While subtraction will coerce the values into numbers, addition does not (well, it would do, but when using + with two strings, it actually becomes the string concatenation operator, discussed in Chapter 3).

You want to multiply some numbers together.

JavaScript has a set of recognizable mathematical operators, including the multiplication (*) operator, which you can use to multiply numbers (or variables of numbers) together .

The output is:

Just like all other mathematical operators, the multiplication operator works pretty much identically to the mathematical equivalent. Importantly, variables you use as operands in the statement will not be modified as part of the operation.

Internally, the multiplication operator also coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' * '1' is the same as 1 * 1.

You want to divide some numbers.

The output is:

Just like the other mathematical operators in JavaScript, the division operator works pretty much identically to the mathematical equivalent. Importantly: any variables you use as operands in the statement will not be modified as part of the operation.

Internally, the division operator also coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' / '1' is the same as 1 / 1.

You want to get the remainder of a division operation (modulus) of some numbers.

As in many programming languages, JavaScript has a modulo operator that will return the remainder of an Euclidean division. In other words, it will return the remainder of a division that has been divided into whole parts. For example, getting the modulo of 3 and 1 is 0, as 1 divides equally into three parts; however, the modulo for 3 % 2 returns 1, as 2 goes into 3 with 1 remaining.

The output is:

The modulo operator uses Euclidean division to work out the amount of whole numbers of the right hand operand go into the left hand operand, and retains the remaining amount. This may seem pretty useless at first, but it’s actually a very useful way to work out number properties inside loops, such as odd and even numbers (number % 2) or rows of numbers (number % n). This has such prevalent use in programming that almost all computer languages implement modulo operators as either using the % sign or using the keyword mod.

Internally, the modulo operator also coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' % '1' is the same as 1 % 1.

You want to determine if one number is less (smaller) than another number.

The output is:

The less than operator simply asserts that the left hand operand has a smaller numerical value than the right hand operand. If it does, then the expression will return the Boolean true. If the left hand operand’s numerical value is equal to or greater than the right hand operand, then it will return the Boolean false.

Just like pretty much all numerical/mathematical operations in JavaScript, the less than operator coerces both operands to be numbers using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' < '1' is the same as 1 < 1.

You want to determine if one number is greater (bigger) than another number.

The output is:

The greater than operator simply asserts that the left hand operand is a greater numerical value than the right hand operand. If it is, then the expression will return the Boolean true. If the left hand operand’s numerical value is equal to or smaller than the right hand operand, then it will return the Boolean false.

Just like pretty much all numerical/mathematical operations in JavaScript, the greater than operator coerces both operands to be numbers using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' > '1' is the same as 1 > 1.

You want to determine if one number is less (smaller) than another number, or exactly the same size.

The output is:

The less than equal operator simply asserts that the left hand operand is a smaller or equal numerical value than the right hand operand. If it is, then the expression will return the Boolean true. If the left hand operand’s numerical value is greater than the right hand operand, then it will return the Boolean false. The crucial difference between this and the less than operator is what Boolean is returned when both operands are equal. In the case of the less than or equal operator, it’s true (whereas the less than operator will return false).

Just like pretty much all numerical/mathematical operations in JavaScript, the less than or equal operator coerces both operands to be numbers using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' <= '1' is the same as 1 <= 1.

You want to determine if one number is greater (bigger) than another number, or exactly the same size.

The output is:

The greater than or equal operator simply asserts that the left hand operand is a greater or equal numerical value than the right hand operand. If it is, then the expression will return the Boolean true. If the left hand operand’s numerical value is smaller than the right hand operand, then it will return the Boolean false. The crucial difference between this and the greater than operator is what Boolean is returned when both operands are equal. In the case of the greater than or equal operator, it’s true (whereas the greater than operator will return false).

Just like pretty much all numerical/mathematical operations in JavaScript, the greater than or equal operator coerces both operands to be numbers using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, '1' <= '1' is the same as 1 <= 1.

You want to loosely determine the equality of two values—to assert that are identical values, while not necessarily being the same type.

The output is :

The abstract equality operator works similarly to the strict equality operator, but it does not fail after type checking, instead, it coerces types to match. If the types of both operands match, it simply performs a strict equality check, but if they don’t, then it will attempt to coerce them using the rules in Figure 2-1 (the X axis being the right hand operand, the Y axis being the left hand operand, and the resulting cell being the type that both operands are coerced into) .

After coercing the types to be the same (where possible), it will then behave the same as a strict equality check; if the types are not the same, it will return the Boolean false. If they are numbers of the same size, strings of the same content, Booleans of the same value, or objects/arrays that point to the same reference in memory, then the strict equality operator returns the Boolean true. If they don’t match any of these criteria, then it will return the Boolean false, with the exception of NaN, which you will need to use Number.isNaN() for (as discussed in Chapter 1).

Because of the added complexity in an abstract equality operator versus a strict equality operator, it is always recommended to use the strict version, unless you absolutely have a reason to use the abstract one. Also remember you can cast values to different types yourself using the constructor methods mentioned throughout Chapter 1.

You want to determine the equality of two values—to assert that they are identical values.

The output is:

The strict equality operator first checks that both operands are the same type (e.g., they are both numbers). If they are not the same type, it will return the Boolean false. If they are numbers of the same size, strings of the same content, Booleans of the same value, or objects/arrays that point to the same reference in memory, then the strict equality operator returns the Boolean true. If they don’t match any of these criteria, then it will return the Boolean false. This makes it the best way to determine the equality of two values. There is one exception to this rule—and that is the literal value NaN, if either (or both) of the operands is NaN then it will return the Boolean false. Quizzically, this makes the statement NaN === NaN return the Boolean false. If you want to assert that something is NaN, you’ll need to use Number.isNaN(), as discussed in Chapter 1. See Figure 2-2 for an illustration of this flow .

You want to loosely determine the inequality of two values—to assert that are not identical values, even when coerced to be the same type.

The output is:

The abstract inequality operator works almost identically to the abstract equality operator, except that it returns the opposing Boolean value. It performs the same type coercions as mentioned in Table 2-1. After coercing the types to be the same (where possible), it will then behave the same as a strict inequality check; if the types are not the same, it will return the Boolean true. If they are numbers of the same size, strings of the same content, Booleans of the same value, or objects/arrays that point to the same reference in memory, then the strict equality operator returns the Boolean false. If they don’t match any of these criteria, then it will return the Boolean true, with the exception of NaN, which you will need to use Number.isNaN() for (as discussed in Chapter 1).

Because of the added complexity in an abstract inequality operator versus a strict inequality operator, it is always recommended to use the strict version, unless you absolutely have a reason to use the abstract one. Also remember that you can cast values to different types yourself, using the constructor methods mentioned throughout Chapter 1.

JavaScript’s Strict Inequality Operator, !==, compares the two operands it is given for inequality .

The output is:

The Strict Inequality Operator works almost identically to the Strict Equality operator, except that the Boolean values are reversed. It checks that both operands are the same type (e.g. they are both numbers), if they are not the same type, it will return the Boolean true. If they are numbers of the same size, Strings of the same content, Booleans of the same value, or Objects/Arrays that point to the same reference in memory, then the Strict Equality Operator returns the Boolean false. If they don’t match any of these criteria, then it will return the Boolean true. This makes it the best way to determine the inequality of two values. Similarly to the Strict Equality Operator, if either (or both) of the operands is NaN then it will return the Boolean true, meaning NaN !== NaN return the Boolean true. If you want to assert that something is not NaN, you’ll need to use Number.isNaN() as discussed in Chapter 1. Refer to Figure 2-3 for an illustration of this flow.

Because it is such a common task to perform in programming, JavaScript comes with the increment operator (++). You can use the increment operator with a variable to set the value to value + 1. It comes in two flavors—prefix (putting the ++ before the value) and postfix (putting the ++ after the value), and they have some subtle differences .

The output is:

The increment operators take the variable from the statement, adds one to it, and then sets the variable to the new value. The difference between postfix and prefix operators comes from how the interpreter treats them. The postfix operation is treated as a “left hand side expression,” which puts its code equivalent to value += 1. The prefix operation is treated as a “unary expression,” which is an expression with one operand, a standalone operation. It puts its code equivalent to something like value = value + 1.

The practical difference between these is that the postfix operation (coincidentally to its name) will return the original value, and then increment it after the statement has been parsed, while the prefix operation increments the value, and then returns it. Unless you have a specific reason to use the postfix operator, it is always recommended to use the prefix operator. If you ever try to assign a value upon increment using the postfix operator, it will assign the previous value, not the incremented version .

The output is:

You need an easy and concise way to convert a numeric string into an actual number, for later number-based operations.

The output is:

The JavaScript interpreter specifically picks up the + sign with no preceding value as a “unary + operator” (section 12.4.9 of the ES6 spec, or section 11.4.6 of the ES5 spec). When found, it takes the value following it and tries to convert it to a numeric value. If it is unable to, it will convert it into the NaN (Not a Number) object .

Internally, it coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). In other words, +4 is the same as Number(4). Because of this similarity, it is probably better to just use the number constructor syntax (Chapter 1), as it reads much easier.

You have a number that is positive or negative, and you want to change it to the opposing sign.

The output is:

The JavaScript interpreter specifically picks up the - sign with no preceding value as a “unary - operator” (section 12.4.10 of the ES6 spec, or section 11.4.7 of the ES5 spec). When found, it takes the value and simply flips the sign from a + to a -, or a - to a +.(-)

Internally, it coerces the value using the internal ToNumber function (section 7.1.3 in ES6, section 9.3 in ES5), which has the same effect as using the number constructor (discussed in Chapter 1). It does this before it swaps the sign, so can be useful to swap signs on implicit numbers (e.g., numerical strings).

You want a simple way to toggle the value of a Boolean, from either true to false, or from false to true.

The logical NOT operator is a unary expression (that is, it only has one operand), which allows you to toggle Boolean values between true and false. It has the added ability of coercing implicit Boolean values to Booleans before flipping them (for example, a number of 0 or 1).

The output is:

The first thing the logical NOT operator does is convert the value into a Boolean using the ToBoolean internal function (discussed in Chapter 1 in much more detail, and section 7.1.2 of the ES6 spec or section 9.2 of the ES5 spec). After it has done this, it very simply converts a value of true to false and false to true.

The logical NOT operator can be seen in the wild mostly inside if statements, as it is a easy way to assert something is the Boolean opposite of its value, which makes it ideal for control flow. Of all of the unary operators that exist, it is safe to say that the logical NOT operator is the most widely used .

You need to delete a property on an object or array and remove the property name from the list of keys in the object or array.

The delete unary operator (that is, it only has one operand) is the way to remove properties from objects or arrays.

The output is:

delete works by removing a property from an object or array. It is important to note that delete does not work on variables or declared functions—that is, it cannot delete things that are not properties of objects or arrays.

A common misconception around delete is that it is useful for freeing up memory. Delete does not free up any memory as a direct result of its operation. For example, if you have an object that is referenced elsewhere in your code, as well as in an object you are deleting from, then the object still has a hard reference, and therefore will not be freed. The only way delete will ever appear to be freeing memory is if the deleted property was the only hard reference to an object, function, or array. Consider the code in Listing 2-20.

The output is:

As you can see, no memory is freed by using the delete operator, as the license1234 variable still exists and is referencing the same object. Any memory freed by the delete operator is merely a side-effect. In fact, there is no way in JavaScript to manually free memory. You can set variable values to undefined to “dereference” their existing values, but this is not a guaranteed way of freeing memory. JavaScript’s GC (Garbage Collector) is the only way memory is freed, and it automatically runs when the particular implementation detects there is “garbage” or no-longer-referenced objects to be removed from memory. This is done using the mark-and-sweep algorithm. Using this algorithm, each object will be marked as “in use” and therefore referenced by other objects. When no references can be made the object is not considered to be in use, and at that time memory is then released .

The void operator is another unary operator (that is, it only has one operand), which allows you to evaluate an expression and explicitly return undefined from the expression. Simply prefix any expression with void and the expression will return undefined.

The output is:

The JavaScript interpreter reads the void keyword and executes the expression after it. It explicitly always returns undefined, unless of course the remaining expression throws an Error.

While this has pretty limited utility, it can be useful in some cases. One case, for example, is when using arrow function syntax (described in Chapter 13), which uses the last expressions value as the implicit return value. You can use void to always ensure you’re returning undefined.

Another example of real-world usage you may frequently see are developers using void 0 in place of undefined. This is due to a bug in the ES3 spec (and therefore older browsers) allowing the undefined literal value to be overridden. Because undefined was not guaranteed to be the undefined literal value, some developers chose to program defensively, and use void 0 as a syntactical replacement, which is guaranteed to be undefined. Generally this should be avoided, as today almost all browsers follow the ES6 or ES5 spec, which explicitly tell implementers that the undefined value is not writable (ES6 section 18.1.3, ES5 section 15.1.1.3).

You want to be able to determine the type of a literal value.

The output is:

The typeof operator checks predefined internal values using the specification (ES6 section 12.4.6, ES5 section 11.4.3). If the operand given is a literal value with a defined typeof value, then the operator returns that value. If not, the operator returns "object". The return value of typeof is always a string, hence typeof typeof will always evaluate to a string. See Table 2-1 for a summary of return types.

You want to be able to check if a non-literal value inherits from an object, such as the date constructor .

The typeof operator only asserts against literal values, which makes it useless for asserting against more complex objects, such as the Date object. Instead, the instanceof can be used to determine if a variable or object is an instance of a particular constructor.

The output is:

The instanceof unary operator checks to see if the left hand operator is an instance of the right hand operator. It knows if a particular object has been instantiated by a constructor because of a piece of JavaScript internals known as the prototype.

JavaScript’s prototype allows objects to inherit properties and methods from constructors. Constructors define a .prototype property that is an object of properties and functions to assign to new objects. When a constructor gets called with the new keyword (e.g., new Date()), it creates a new object, whose __proto__ property is set to a reference of the constructor’s .prototype property. instanceof essentially asserts that the left hand operand’s __proto__ property is equal to the right hand’s .prototype property. But it goes further than that, because instanceof will also check the constructor’s __proto__ property, and that constructor’s __proto__ property, and so on. This is called the “prototype chain,” and it means that you can assert against an object’s ancestry. As a side note, all non-literal values have an ancestry starting with object, which is why all constructors and instances will assert that they are instances of object. This may seem like a complex topic, and that’s because it is—but it’s covered in much more detail later in the book .

You want to determine if an object contains (in itself or as part of its prototype) a particular property or function.

The output is:

The in operator checks for the existence of a property inside of an object, even if that property is not enumerable (enumerability refers to if a property appears in loops, it is discussed much more in Chapter 8) or even if is set to the undefined literal .

It will also check for properties or methods that it has inherited from constructors it has been created from (the same kind of ancestry pattern we see in instanceof). These might not be directly attached to the object, but will be part of the Object’s prototype. For more on how JavaScript’s prototype works, read ahead to Chapter 18.

The logical AND operator (&&) is an incredibly useful tool for short-circuit evaluation of a series of expressions. It will executes each expression, continuing if the expression is true, until the first expression that returns false, and will exit early at that point. This is useful for combining Boolean expressions in a useful and performant way.

The output is:

The JavaScript interpreter will separate each expression on either side of the logical AND operator and run them serially (in sequence, one after the other). If an expression returns false, it will exit the entire statement early and return false. If it gets to the end of all expressions—each one returning true—then the entire statement will return true.

Short-circuit evaluation is the crux of control flow in almost any programming language. It keeps things performant by ending at the first false expression, which means developers seeking for performant control flow can easily order their expressions from most performant to least. JavaScript performance is not something this book will dive into, as it’s a vast topic in and of itself, but there are many great books you can read on the topic of performance .

The logical OR OPERATOR (||) is pretty much the antithesis of the logical AND operator. It will execute each expression continuing if the expression is false, until the first expression that returns true, and will exit early at that point. This is useful for combining Boolean expressions in a useful and performant way .

The output is:

The JavaScript interpreter will separate each expression on either side of the logical OR operator and run them serially (in sequence, one after the other). If an expression returns true, it will exit the entire statement early and return true. If it gets to the end of all expressions—each one returning false—then the entire statement will return false. This is effectively the opposite behavior of the logical AND operator.

Short-circuit evaluation is the crux of control flow in almost any programming language. It keeps things performant by ending at the first true expression, which means developers seeking for performant control flow can easily order their expressions from most performant to least. JavaScript performance is not something this book will dive into, as it’s a vast topic in and of itself, but there are many great books you can read on the topic of performance.

The conditional ternary (that is, it takes three expressions) operator (?) is a quick-fire way to assign a variable based on a condition. Simply begin a variable assignment as you would normally, followed by a condition, followed by two potential values. This is better than than the overly verbose if(condition) { value } else { otherValue }.

The output is:

The conditional ternary operator uses a ? to denote that the left hand expression should be treated as a conditional expression, then the remaining two expressions—separated by :—will be used based on the resulting conditional value. If the conditional expression returns true, the value left of the : is used. If the conditional expression returns false, the value right of the : is used. It behaves exactly like an if/else statement that assigns one value, in that the conditional is coerced using the same ToBoolean internal function, and the resulting expressions will become the variable’s value.

Because each operand can be a full expression you can also create complex expressions, such as combining short-circuit evaluation or multiple conditional ternary operators—as demonstrated in the examples—this can become messy very quickly. As a good rule of thumb, use this only for setting single values based on a single condition; if you find yourself nesting conditional ternary operators, it is most likely going to be clearer as an if statement .

The comma operator has some caveats but is a great way to express multiple expressions in a single statement, which has various uses.

The output is

The JavaScript interpreter treats the comma operator as a separation of expressions. It works similarly to the semicolon (which explicitly closes a statement). It has limited use, and in fact it can be quite confusing to use. It works best inside for and while loops (as demonstrated).

Another popular use of the comma operator is attempting to use them in place of semicolons. Many large libraries, such as Zepto.JS, feature little to no semicolons in their source code, and rely on the comma operator instead, as they believe this reads better. This is completely not recommended, as it is trivially easy to get stung by doing this, especially because JavaScript has a feature called ASI (automatic semicolon insertion), which will cause the parser to automatically insert semicolons in your code to close of statements, sometimes in undesirable places. This book doesn’t cover ASI rules simply because if you stick to the best practice of using semicolons, your code will work .