Self-Taught Developer Journal, Day 25: TOP JavaScript Fundamentals Part 1 - Operators cont.

Today I learned...

Operators

Numeric Conversion

Using the unary plus ("+") to convert non-numbers before a binary plus ("+").

let toys = "2";
let books = "8";

alert( +toys + +books );

// Numbers function
alert( Numbers(toys) + Numbers(books) );

The unary plus is equivalent to Numbers(), but shorter. The unary plus is performed before the binary plus because it has higher precedence.

Operator Precedence

Every operator is assigned an precedence value. A higher precedence is performed first. When the value is equal, the operators are executed from left to right. There is a operator precedence table to refer to when determining operator precedence.

Assignment "=" returns a value

The assignment, "=", operator also returns a value like all operators in JavaScript. After a value is assigned (ex. let a = 3), the value is returned.

let a = 1;
let b = 0;

let c = 1 + (a = b + 9);

alert(a); // 9
alert(c); // 10

The result of the expression, a = b + 9, is the value that was reassigned to a, 9. However, this method of assignment isn't preferred since it isn't readable.

Modify-in-place

The shorthand way to use an operator and store the result in the same variable.

Instead of doing this:

let n = 2;
n = n + 2;
n = n * 2;

We can use the operators, += and *=.

let n = 2;
n += 2;
n *= 2;

The operators have the same precedence as the assignment operators so they will execute after calculations.

Increment/Decrement

There are special operators to increment and decrement by 1, ++ and --. These operators can only be applied on variables and will return an error when used on numbers.

Increment

let a = 9;
a++; // equivalent to a = a + 1
alert( a ); // 10

Decrement

let a = 9;
a--; // equivalent to a = a - 1
alert( a ); // 8

These operators can be placed before a variable, also known as prefix form. Or placed after a variable, known as postfix form.

The difference between these two forms are there return values. The prefix form returns the new value, while the postfix form return the old value first before any increment\decrement.

Prefix Form

let counter = 0;
let a = ++counter;
alert( a ); // 1

The prefix form of ++counter increments counter and returns the value 1.

Postfix Form

let counter = 0;
let a = counter++;
alert( a ); // 0

The postfix form of counter++ also increments counter BUT returns the old value 0 first and assigns the value 0 to a.

Comma

"The comma operator , is one of the rarest and most unusual operators."

It allows us to evaluate several expressions, but only returns the last result.

let a = (0 + 1, 2 + 3);
alert( a ); // 5 (the result of 2 + 3)

It is sometimes used for complex constructs and used in many JavaScript frameworks.

// three operations in one line

for (a = 2, b = 2, c = a * b; a < 10; a++) {

...

}

The == and === Operator

The === operator does not perform type coercion and is stricter.

The == operator performs type coercion and is looser. As a best practice, its best to use the === operator.

Comparing two JavaScript objects always returns false.

Tip: One action - One Line

TOP Knowledge Check

1. Name the three ways to declare a variable? const, let, var
2. Which of the three variable declarations should you avoid and why? var because it is the "old" method for variable declaration and may cause odd errors. It has no block scope, tolerates redeclarations, can be declared below their use (hoisting), etc. More detail in this article
3. What rules should you follow when naming variables? No digits for the first characters, they should only contain letters, digits, or the symbols $ and _, and camelCase when the name contains multiple words.
4. What should you look out for when using the + operator with numbers and strings? string concatenation
5. How does the % operator work? It returns the remainder of an integer division
6. Explain the difference between == and ===. === is a stricter equality operator that does not allow type coercion while ==, a looser equality operator, does perform type coercion.
7. When would you receive a NaN result? Trying to do arithmetic with a non-numeric value or NaN value (excluding the use of the + operator), when a number cannot be parsed parseInt('abc') or Number(undefined), etc.
8. How do you increment and decrement a number? -- would decrement a number and ++ would increment a number.
9. Explain the difference between prefixing and post-fixing increment/decrement operators. Prefixing returns the new increment\decrement value first while post-fixing returns the old value first then the new increment\decrement value.
10. What is operator precedence and how is it handled in JS? Operator precedence is the priority in which operators are executed. In JS, the higher precedence is performed first. If the precedence is equal then the order will be from left to right.
11. How do you access developer tools and the console? You may access the developer tools by either right clicking on a blank web page and picking "Inspect" (or "Inspect Element") or hit the Ctrl+Shift+I command (Windows). Then navigate to the "Console" tab.
12. How do you log information to the console? console.log()
13. What does unary plus operator do to string representations of integers? The unary plus operator converts them to numbers.

Resources

The Odin Project
https://javascript.info/operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN