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()