Please enable JavaScript.
Coggle requires JavaScript to display documents.
JavaScript Fundamentals :<3:, :star: MODULE 1 PRIMITIVE DATA TYPES, …
JavaScript Fundamentals
:<3:
VARIABLES
let
const
var
TYPES
Object
Boolean
Number
Null
String
Undefined
Symbol
FUNCTIONS
Custom
:warning: return value or else its undefined
everything after return is not reachable
Arguments ( Actual Values )
Arguments can be
Variables
Expressions
Other functions
Values
Parameters ( PlaceHolder)
Default Values
pass undefined to skip a parameter
Implicit
one line and no return
Explicit
with block and return
Built in
Math.max(1, 10)
Can have any
type
for parameters depending on the function
First Class Citizin
A function is treated like a value in JS
Different kinds of Function
Arrow Function
Methods (function that lives inside an object)
Anonymous function
Function Expression
Callback Functions
IIFE
DEBUGGING
Console
console.count
console.group
console.table
console.groupCollapsed
console.error
console.warn
console.log
console.dir
CallStacks
Grabbing Elements
$0
$('p')
$$('p')
Breakpoints
Debugger
source tab / js file / line number
Network request
files that are loaded
See information of a request
Break on attribute
Event listener breakpoints
XHR / fetch Breakpoints
The Tricky Bits
Scope
Scope lookup
Variable not found in scope? Look at higher level scope
Blocked scope
let and const only available inside block scope. Var can be accessed outside
Function scope
Variables (also var) only available inside the function
Lexical Scoping
Variables are accessed where they are defined not where they are run
window object
var & functions are attached
Global Variables
Accessed anywhere
Closures
Inner function has access to outer function variables even after outer function has been already executed
Why?
Inner function preserves and saves to memory the scope chain variables of the outer function at the time the outer function was executed.
Link to a nice explanation
Hoisting
Function declarations
Variable declarations
DOM
Selecting Elements
document.querySelectorAll()
document.getElementById()
document.querySelector()
document.getElementByClassName()
Classes
el.classList.contains("foo")
el.classList.toggle("foo")
el.classList.remove("foo")
el.classList.add("foo")
text
el.textContent
el.innerText
el.insertAdjacentText(position, el);
Attributes
el.width()
el.getAttribute()
specific attribute
el.src()
el.setAttribute()
e.g.
data
-name
el.alt()
el.dataSet()
list of all attributes
Create HTML
Create without strings
document.createElement('foo')
el.appendChild('foo')
clone Node
el.insertAdjacentElement(position, el);
Create with strings
el.InnerHtml
downsides :!:
Cannot be dynamic
solution
document.createRange().createContextualFragment(string)
XSS Security :warning:
solution
TBD
Traversing
Elements
el.lastChild
el.previousSibling
el.firstChild
el.parentNode
el.children
Nodes
el.firstChild
el.lastChild
el.childNodes
el.previousSibling
el.nextSibling
el.parentNode
Events
event object
event.target
element that triggered the event (e.g., the user clicked on)
event.currentTarget
element that the event listener is attached to.
addEventListiner
Get Something
Listen to Something
Then do something
Multiple listeners
querySelectorAll + forEach
Propagation
👂 listening to click
Bubbling Up ⬆️
event.stopPropagation
Capture ⬇️
el.addEventListener(type,function,
capture=true
)
e.bubbles
preventdefault()
Form Event
keydown
focus
keyup
blur
Control Flow
Statements
else
else if
if
continue
break
Logical Operators
||
&&
Falsy
null
empty string
undefined
NaN
0
Truthy
string
array
-10
object
1
Coercion
!!string
Ternaries
If True
if False
Condition
Switch statement
Async
setTimeOut
setInterval
Objects
Objects
CRUD
read
obj.propertyName
update
obj.exsistingPropertyName= "updated value"
delete
delete obj.propertyName
create
const foo = {}
obj.propertyName = "new value"
Method ?
a function in an object
reference
const a = obj
copy
spread operator
Object.assign()
Order is not guaranteed
Arrays
CRUD
read
arr[index]
update
arr[index] = newValue
create
const arr = [ ]
arr.push() && arr.unshift()
delete
arr.pop() && arr.shift()
last item
arr[arr.length -1]
Mutable
foo.reverse()
Immutable
const foo = [...arr].reverse()
Maps
CRUD
read
foo.get()
update
foo.set(oldKey,newValue)
create
const foo = new Map()
foo.set()
delete
foo.delete(key)
Order guaranteed
foo.has()
foo.size
Static Methods
Instant Methods
LOOPS
map
forEach
for
for of
for in
while
new
creates an object
new Object
new Array
new myFunc
this
arrow function
vs
normal function
prototype
new MyFunction.prototype.method()
bind
const foo = myFunc.myMethod
foo()
"this" === window
why ?
window.foo
const foo = myFunc.myMethod.bind(myFunc, args)
foo()
"this" === myFunc
why ?
myFunc.foo
you need to call foo()
creates a new function
call
same as bind but .call invokes the function for you
self invoked foo
apply
same as call but the arguments need to be passed in an array
const foo = myFunc.myMethod.bind(myFunc, [args])
Promises
new Promise(resolve, reject)
.then()
.catch()
Promise.race()
Promise.allSettled()
Promise.all()
asyn, await
handling error
await innerFunc().catch(err)
try, catch
outterFunc().catch(err)
CORS
error null
run server
error regeneratorRuntime
support latest chrome
error localhost
proxy
:star:
MODULE 1 PRIMITIVE DATA TYPES
:star:
MODULE 2 FUNCTIONS
:star:
MODULE 3 THE TRICKY BITS
:star:
MODULE 4 THE DOM
:star:
MODULE 5 EVENTS
:star:
MODULE 7 CONTROL FLOW
:star:
MODULE 8 DATA TYPES
:star:
MODULE 9 LOOPS
:star:
MODULE 2 DEBUGGING
:star:
MODULE 11 NEW, THIS. PROTOTYPE
:star:
MODULE 11 BIND, CALL, APPLY
:star:
MODULE 12 PROMISES + ASYNC AWAIT
:star:
MODULE 13 CORS