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

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:

Buy milk
Feed the pets

Array index and length

length1 = 5
index1 = 2

Add/remove to/from arrays

numberArray1 = 12456
stringArray1 = string1string3
Todo list:

Buy milk
Feed the pets
Walk the dogs

Looping through arrays

stringArray2 = STRING1STRING3

Map Function

squares = 149162536
cubes = 182764125216
Todos:

Buy milk
Feed the pets

Find Function

four = 4
string3 = string3

Find Index Function

fourIndex = 2
string3Index = 1

Filter Function

numbersGreaterThan2 = 456
evenNumbers = 246
oddNumbers = 15

JSON Stringify

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

House

bedrooms

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

Math	Matematica	Functions
Math.add(2, 3) = 5	Matematica.add(2, 3) = 5	add(2, 3) = 5
Math.subtract(5, 1) = 4	Matematica.subtract(5, 1) = 4	subtract(5, 1) = 4
Math.multiply(2, 3) = 6	Matematica.multiply(2, 3) = 6	multiply(2, 3) = 6
Math.divide(6, 2) = 3	Matematica.divide(6, 2) = 3	divide(6, 2) = 3

Classes

Yellow background

Blue background

Red background

Dynamic Blue background

Dangerous background

Styles

Yellow background

Red background

Blue background

Add

a = 3 b = 4
a + b = 7

Square of 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit ratione eaque illo minus cum, saepe totam vel nihil repellat nemo explicabo excepturi consectetur. Modi omnis minus sequi maiores, provident voluptates.

Path Parameters

1 + 2
3 + 4

Todo List

Buy milk (CANCELED)

Pickup the kids (IN PROGRESS)

Walk the dog (DEFERRED)

Client Component Demo

Current pathname: /labs/lab3

Server Component Demo

Server Render Time

Rendered on server at: 8:23:09 PM

Server Information

{
  "platform": "linux",
  "nodeVersion": "v24.13.0",
  "memoryUsage": {
    "rss": 123346944,
    "heapTotal": 67411968,
    "heapUsed": 36161112,
    "external": 4109732,
    "arrayBuffers": 490919
  },
  "cwd": "/vercel/path0"
}

Filesystem Access Demo

[
  ".git",
  ".gitignore",
  ".next",
  ".vercel",
  "README.md",
  "app",
  "eslint.config.mjs",
  "next-env.d.ts",
  "next.config.ts",
  "node_modules",
  "package-lock.json",
  "package.json",
  "postcss.config.mjs",
  "public",
  "scripts",
  "tsconfig.json",
  "vercel.json"
]