Scribd
Upload
0 views

JavaScript - Fundamentals

This document covers fundamental concepts of JavaScript, including script loading, import/export syntax, variable declaration, operators, functions, objects, arrays, destructuring, spread syntax, control structures, higher-order functions, and the distinction between primitives and reference types. It highlights the importance of using modules in JavaScript and React, as well as various coding practices and structures. The document serves as a comprehensive guide for understanding and utilizing JavaScript effectively.

Uploaded by

paul.stan03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

JavaScript - Fundamentals

This document covers fundamental concepts of JavaScript, including script loading, import/export syntax, variable declaration, operators, functions, objects, arrays, destructuring, spread syntax, control structures, higher-order functions, and the distinction between primitives and reference types. It highlights the importance of using modules in JavaScript and React, as well as various coding practices and structures. The document serves as a comprehensive guide for understanding and utilizing JavaScript effectively.

Uploaded by

paul.stan03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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 'package.json'
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

You might also like