Types and Operators: The Weird Parts – Notes

Today, I'm revisiting Anthony Alicea's JavaScript: Understanding the Weird Parts Section 3, Types and Operators.

There are many quirks to the language, such as using “==” vs. “===”. I'll refresh myself on these operators and more.

Like Alicea says, once you know how JavaScript works under the hood, you instantly become a better JavaScript programmer.

Conceptual Aside: Types and JavaScript

JavaScript using dynamic typing. You don't tell the JavaScript engine what type of data a variable holds. The engine figures it out as it runs.

There is no keyword to tell JavaScript what data type a given variable is.

Primitive Types

Alicea points out that JavaScript has 6 primitive types. This was correct at the time of his recording.

JavaScript MDN documentation now states that there are now 7 primitive types. And I also pointed this in my personal MDN JavaScript Guide documentation notes.

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: string, number, bigint, boolean, null, undefined, and symbol.

Most of the time, a primitive value is represented directly at the lowest level of the language implementation.

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

Conceptual Aside: Operators

Operator: A special function that is syntactically (written) differently.

var a = 3 + 4;

//The above is similar to the below

var a = function +(3, 4){
    return a + b;
}

//JavaScript and other languages 
uses infix notation (i.e. +(3,4) ==> 3 + 4 )

Operator Precedence and Associativity

Operator Precedence – Which operator function gets called first. Functions are called in order of precedence. Higher precedence wins.

Operator Associativity – What order operator functions get called in, left-to-right or right-to-left, when functions have the same precedence.

MDN docs on precedence and associativity

var a = 2, b = 3, c = 4;

a = b = c;

console.log(a);
console.log(b);
console.log(c);

//Because of the same precedence and 
right-to-left associativity, each 
variable will have the value of 4. 
The above is evaluated similar to 
the following:

a = (b = c);
a = (b = 4);
a = 4;

Conceptual Aside: Coercion

Coercion – converting a value from one type to another. This happens often in JavaScript because it's dynamically typed.

JavaScript decides the coercion

example:

Number(undefined); // evaluates to NaN

Number(null); //evaluates to 0

Number(false); //evaluates to 0

Number(true); //evaluates to 1

3 == 3; //evaluates to true

"3" == 3 //evaluates to true

false == 0 //evaluates to true

Comparison Operators

console.log( 3 < 2 < 1); --> output is 
true though it might appear it's false

//because of associativity (left-to-right) 
and coercion the above is evaluated as:

console.log( (3 < 2) < 1);
console.log( false < 1 );
console.log( 0 < 1 ); --> output is true

Number(null); //evaluates to 0 
but null == 0 is false

"" == 0; //evaluates to true
"" == false // also evaluates to true
"3" === "3" // true
"3" === 3 // false


Bottom line is to use strict equality ( === ). 
It does not try to coerce values. 
Equality ( == ) coerces values.

MDN documentation on using equality operators.

More about Equality comparisons and sameness in the MDN documentation.

Existence and Booleans

Everything that implies a lack of existence coerces to false.

Boolean(null) //evaluates to false
Boolean("") //evaluates to false
Boolean(undefined) //evaluates to false

Boolean(0) //evaluates to false

if statements attempts to coerce its values to false so, we can take advantage of this with code such as this:

var a;

if (a) {
  console.log('Something is there.');
}

a's value is undefined
output --> 'Something is there'

Default Values

JavaScript returns values that can be coerced to true if using boolean operators:

undefined || 'hello' --> returns hello
'hi' || 'hello' --> returns hi

So, prior to ES6, you'll see a lot of code that uses the following syntax to set default values:

function greet(name){
  name = name || '<Your name here>';
  console.log('Hello ' + name);
}

greet(); --> returns Hello <Your name here>

Want to become a JavaScript Master Programmer? I highly recommend Alicea's JavaScript: Understanding the Weird Parts. Learn “under the hood” of JavaScript.