Lab 3

Variables and Constants

functionScoped = 2
blockScoped = 5
constant1 = -3
name = Zhenming Gao
greeting = Helloo Zhenming Gao!
sampleSum = 7

Variables Types

numberVariable = 123
floatingPointNumber = 234.345
stringVariable = Hello World!
booleanVariable = true
isNumber = number
isString = string
isBoolean = boolean
string2, bool2 = string2, false
isString2, isBool2 = string, boolean
sampleCount = 42
sampleLabel = Lab 3
sampleCountT = number
sampleLabelT = string

Boolean Variables

true1 = true
false1 = false
false2 = false
true2 = true
true3 = true
true4 = true
true5 = true
false3 = false
true6 = true
"123" === 123 = false
"123" == 123 = true

If Else

true1

!false1

not false1

Logged In

Welcome

Free

Good morning

Welcome If Else

Please login Inline

Admin Inline

Guest Inline

Null vs Undefined

nullValue = null
undefinedValue = undefined
typeof nullValue = object
typeof undefinedValue = undefined
String(null) = null
String(undefined) = undefined
nullValue ?? "default" = default
null == undefined = true
null === undefined = false

Functions

Legacy ES5 functions
twoPlusFour = 6
add(2, 4) = 6
subtract(2, 4) = -2
multiply(3, 7) = 21
threeTimesSeven = 21

New ES6 arrow functions

threeMinusOne = 2
subtract(3, 1) = 2
multiply(3, 4) = 7
add(2, 4) = 6

Implied return

fourTimesFive = 20
multiply(4, 5) = 20
square(9) = 81
divide(4, 5) = 0.8

Template Literals

result1 = 2 + 3 = 5
result2 = 2 + 3 = 5
greeting1 = Welcome home alice
greeting2 = Logged in: No
courseStatus = RS101 published: Yes
konst(true)(false) ? name : "" = Zhenming Gao

Simple Arrays

numberArray1 = 12345
stringArray1 = string1string2
variableArray1 = 25-312345string1string2
Todo list:
  1. Buy milk
  2. Feed the pets
  3. Buy Meat
  4. Call the dentist

Array index and length

length1 = 5
index1 = 2
indexOf1 = 0
numberArray1.indexOf(9) = -1

Add/remove to/from arrays

numberArray1 = 12456
stringArray1 = string1string3
Todo list:
  1. Feed the pets
  2. Walk the dogs
  3. Buy stamps
  4. Buy meat

Looping through arrays

stringArray2 = STRING1STRING3
stringLengths = 77
stringArray3 = string1string3

Map Function

squares = 149162536
cubes = 182764125216
doubles = 24681012
Todos:
  1. Buy milk
  2. Feed the pets
  3. Buy meat
  4. Email the TA

Find Function

four = 4
string3 = string3
findNonexistent = undefined
two = 2

Find Index Function

fourIndex = 2
string3Index = 1
threeIndex = -1
sixIndex = 4

Filter Function

numbersGreaterThan2 = 456
evenNumbers = 246
oddNumbers = 15
numbersLessThan2 = 1
numbersGreaterThan5 = 56

Includes, Some, Every

includes(3) = true
includes(8) = false
some(n > 4) = true
every(n > 0) = true
includes(5) = true
every(n > 4) = false
some(n === 1) = true

Reduce Function

sum = 15
product = 120
joined = 12345

JSON Stringify

squares = [1,4,16,25,36]
rs101 = {"course":"RS102","modules":3}
sampleCourse = {"course":"RS102","modules":3}

House

bedrooms
4
bathrooms
2.5
year built
2004
cars in garage
2
owners
Alice, Bob
Data
{
  "bedrooms": 4,
  "bathrooms": 2.5,
  "squareFeet": 2000,
  "yearBuilt": 2004,
  "address": {
    "street": "Via Roma",
    "city": "Roma",
    "state": "RM",
    "zip": "00100",
    "country": "Italy"
  },
  "owners": [
    "Alice",
    "Bob"
  ],
  "garage": {
    "cars": 2
  }
}

Spread Operator

Array Spread

arr1 = [1,2,3]
arr2 = [1,2,3,4,5,6]

Object Spread

{"a":1,"b":2,"c":3}
{"a":1,"b":2,"c":3,"d":4,"e":5,"f":6}
{"a":1,"b":4,"c":3}
{"a":999,"b":2,"c":3,"d":4,"e":5,"f":6}
[1,2,3,4,5,6,7]

Destructing

Object Destructing

const { name, age } = { name: "John", age: 25 }

name = John
age = 25
city = Boston

Array Destructing

const [first, second, third, fourth] = ["one","two","three","four"]

first = one
second = two
third = three
fourth = four

Function Destructing

const add = (a, b) => a + b;
const sum = add(1, 2);
const subtract = ({ a, b }) => a - b;
const difference = subtract({ a: 4, b: 2 });
const product = multiply({ a: 4, b: 2 });
const greeting = greet();
sum = 3
difference = 2
product = 8
greeting = Hello, ada

Destructing Imports

MathMatematicaFunctions
Math.add(2, 3) = 5Matematica.add(2, 3) = 5add(2, 3) = 5
Math.subtract(5, 1) = 4Matematica.subtract(5, 1) = 4subtract(5, 1) = 4
Math.multiply(3, 4) = 12Matematica.multiply(3, 4) = 12multiply(3, 4) = 12
Math.divide(8, 2) = 4Matematica.divide(8, 2) = 4divide(8, 2) = 4
Math.add(10, 20) = 30Matematica.add(10, 20) = 30add(10, 20) = 30
Math.remainder(10, 3) = 1Matematica.remainder(10, 3) = 1remainder(10, 3) = 1

Optional Chaining

house.address?.city = Roma
missing?.prop ?? "n/a" = n/a
house.garage?.cars ?? 0 = 0
house.address?.zip ?? "unknown" = unknown

Classes

Yellow background
Blue background
Red background
Dynamic Blue background
Dangerous background
Dynamic GREEN background.
Dynamic Green background (AI)

Styles

Yellow background
Red background
Blue background
Green background
Gray background

Client Component Demo

Current pathname: /labs/lab3

Last segment: lab3

Pathname length: 10

Server Component Demo

Server Render Time

Rendered on server at: 8:34:15 AM

Server Information

{
  "platform": "linux",
  "nodeVersion": "v24.22.3",
  "serverRenderTime": "8:34:15 AM",
  "arch": "x64",
  "pid": 86
}

Filesystem Access Demo

[
  "Add.tsx",
  "AddingAndRemovingToFromArrays.tsx",
  "ArrayIndexAndLength.tsx",
  "ArrowFunctions.tsx",
  "BooleanVariables.tsx",
  "Classes.css",
  "Classes.tsx",
  "ClientComponentDemo.tsx",
  "ConditionalOutputIfElse.tsx",
  "ConditionalOutputInline.tsx",
  "DestructingImports.tsx",
  "Destructuring.tsx",
  "FilterFunction.tsx",
  "FindFunction.tsx",
  "FindIndex.tsx",
  "ForLoops.tsx",
  "FunctionDestructing.tsx",
  "Highlight.tsx",
  "House.tsx",
  "IfElse.tsx",
  "ImpliedReturn.tsx",
  "IncludesSomeEvery.tsx",
  "JsonStringify.tsx",
  "LegacyFunctions.tsx",
  "MapFunction.tsx",
  "Math.ts",
  "NullUndefined.tsx",
  "OptionalChaining.tsx",
  "PathParameters.tsx",
  "ReduceFunction.tsx",
  "ServerComponentDemo.tsx",
  "SimpleArrays.tsx",
  "Spreader.tsx",
  "Square.tsx",
  "Styles.tsx",
  "TemplateLiterals.tsx",
  "TernaryOperator.tsx",
  "VariableTypes.tsx",
  "VariablesAndConstants.tsx",
  "add",
  "page.tsx",
  "todos"
]

Add

a = 3b = 4
a + b = 7

Add

a = 10b = 20
a + b = 30

Add

a = 7b = 8
a + b = 15

Square of 4

16

Square of 9

81

Square of 5 = 25

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis natus dolores incidunt quasi ipsa, itaque quae iste eum. Inventore, velit earum consequatur distinctio sunt ad vel asperiores aliquid quisquam eius.
Children can be any JSX

Path Parameters

1 + 2
3 + 4
10 + 15
5 + 6

Todo List

  • Buy milk (CANCELED)
  • Pickup the kids (IN PROGRESS)
  • Walk the dog (DEFERRED)
  • Do homework (IN PROGRESS)
  • Email the TA (COMPLETED)