JavaScript Fundamental

Variable storing

Debounce vs Throttling

Browser Storage

Real-time Communication

Testing

• Unit testing: function or component

• Integration testing: module or service

• End-to-end testing: entire flow

Worker

• background thread that allow us to run JS in background parallel with main thread

• 3 types:
• web worker
• run script in background
• use case: heavy computation, data processing
• service worker
• network proxies between network and our web
• use case: enable offline functionality, caching, push notification
• shared worker
• sharing between window or frame (must same domain)
• use case: coordinating task between component in our web

this

• top level function: the global object (window / undefined)

function printThis() {
	console.log(this)
}

printThis() // window object if run browser, undefined in NodeJS

• called as a method of object: the object itself

const obj = {
	printThis: function() {
		console.log(this)
	}
	// Also same with this syntax printThis() { console.log(this }
}

obj.printThis() // Object { printThis: f }

• using apply / call / bind: the passed object

const obj = {
	number: 1,
	printThis: function() {
		console.log(this)
	}
}

obj.printThis.bind({ number: 2 })() // Object { number: 2 }

• in constructor: the newly created object

function Person() {
	this.name = "person"
	
	console.log(this) // Object { name: "person" }
}

class Animal {
  constructor() {
    this.species = "cat";
    
    console.log(this) // Object { species: "cat" }
  }
}

• DOM event listener: the element object

document.getElementById("button").addEventListener("click", function() {
	console.log(this) // "button" element
})

Closure

Hosting

• var: undefined

• let & const: ReferenceError (Temporal Dead Zone)

• function expression & arrow function: depends on their variable type

• function declaration (function (){}): can be called

Promise

Event Loop

React

Reconciliation

• React mechanism to prevent expensive DOM tree rebuild

• React keep lightweight version of UI in memory called virtual DOM

• Two phase:
1. render, when state or props changes, React rebuild the virtual DOM and compare to existing on
• the diffing algorithm
• different element → rebuild
• same type → keep what same
• list matched by key → if the key is changed then also rebuild
2. commit, apply only what change to real DOM

Strict Mode

• React uses the result of one of the calls, and ignores the result of the other call

React hooks

• for component

• background: child component re-render when it’s parent re-render or when it’s props changed

• use case:
• when we want component to be re-render only when it’s props changed

• for value

• dependencies comparison with Object.is

• use case:
• skip expensive calculation
• prevent re-render by memoized the value that will be send as props
• prevent useEffect to firing more often if the value is dependency of useEffect

• for function

• dependencies comparison with Object.is

• use case:
• avoid writing extra nested function if using useMemo to wrap function
• prevent re-render by memoized the function that will be send as props
• prevent useEffect to firing more often if the function is dependency of useEffect

• use case:
• generate id for accessibility, e.g: htmlFor, aria-describedby
• generate id for components that rendered multiple times

• use case:
• when we want to store value that’s when changed not resulted in rerendering e.g. form data, interval id
• manipulating the DOM

Next.js

• generate the page on the server then send it to client

• need server

• generate whole static routes initially

• don’t need server

• browser downloads a minimal HTML page and renders the content using JavaScript

• don’t need server

• regenerate only certain page instead of whole static routes

• need server

Hydration

• process that happened after the server-side rendered HTML is sent to client

• process of attaching event listener and initialize state on server rendered HTML page to make the page interactive

Performance

• Load: lazy loading (page, component), CDN, caching, use small size package, image (lazy loading, compress, responsive)

• Rendering: memoization, virtualization, prevent rerendering

SEO

1. <meta> tag

2. robots.txt

3. sitemap.xml

4. Structured data

CSS

1. inline

2. id

3. class (and pseudo class)

4. attribute

5. element (and pseudo element)

Layout thrashing

• read and write DOM repeatedly

• to prevent:
• batch the DOM changes
• use documentFragment

Reflow and repaint

• repaint: changes made to element but not affect layout
• e.g updating color, background, etc

• reflow: changes made to element and affect layout
• e.g. adding or removing element; updating: width, height, etc

• to prevent:
• use css class for style change instead of via js
• use requestAnimationFrame to sync the animation with browser repaint cycle
• use will-change for frequently changing elements
• avoid layout thrashing

Not important, but might need to know

← open

falsy values:

• boolean false

• empty string “”

• number 0 (0, -0, +0)

• undefined

• NaN

• null

• document.all

Object.freeze	Object.seal	Object.preventExtensions
property can’t be added	property can’t be added	property can’t be added
property can’t be modified	property can be modified	property can be modified
property can’t be deleted	property can’t be deleted	property can be deleted
check using Object.isFrozen()	check using Object.isSealed()	check using Object.isExtensible()
shallow	shallow	shallow

Object.is basically same with === except in treating 0 and NaN

Class

when creating new object with new Class(), what happened:

1. creating new object

2. set the prototype

3. set this to newly created object

4. return newly created object

mouseenter: doesn't bubbling in descendant mouseover: bubbling in descendant

to help visualize: imagine you can see through a house from top which you can always observe all from OVER, meanwhile when you ENTER you can only see what room you are currently