JavaScript - Fundamentals
Monday, June 3, 2024 2:22 PM
<script src="…" defer (the js file is loaded only after the html file is read and parsed, if code needs
html elements they might not be available></script>)
React projects use a build process that automatically injects the script in html -> the code written is
transformed '[Link]'
Raw react code doesn’t execute in the browser bc of JSX (js mixed with html)
Created code needs to be minimized before going into use in the browser.
Import, Export:
Ob: Need to use in script declaration: type='module' for vanilla JS, React takes care of it using
multiple scripts
In a JS file use the keyword export to let other files use whatever that is we are exporting
# export apiKey = "somekey"
In a JS file use the keyword import to use the whatever exported by other files in current file with
extension
# import { apiKey } from "relative path from current file to export one"
Ob: './' -> in the same folder, in React you can dismiss the extension
You can also export just a value w/o a name:
# export default VALUE -> it is the only export of the file
# import anyVariableName from "relative path from current file to export one"
Ob: you can also have multiple exports from a single file
# export var1, var2,…
# import { var1, var2, …} from "path"
Ob: you can mix default export with named export and also import everything from a file as a JS
object
# export var1
# export var2
# export default VALUE
# import * as variableName from "path" -> this are accessed as fields:
variableName.var1, .var2, .default
Ob: var1 as var2 => names var1 as var2
Variables and values:
Strings -> "" or ''
# let to create variables
# const cannot be reassigned
# var variables are available throughout the function in which they are defined
# let variables are only available in the block they are declared in
Operators:
# + is used for numbers and also strings:
# === is used for equality that yields a boolean
# == also does type conversion and then when they have same type then does ===
Functions:
# function(var1, var2 = defaultValue that can be overwritten)
# (paramList) => {} or function (paramList) {} can also be exported as default
# to return an object: return ({objectDef});
Objects:
# const user = {
New Section 1 Page 1
# const user = {
Field1: val1,
Filed2: val2
Method1(paramList) {
# body
}
}
User.method1() to access it
# class className {
Constructor(fieldList) {
Methods1() {
}
}
# const obj = new className()
Arrays:
# they are objects: arr = [];
# work as in java but also have functional programming stuff on them
Destructuring:
# arr = ['Paul', 'Stan']
# const [first, second] = arr -> pulls the variables out of the array
# works the same for objects
# you can also destructure inside the function declaration to have access to individual fields
instead of using dot notation
Spread:
# to get the elements out of an array individually: …array
Used to merge arrays arr1, arr2 -> merged = […arr1, …arr2]
Also works for the fields in in objects
Control structures:
# for (var x : arr)
# for (const elem of elems)
Higher-order functions:
# pass params as functions or return functions
Primitives:
# String, numbers, booleans
# they cannot be edited -> they are thrown away off the stack
# objects and arrays are reference types -> you can do const = [] and then edit its contents
because it only stores the address of the array
New Section 1 Page 2