Single Page Application (SPA)

• An application that loads a single HTML page and dynamically updates as the user interacts
• To develop SPAs, we need to use a JavaScript framework or library like React, Angular, or VueJs
• Advantages:
  • Fast: similar performance to native apps
  • Responsive: adapts to browser size changes using CSS media queries, frameworks like bootstrap, tailwind
  • User-friendly

Functional Programming in JavaScript

• Function is considered as first-class citizen
• Function can be created as a variable of type function
• Function can be passed as an argument to another function
• Function can be returned from another function as return value

Array Methods

• map(): Iterates over a collection to transform values
  • Accepts a function parameter called for each value
  • Parameter function returns transformed value
  • Returns a collection of transformed values
  • Size of returned collection is always same as original

// array of numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// get square of each number
const squares = numbers.map((number) => number ** 2)

Function Reference

• A reference to a function
• A variable that holds a function body's address

// here function1 is a function reference
// to the function body
function function1() {
  console.log('inside function1')
}

Export and Import

Named Export

// App.jsx
export function App() {
  // ...
}

// main.jsx
// importing with same name as exported entity
import {App} from './App.jsx'

// importing with an alias
import {App as MyApp} from './App.jsx'

Default Export