undefined
NaN
Infinity
(-Infinity
isInfinity * -1
)globalThis
= window (window.document
...)Boolean
=true
orfalse
Number
=0123456789
String
="a-zA-Z-=+_;':etc."
UTF-8, UnicodeU+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
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
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
array[index]
(direct access)- looping through (for loop with i, or el, forEach, map, filter, etc.)
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"
}
array.forEach()
- returns nothing, but iterates over all elements in the arrayarray.map()
- returns a new array of array.length sizearray.filter()
- returns a new array of elements that pass a true/false checkArray(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 valuearray.shift()
- takes the first element off the array. (returns the shifted element) shifts all indexes left and removes the last indexarray.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 indexarray.join()
- returns a string of the array values converted to strings
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 stringJSON.parse(JSONstring)
- turns a JSON string into a JS object
string.concat(value)
- returns "value" turned into a string if it can, and adds it to the end of the existing stringstring.includes(subString)
- returns true/false if subString is inside string anywherestring.indexOf(substring)
- if subString is inside, it returns the index it startsstring.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
-
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>) {})()
(() => {})()
<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 {}
This:
ifThisIsTrue ? doThis : elseIfThis ? doThisInstead : elseThis
Is the same as this:
if (ifThisIsTrue) {
doThis
} else if (elseIfTHis) {
doThisInstead
} else {
elseThis
}