Module 5 - Array Manipulation

Module 5 OH Welcome & Objectives

What is an array?
Why we manipulate arrays (real-world examples)
Today's Goals: key array methods, writing your own functions, prep for projects

Exercise 1: Setup

const movies = ["Interstellar", "Inception", "The Matrix", "Arrival", "The Prestige"];

.push() and .pop()

.push(item) → adds to end
.pop() → removes from end

Exercise: Add two movies, then remove the last and log it.

.shift() and .unshift()

.unshift(item) → adds to start
.shift() → removes from start

Exercise: Add to the start, remove the first movie, and print the updated array.

.splice()

.splice(index, numberToRemove, item1, item2, ...)

Exercise: Remove the 2nd movie. Insert a new movie at position 2.

.slice()

.slice(startIndex, endIndex) → returns new array

Exercise: Create a new array with the first 3 movies using .slice().

.indexOf() and .includes()

.indexOf(item)
.includes(item)

Exercise: Check if "The Matrix" is in your array. Print index of "Inception".

.join()

.join(separator) → makes string from array

Exercise: Create a string of movie titles separated by " | ".

.forEach()

Run function for each item

Exercise: Print "One of my favorite movies is: <movie>" for each item.

.map()

Create a new modified array

Exercise: Create a new array of uppercase movie names.

.filter()

Returns items that match a condition

Exercise: Create a new array of movie titles longer than 8 characters.

.reduce()

Condense array into one value

Exercise: Calculate total number of characters across all movie titles.

Array Challenge 🏆

Create a function favoriteMovieString(arr) that:

Takes in an array of movie titles
Returns a string like: "I love these movies: Interstellar, Inception, The Matrix."

Wrap Up

Where we go next: Strings, Functions, Scope
Practice: Complete your self-study assignments

Strings and String Manipulation

What is a string?
Common string methods: .toUpperCase(), .toLowerCase(), .slice()
String indexing: zero-based

Exercise: Write a function that capitalizes the first letter of a given string.

String Template Literals

Syntax: `Hello, ${name}!`

Exercise: Write a function that returns: `My favorite movie is ${movie}`

Anonymous Functions & Fat Arrows

Example: const greet = (name) => `Hi, ${name}`;

Exercise: Write an anonymous arrow function that squares a number.

Function and Block Scope

Block scope: let & const
Function scope: var

Exercise: Create a function that declares a let variable inside and console.logs it.

Passing Functions by Reference

Functions are objects in JavaScript
Common methods: call(), apply(), bind()

Exercise: Use .bind() to bind a function to an object and call it.

ES6 Modules

Export: export default or export const
Import: import something from './file.js'

Exercise: Write two small files: one that exports a function and one that imports and calls it.

Final Demo: "Build a Movie Database" 🎬

Combine what we've learned to build a small interactive app:

Create an array of movie objects with properties like title and year.
Use a function with a template literal to display each movie.
Write an arrow function to filter movies after a certain year.
Demonstrate variable scope in your filter or display functions.
Break functionality into ES6 modules (if using multiple files).

Stretch Goal: Add a feature to capitalize all movie titles.

Setting Up a Local Server

To run ES6 modules in the browser, we need a local server:

Install http-server globally:
```
npx http-server
```
Navigate to your project directory in terminal
Start the server:
```
http-server
```
Open your browser and go to:
```
http://localhost:8080
```

Note: The server automatically serves index.html when you visit the root URL (http://localhost:8080). You don't need to specify index.html in the URL.