Lab 3

Variables and Constants

functionScoped = 2
blockScoped = 5
constant1 = -3

Variables Types

numberVariable = 123
floatingPointNumber = 234.345
stringVariable = Hello World!
booleanVariable = true
isNumber = number
isString = string
isBoolean = boolean

Boolean Variables

true1 = true
false1 = false
false2 = false
true2 = true
true3 = true
true4 = true
true5 = true
false3 = false

If Else

true1

!false1

Logged In

Welcome

Welcome If Else

Please login Inline

Null vs Undefined

nullValue = null
undefinedValue = undefined
typeof nullValue = object
typeof undefinedValue = undefined
String(null) = null
String(undefined) = undefined

Functions

Legacy ES5 functions
twoPlusFour = 6
add(2, 4) = 6

New ES6 arrow functions

threeMinusOne = 2
subtract(3, 1) = 2

Implied return

fourTimesFive = 20
multiply(4, 5) = 20

Template Literals

result1 = 2 + 3 = 5
result2 = 2 + 3 = 5
greeting1 = Welcome home alice
greeting2 = Logged in: No

Simple Arrays

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

Array index and length

length1 = 5
index1 = 2

Add/remove to/from arrays

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

Looping through arrays

stringArray2 = STRING1STRING3

Map Function

squares = 149162536
cubes = 182764125216
Todos:
  1. Buy milk
  2. Feed the pets

Find Function

four = 4
string3 = string3

Find Index Function

fourIndex = 2
string3Index = 1

Filter Function

numbersGreaterThan2 = 456
evenNumbers = 246
oddNumbers = 15

Includes, Some, Every

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

Reduce Function

sum = 15

JSON Stringify

squares = [1,4,16,25,36]

House

bedrooms
4
bathrooms
2.5
Data
{
  "bedrooms": 4,
  "bathrooms": 2.5,
  "squareFeet": 2000,
  "address": {
    "street": "Via Roma",
    "city": "Roma",
    "state": "RM",
    "zip": "00100",
    "country": "Italy"
  },
  "owners": [
    "Alice",
    "Bob"
  ]
}

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}

Destructing

Object Destructing

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

name = John
age = 25

Array Destructing

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

first = one
second = two
third = three

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 });
sum = 3
difference = 2

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

Optional Chaining

house.address?.city = Roma
missing?.prop ?? "n/a" = n/a

Classes

Yellow background
Blue background
Red background
Dynamic Blue background
Dangerous background

Styles

Yellow background
Red background
Blue background

Client Component Demo

Current pathname: /labs/lab3

Server Component Demo

Server Render Time

Rendered on server at: 9:25:21 PM

Server Information

{
  "platform": "linux",
  "nodeVersion": "v24.19.0",
  "serverRenderTime": "9:25:21 PM"
}

Filesystem Access Demo

[
  "Add.tsx",
  "AddingAndRemovingToFromArrays.tsx",
  "ArrayIndexAndLength.tsx",
  "ArrowFunctions.tsx",
  "BooleanVariables.tsx",
  "Classes.css",
  "Classes.tsx",
  "ClientComponentDemo.tsx",
  "ConditionalOutputIfElse.tsx",
  "ConditionalOutputInline.tsx",
  "Destructing.tsx",
  "DestructingImports.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",
  "intermediates",
  "page.tsx",
  "todos"
]

Add

a = 3b = 4
a + b = 7

Square of 4

16
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Path Parameters

1 + 2
3 + 4

Todo List

  • Buy milk (CANCELED)
  • Pickup the kids (IN PROGRESS)
  • Walk the dog (DEFERRED)