Skip to main content

You-Dont-Know-JS

I am diving deeper into JS and want to share my learning points from the beautifully written book on JS.

Source

https://github.com/getify/You-Dont-Know-JS

JavaScript's Multi-Paradigms

  • Procedural style: Top-down, linear progression through pre-determined set of operations.

  • Object Oriented style: Organize code by collecting logic and data together into units called classes.

  • Functional Programming style: Organizes code into functions, and the adaptations of those functions as values.


Backwards Compatability​

One major JS foundational principle is the preservation of backwards compatibility.

Backward compatibility

Any code written previously should still be working in today's JS engine.

AKA: Old code able to run in new engine.

forward compatibility

Being forward-compatible means that including a new feature to the language in a program will not cause the program to break if it was running in an older JS engine.

AKA: Old engine able to run new code.
Examples: HTML, CSS

Solutions for forward compatibility

Transpiler: A special software to translate source code of a program from one form to another.

For example, Babel converts newer JS syntax version to an equivalent older syntax.

Polyfill: A script that updates and adds new or missing implementations to old JS engines.


Strict Mode​

Strict mode was introduced with the release of ES5, to encourage better JS programs.

  • Prohibits function statements that are not at the top level of a script or function.

Some examples of strict mode usage from geeksforgeeks.

Enabling strict mode:

// comments and whitespaces allowed only
"use strict";
// program

Due to backwards compatibility, JS will almost never enforce strict mode as it might break old JS code written. However, most production code has been transpiled to adhere to strict mode and ES6 modules assume strict mode.


Each JS File is a Program​

Error Handling

Since JS Files are treated as programs, failing to process one file would not necessarily prevent the next file from being processed.

Note

Many projects use build process tools that end up combining separate files into a single JS file, allowing the file to be treated as a single program. (Does React do this?)

How does multiple standalone JS file act as a single program?
By sharing state via the "global scope".

Module: A collection of state and publicly exposed methods to operate on that state
Importing a module into another allows runtime interoperation between them


Variables Declaration​

var​

Regular or function scoping: Hoisted to the global/function lexical environment and accessible in the global/function scope.

let and const​

Block scoping: Allows a more limited access to the variable - only available in the block scope.

  • let: Can be reassigned a value
  • const: Must be given a value during declaration and cannot be re-assigned.

Syntax that declares variables​

Function parameters are declared as var type as it is a function-scoped variable.

function hello(variable) {
  console.log(`this is a var type: ${variable}`);
}

hello("var");
// this is a var type: var

catch clause are declared as let type as it is a block-scoped variable.

try {
  someCode();
} catch (err) {
  console.log(`this is a let type: ${err}`);
}

Functions​

In JS, functions are closely related to "procedures" - a collection of statements that can be invoked one or more times.

Usual function declaration: (global object)

function normalFunc(input) {
  // ...
  return input;
}

In JS, functions are values that can be assigned to variables as such:

const myFunction = function (input) {
  // ...
  return input;
};

let myFunc = (input) => {
  // ...
  return input;
};
additional readings

Equality in JS​

tip

Be sure to check out an excellent blog article by a good friend of mine on this topic of Equality.
Where is the Equality in JavaScript?

Structural Equality vs Identity Equality

For object values, JS define === as identity equality instead of structural equality. In JS, all object values are held by reference, assigned and passed by reference-copy.

Identity Equality

Identity determines whether two objects share the same memory address. (Comparison of reference to address)

Structural equality comparison on the other hand, has to be manually configured and is tedious to implement its checks.

Structural equality

How to determine if two functions are "structurally equivalent"? How to take into consideration scoping and closure?


Coercive Comparison

Avoid

Avoid using "Loose equality" operator ==.

Always use === for equality comparison.

Between same value type, == behaves the same way as ===. Prefers numerical comparison.

Consider:

27 == "27"; // True
1 == true; // True

"" == 0; //True
0 == false; //True

In the cases above, the value types are different and the generally non-numerical value types are coverted to numbers before comparison is made.

See also: why "" == 0 is True.

Classes vs Modules​