JavaScript

Tags: Advance, Frontend, Interview Resources: https://frontendmasters.com/courses/deep-javascript-v3

1. Types

Primitive Types:

string
number
boolean
object
symbol
undefined
bigint
undeclared?
null?
function?
array?

All are subtype of Object type.

typeof

NaN and isNaN

NaN (~~not a number~~) is a Invalid Number.

var a = Number("n/a")
console.log(a)  // NaN
console.log( a === a) // false

2. Coercion

Coercion is a type conversion

Number

It coercion the object value to String first.

// Corner case:
Number("n") // NaN
Number("-0") // -0

Special case:

0 === -0 is true because they are considered numerically equal.
NaN !== NaN

Boolean

Has a lookup table to defined for falsy and truthy values (NO type coercion here),

Boxing

Implicit coercion, example: .toString() on number (primitive value), means able to use properties of an object on primitive values.
Boxing is a feature why, people say “In JS, everything is an object” but, if something behaves like an object **doesn’**t make it an Object.

Summary:

Negative zero and empty string to number coercion are base of all (most) of evil.

No TypeScript?

3. Equality

Why == and === ? what’s difference?

Triple Equals

If type of operands are different return false
If type is Number check for special case:
- NaN is NOT equals to itself.
- -0 (negative zero) is equal to +0 (normal zero) and vice-versa.

Double Equals

Double Equals prefers Numeric coercions

if type of the operands are same then, itself calls the triple equals
If null or undefined: equals
If non-primitives: calls ToPrimitive
Prefers: ToNumber

Avoid Double Equals

== with 0 or “”
== with non-primitives
== true or == false . Just allow ToBoolean or use ===

4. Static Typing

Popular static typing language are TypeScript by Microsoft and not so popular Flow by Facebook.

Cons:

Non-JS-standard, one day when JavaScript decides to add typing , it may not be same as Typescript.
Require a build process
Complexity

5. Scope

Scope: Where to look for things (identifiers) in program.

JavaScript is an interpreted-language? (reads code line-by-line from top-down)

Let say we have 10 lines of code and we have syntax error on line 10. What happens? Code at line 1-9 also doesn’t run, that means there is a additional step before the JS Engine reads code line-by-line, lets call it Parsing. (Learn Complier theory for details).

Auto Create Global Variable ⁉️

When a variable is assigned but not declared in current scope, it keeps going back until global scope is reached.

When a variable is assigned but not declared, JS auto declares a variable at global scope 🤮.

This happens at Runtime and not compile time.

Example:

function sayHi(){
	name = "alex" // NOT declared, but JS will auto declare it in global scope.
	console.log(name)
}

sayHi()

How to avoid?

By using use strict directive, this will not allow auto global. It will throw a reference error.

undefined vs undeclared

undefined means a variable is declared but doesn’t have any value, so it defaults to undefined

undeclared means a variable is not even declared, throws a reference error.

Function Expression

function func1() {} // Function declaration

// Function expression with named function
const myFunc = function func2(){ /*do something*/} 

	// Function expression with anonymous function
const myFunc2 = function (){ /*do something*/}

Function Declaration attach their scope to parent block.

Function Expression attach their scope to itself and NOT parent.

6. Scope (Advance)

Lexical Scope

The idea of nested scope and compiler/parser figuring out the scope before execution.

Hoisting

Hoisting is made-up metaphor for lexical scope. JavaScript do not do Hoisting. If you understand the lexical Scope, let play it out

x = 3;
var x;

Consider the above code, so called hoisting is nothing but, the compiler(parser) doing the lexical scope. It means the compiler asks the scope manager, ‘’we have a use of variable x does that exists int the scope?’’

let doesn’t hoist - FALSE

let , const and var all Hoist. but there is how they are hoisted.

When var is hoisted, it say to a create a variable and initialize it to undefined.

When let and const are hoisted, they say, create a variable and do NOT initialize.

let, const, var

let and const are block scoped

var is function scoped.

Deep Dive JS