The DOM

• Document Object Model - JavaScript object that represents the document (web page). Provides properties and functions for developers to use to manipulate the web page
• document.getElementById("") returns a JS object that represents the element
• document.getElementsByClassName() and document.getElementsByTagName() both return an HTMLCollection, which is like an array, of the elements
• On the element returned, use textContent (best for text), .innerHTML, or .innerText to access and set values
• document.querySelector("div#my-id > p") - returns the first object that is a child p of a div with id #my-id
• document.querySelectorAll() - returns a NodeList of objects that match the CSS query. Can conver to array with Array.from(myNodeList);
• document.body.style.textAlign = "center" - the style property is an object with CSS styles. Note text-align is changed to textAlign. (also, this is an easy way to get the body)
  • Careful: This adds style in the form of inline HTML. If you try to retrieve style that wasn't added in the HTML inline style tag, it will not be able to!!
  • In that case, use window.getComputedStyle(myElement) to get a CSSStyleDeclaration that you can call .color, etc on
• document.querySelector("#header").className += " new-class" - add a class to an element, but removal is difficult
• document.querySelector("#header").classList.remove("my-class") - use add(), remove(), toggle
• document.createElement("li")
• myList.append(newLi) - append() and prepend() adds the parameter element into the original, either at top or bottom
  • appendChild() is similar, but more strict.
  • With append(), you can use append("some string") into a parent to look like <div>Appending Text</div>. Not accepted with appendChild()
  • append() does not have a return value, but appendChild() returns the appended Node object
  • You can parent.append(child, childTwo) for multiple children, but appendChild() only allows a single child
• Can also use document.body.innerHTML += "<p>hi</p>" to append. This doesn't create objects, just takes in a string. Generally okay for simple text where you don't need control over the object
• Remove elements with unwantedElement.remove() or parentElement.removeChild(unwantedChild)
• Basic div creation in js:
  
• Event Listeners - myElement.addEventListener("event", function);
  • Events like "click" or "keypress"
  • Keep in mind it's the function name, not with ()
  • Generally recommended over myElement.onclick = () => {...} because it allows multiple events, but onclick is quick and easy.

Promises

An object that may produce a single value some time in the future for if the value is not known when the promise is created.

A promise can only be in one of 3 states, and once it reaches a resolved state, it cannot be changed: pending, fulfilled, and rejected.

The promise constructor takes in a function with two function parameters, resolve(), and reject(). When it reaches either state, the message will be stored in the variable.

Every promise object has a .then() method that takes in 2 optional callback functions for the success and failure cases of the promise. Because .then() returns a new promise object, it is possible to chain promises. This allows us to mimic synchronous code with asynchronous functions.

Promises are built on top of callbacks to write sequential asynchronous code with error catching.

They're used for network requests such as fetching data from an API or in other asynchronous functions.

^ To catch errors that may even occur during the .then(), you can pass only the success parameter in .then(), then chain on a .catch() for the error

To create a timeout promise that will invoke if the other(s) are taking too long, use Promise.race():

^ This also uses IIFE (Immediately-Invoked Function Expression), which is an anonymous function that immediately invokes because of the ().

Use Promise.all() to run Promises synchronously, to return an array of their responses after they are all done

Advanced ES6+

• Arrow Function: const myFunc = food => `I want to eat ${food}`; returns the string. lots of shorthand can be used, like no () and no {}. Can set a default value for parameter(s) in case one was not passed in by setting (param = "defaultValue") => ...
• Classes:
  
  • get binds an object property to a function that will be called when that property is looked up
  • static function can't be called on an class instance, but on the class itself as a utility (Animal.whatIs())
• Spread Operator ...
  • Can concat or copy array and/or object contents:
  const arr = ["a", "b"];
const arr2 = [...arr, 1, 2];
console.log(arr2); // ["a", "b", 1, 2]
• Rest Parameter ...
  • Destructuring an array into smaller arrays:
  const arr = ["a", "b", "c"];
const [first, ...theRest] = arr;
console.log(theRest); // ["b", "c"]
  • Also can turn multiple arguments into a single array:
    function myFunc(...args) {
//args = ["a", "b", "c"]
}
myFunc("a", "b", "c");
• let (block scoped {}, cannot be redeclared) and const (can change entries in arrays/objects, but primitives cannot change)
  • var sucks because it uses variable hoisting. When js sees a var, it immediately declares it in global scope, even if its initalized value can only be accessed inside something
• Import & Export:
  export const data = [1,2,3]; (in example.js)
  import { data } from './example.js'; (in main.js)
• Fetch: Returns a Promise, so use the .then() method to chained asynchronously
  • The first response is a js Response object, which you can call methods .text(), .json(), .blob(), etc. to get the data in the format you want. These methods return Promises containing the data, so you need to chain another .then():
  
  • Fetch POST: (header for getting the data back to be console logged)
  
• Async & Await
  
  • An async function converts the return to a Promise object.
  • You must use await in an async function. Await can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value
  • Allows you to write fewer .then() chains
  • Can use await on fetch, like:
  • Remember, an async function returns a Promise, so to access a return from an async function, use:
    • ayncFunc().then(result => console.log(result));
    • (with console.log being what you want to do with the data)
  • Error handling. Can wrap all the code in a try/catch block, or do the following:
    
    • Response.ok - boolean of whether the response was successful
    • Response.status - status code of the response (200 for success). Alternatively, Response.statusText will return "OK" for 200.
• Sets: an Iterable, can store anything
  
• Template Literal - `${fname} ${lname} has ${num1 + num2} cats.` ... using ${} to access variables, easier to manipulate strings. Can also type multi-line strings inside
• Object Destructuring - const {name, address: {city}} = person; is the same as const name = person.name; and const city = person.address.city;
• Array Destructuring - similar to object,
  const [fName,, lName] = ['Lily', 'n/a', 'Peng'];
  This names variables index-by-index
• Object Literal - can shorthand create an object
  • function address(city, state) { console.log({city, state}); } address('NYC', 'NY');
  • Will print an object {city: NYC, state: NY}
• Iterators & Generators
• Modules
• Tail Calls

Closure

Closed Over Variable Environment (COVE)

Creating persistent memory (variables/data) from an outer function accessible to an inner, generated function. Every function created receives data from the memory space where the function definition lives (normally global).

Event Delegation

Add event listeners to parent instead of child elements. Uses less memory (don't need one for every child) and don't need to unbind and rebind for different children.

To avoid event bubbling (events playing from bottom element to top), use: event.stopPropogation();

JS Modules

Sectioning your code into self-contained parts that are not dependent on each other, so you can make changes without disrupting everything else. Allows you to not worry as much about sharing global variable names.

Types of For Loops

• for: i = index, arr[i] = item



• for in: i = index, arr[i] = item


• Bad to use on arrays because will count array properties as array items (array.test iterated with 'for in' will print that value in the array)

• forEach: v = item, (optional) i = index


• Use arrow functions with 'forEach' to retain the outside scope's value of this (function context). By default, the 'forEach' this will always be the global object (window)
• Does not work well with async/await or generators
• Allows chaining since it's a callback
• Some style guides (Airbnb) only allow forEach loops

• for of: v = item, use Array.entries() to access indexes


• Generally the best way: more concise than original and not as many edge cases as the others

• ^ Do this to access indexes

Declare vs. Initialize vs. Instantiate

• Declare - var a;

• Initialize - var a = 10;

• Instantiate - MyObj x = new MyObj(); //create a new instance of a class

Regular Expressions (RegEx)

• Writing a Regex:
• /ab*c/ means 'a' with zero or more 'b's and one 'c'
• To search for literally 'a*', you must escape the special character with \ in front of it: /a\*/
• /\d{4}/ means a digit, 4 times. Digit is same as: /[0-9]/
• /^[a-zA-Z]+$/ matches any English character(s). ^ means beginning, + means 1 or more times, $ means end. So it won't match if the characters are in the middle of the string, only if the string only contains these characters.
• () means a capture group.
• Functions:
• regex.test(str) - return true/false if regex in str
• str.search(regex) - return index of first regex occurence in str
• str.match(regex) - return an array with value of first match and the capture group(s) (if any) it matched

• If g (global flag) was used at the end of the regex, it will return all matches and none of the capturing groups

• regex.exec(str)

Sample Challenges

• arrayReplace(array, elemToReplace, substitutionElem) - write 1 line of code to solve: e.g. [1,2,1] elemToReplace 1 & substitutionElem 3 = [3,2,3]

  • ans: return array.map(e => e === elemToReplace ? substitutionElem : e);
• caseInsensitivePalindrome(str): 1 solution using array/string functions, and 1 solution using smallest big-O
  
• factorial(num):
  
• duplicate([1,2,3]); // [1,2,3,1,2,3]
  • ans: use .concat()
• FizzBuzz (print numbers, but multiples of 3 are "Fizz" and multiples of 5 are "Buzz")
• pangram(str) // pangram is a string that contains every letter of the alphabet at least once
• Currying: add(2)(3), which gives sum of both numbers. Functions are first-class objects, meaning they are treated like any other variable. So calling add(2) returns a function that takes in a parameter (3) and that one returns the result.
  
• Given: an array of numbers, the first 'a' elements to find, and 'b' exactly how many times they should occur. Write a program that returns the first 'a' elements that occurs exactly 'b' times.
  e.g. arr = [2, 3, 6, 8, 2, 6, 7, 2, 8], a = 2, b = 2 -----> [6,8]
  • ans: use a Map()
• Data Structs: Array, HashSet, HashMap, Linked List, Graphs