Cumulative Review of Topics - 10/13

README.md

Cumulative Review of Topics - 10/13

Basic Data Types

• undefined
• NaN
• Infinity (-Infinity is Infinity * -1)
• globalThis = window (window.document...)
• Boolean = true or false
• Number = 0123456789
• String = "a-zA-Z-=+_;':etc." UTF-8, Unicode U+0041 ("A" for example)

stringExample = "Hello World" (length 11)
//               H e l l o   W o r l d
//               0 1 2 3 4 5 6 7 8 9 10

arrayExample = stringExample.split("")
// [ "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d" ]  (length 11)
//    0    1    2    3    4    5    6    7    8    9    10

So What's the difference between a string and an array?

Things in Common:

• length property (array.length, string.length)
• "0-index" indexing
• Value storage at an Index

Things that are different:

• String indices ONLY store UTF-8, Unicode values
• Different methods
• values are stored "smashed together" and can be passed as a single element, instead of a bunch of individual values
• Arrays hold ANYTHING in their indices
• Array indices are considered separate elements

Arrays vs Objects

arrays and objects hold anything in their indices,

so how are they different?

• Objects don't actually have indices, instead they have Keys and Values existing as pairs. "key":value obj[key] obj.key
• Arrays have an actual index, that holds the value (arr[0] = value)
• Arrays can be iterated through in order
• Objects have keys that can be traversed, but the keys are in no particular order.
• Object keys are ALWAYS, in reality, strings

There are two ways to access values in Arrays

• array[index] (direct access)
• looping through (for loop with i, or el, forEach, map, filter, etc.)

Also, there are two ways to access values in objects

• object[key] (direct access)
• for...in loop

For...in loops will access keys by order of insertion, generally. eg

const obj = {
}
obj["key3"] = "How are you?"
obj["key1"] = "Hello "
obj["key2"] = "World! "
for (const key in obj){
  console.log(obj[key])
}
// "How are you?", "Hello ", "World! "
// not "Hello ", "World! ", "How are you?"

Object keys:

• are named, not serial numbers
• hold any values you want
• are always labeled using UTF-8 Unicode strings

obj {
  key3: "How are you?",
  key1: "Hello ",
  key2: "World! "
}

array = ["backgroundColor", "id", "className"]
variable = "key1" // key1 is a string value
/*in case of:*/ for (const key in object)
/*in case of:*/ for (const value of array) // array of strings that are keys to your object
// object[key] or object[value] will give you access
object[key] == object["key1"] // "backgroundColor": value
object.key == object."key" // anything after the "." becomes a string to JS
cell = document.getElementById('cell')
for (const key in cell) {
  console.log(cell[value])// "none", "row1col2", "box"
}

Common DataType Methods

Common Array Methods

• array.forEach() - returns nothing, but iterates over all elements in the array
• array.map() - returns a new array of array.length size
• array.filter() - returns a new array of elements that pass a true/false check
• Array(number) - Makes an array of number length, with empty values. Array(10) == [,,,,,,,,,,]
• array.fill(value, start, end) - fills an array with value from start until end. If no start and end are given, fills whole array.
• array.length - property on an array. number value of the number of indices in the array.
• array.push(value) - puts an element on the end of the array. array.length = array.length + 1; array[array.length - 1] = element;
• array.pop() - takes an element off the last index. (returns the popped element) array.length = array.length - 1;
• array.unshift() - adds an element to the start of an array. creates index at the end, shifts all indices right, sets index 0 with new value
• array.shift() - takes the first element off the array. (returns the shifted element) shifts all indexes left and removes the last index
• array.slice(start, end) - returns a copy of values from start to end. (end not inclusive)
• array.splice(start, deleteCount) - deletes n number of elements starting from start index
• array.join() - returns a string of the array values converted to strings

Common Object Methods

Examples

for (const key in obj)
  {
      array.push(key) //object.keys()
      array.push(obj[key]) //object.values()
      array.push([key, object[key]])
  }

  let map = new Map()
  // holds an "array" of key value pairs:
  // [[key, value], [key, value], [key, value], [key, value]]
  
  let set = new Set(1, 3, 5, 6, 8, 10)
  // creates an object that holds unique values:
  // Set{1, 3, 5, 6, 8, 10}
  set.add(2) //adds 2 to the above Set
  set.add(2) //does nothing, because 2 is already there.

JSON Example:

JSONstring = {"key":"value","script":"react-script start"}

// JSON object looks like this, when human-readable:
// {
//    "Key":"value",
//    "script":"react-script start"
// }

const obj = JSON.parse(JSONstring)

// obj is:
// {
//     key: value
//     script: "react-script start"
// }

• object.keys() - returns an array of object keys in order of insertion: [key3, key1, key2]
• object.values() - returns an array of values in order of insertion: [value, value1, value2]
• object.entries() - returns a multidimensional array of: [[key3, value3], [key1, value1], [key2, value2]]
• Not strictly Object methods, but often used with objects:
  • JSON.stringify(object) - turns a JS object into a JSON string
  • JSON.parse(JSONstring) - turns a JSON string into a JS object

Common String Methods

• string.concat(value) - returns "value" turned into a string if it can, and adds it to the end of the existing string
• string.includes(subString) - returns true/false if subString is inside string anywhere
• string.indexOf(substring) - if subString is inside, it returns the index it starts
• string.slice(indexStart, End) - extracts a section of a string and returns it as a new string, without modifying the original string. (end not inclusive)
• string.substring(indexStart, End) - method returns the part of the string between the start and end indexes, or to the end of the string. (end not inclusive)
• string.toLowerCase()
• string.toUpperCase()
• string.split(subString) - splits a string on a value of subString, omitting subString

Functions and invocation

• function <name> (<parameters>) { //good old function declaration, return optional }

• const <name> (<parameters>) => { //explicitly written arrow function, return optional }

• const <name> <singleParam> => //implicit return arrow function (no braces)

• <functionName>() //invocation example

Anonymous functions (almost always callbacks)

• function () {} //anonymous function (no name)
• () => {} //anonymous arrow function
• el => el

Immediately Invoked Function (almost never used)

• (function (<params>) {})()
• (() => {})()

Ternary

<condition> ? <ifTrue> : <ifFalse> //simple if this is true, do this, else do that

return isThisTrue == true ? (  //You can chain several operations this way
    ifTrue1 = something,
    ifTrue2 = somethingElse,
    function1(ifTrue1, ifTrue2)
) : (
    ifFalse1 = something,
    ifFalse2 = seomthingElse,
    function2(ifFalse1, ifFalse2)
)

You CANNOT do a for-loop in a ternary, or anything else that requires {}

Ternary Chaining

This:

ifThisIsTrue ? doThis : elseIfThis ? doThisInstead : elseThis

Is the same as this:

if (ifThisIsTrue) {
    doThis
} else if (elseIfTHis) {
    doThisInstead
} else {
    elseThis
}