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.
Leave a Reply