Wednesday, March 9, 2022

Important JavaScript concepts to master in 2022

After reading this article you'll be confident using JavaScript for UI development.

• Variables

  • var
  • let
  • const
  • Temporal Dead Zone
  • Hoisting
  • ?? (nullish coalescing)

• Syntax

  • try..catch
  • if
  • for…of
  • for…in
  • for(loops)
  • Semi-colons
  • Exceptions

• Arrays

  • … (spread())
  • .every()
  • .filter()
  • .find()
  • .forEach
  • .includes()
  • .join()
  • .length
  • .map()
  • .push()
  • .reduce()
  • .some()
  • .splice()
  • ?.(optional chaining)
  • Arrays of objects
  • [] (get item)
  • destructing

• Strings

  • [] (character access)
  • Template strings
  • Concatenation
  • .trim()
  • .toUpperCase()
  • .toLowerCase()
  • .substring()
  • .startsWith()
  • .split()
  • .replaceAll()
  • .replace()
  • .length
  • .includes()
  • .endsWith()

• Objects

  • property access
  • object shorthand
  • dynamic properties
  • destructuring
  • Object.values()
  • Object.keys()
  • Advanced control flow
  • ?? (nullish coalescing)
  • ?.(optional chaining)
  • ...(spread)

• Number

  • Number.parseInt()
  • Nan
  • Division remainder (%)
  • .toString()

• Functions

  • => (arrow functions)
  • ?. (optional chaining)
  • Asynchronous callbacks
  • Callback pattern
  • Closures
  • Hoisting
  • Lexical scope
  • Passing functions basic functions
  • default parameters implicit return
  • lexical scope

• Classes

  • Classes

  • Getters

  • Inheritance

    • Class vs Function
    • Private class fields
    • Public class fields
    • inheritance
    • prototypal inheritance
    • prototype chain
    • super()

  • Instance methods

  • Instance variables

  • Setters

  • Static methods

• Promises

  • states
  • new Promise()
  • await keyword
  • async/await
  • async function
  • Promises
  • Promise.resolve()
  • Promise.reject()
  • .then()
  • finally()
  • .catch()

• Modules

  • ES Modules
  • Importing from libraries
  • Modules bundlers
  • Package managers
  • Parcel
  • Webpack
  • default export
  • import
  • yarn
  • script type="module
  • package.json
  • npm
  • named export

• fetch API

  • fetch()
  • Response.json()
  • Response satus codes
  • PUTPOST
  • JSON.stringify()
  • JSON.parse()
  • GET
  • Fetch Wrapper
  • Error handling
  • DELETE

• MISC

  • Deep equal
  • EcmaScript
  • Event loop
  • IIFE
  • Immutability
  • Window

• DOM

  • Events

    • Change
    • DOMContentLoaded
    • Event details
    • Focus/blur
    • Keydown/keyup
    • Scroll
    • Submit
    • element.addEventListener()
    • element.removeEventListener()
    • event.currentTarget

  • HTML Element

    • .classList.add()
    • .classList.contains()
    • .classList.remove()
    • .classList.replace()
    • .classList.toggle()
    • .dataset
    • .getAttribute()
    • .innerHTML
    • .insertAdjacentHTML()
    • .parentElement
    • .remove()
    • .removeAttribute()
    • .setAttribute()
    • .style
    • .textContent
    • .value
    • HTMLElement
    • document.appendChild()
    • document.createElement()

  • Selection

    • NodeList
    • NodeList to Array
    • document
    • document.body
    • documentElement
    • document.getElementByld()
    • document.querySelector()
    • document.querySelectorAll()
    • element.closest()