Array methods and objects

Homework

1. Common array methods
   • Read: Common array operations
   • Reference: Array.prototype.push() (adding an item to the end of an array)
   • Reference: Array.prototype.pop() (removing an item from the end of an array)
   • Reference: Array.prototype.unshift() (adding an item to the beginning of an array)
   • Reference: Array.prototype.shift() (removing an item from the beginning of any array)
2. Objects
   • Read: Object basics
   • Skim: Introducing objects

---

Morning reflection

Housekeeping

1. Dailies shoutouts
   • Joel’s Drinking Game
   • Makayla’s Date Night Chooser
   • Aidan’s Character Generator
   • Karen’s “Which Kiyo are you today”
   • Swapna’s Random on Hover (with multi-dimensional array)
   • Patrick’s Random Cat Generator
   • Norville’s Random Word Speaker
2. Note for Dailies: include direct link to GH Pages.

---

1. Useful array methods

Learning Objectives

• Define Stack and First-In/Last-Out data structures.
  • Demonstrate push() and pop() array methods.
• Define Queue and First-In/First-Out data structures.
  • Demonstrate push() and shift() array methods.
• Demonstrate other common array methods:
  • unshift(): Adding to the beginning of an array.
  • splice(): Remove or replace the items of an array.
  • slice(): Copies a subset of an array.
  • concat(): Returns a joined copy of two arrays.
  • indexOf(): Finds the first index of a matching item.

Warning: Array methods like pop(), push(), shift(), unshift() and splice() are destructive operations that change the original array. slice() and concat() are non-destructive because they return a copy of the original array.

Terminology

Stacks (FILO)

First-In/Last-Out - The first item added to an array is the last item removed from an array. Example: A stack of books or dishes.

Queue (FIFO)

First-In/First-Out - The first item added to an array is the first item removed from an array. Example: A ticket line.

Destructive

A process that changes the original array instead of returning a new array.

Materials

• Changing Arrays

Key Takeaways

• Stacks and Queues are data structures that are most often used on the backend. We’ll revisit these during the node portion of the course.
• Pay careful attention to when and how a method returns values when reading the documentation.

---

2. Pagination using non-destructive slice()

Learning Objectives

• Define the properties of a paginated list.
• Demonstrate pagination using slice() and arithmetic operations.

Terminology

Pagination

A pattern for showing a subset of a list, usually divided into an equal number of items per page.

Items per page

The number of items per page, duh.

Page

The current page being displayed

Offset

The total number of items before the current page, usually calculated by page * itemsPerPage.

Total Pages

The total number of pages. Usually calculated as array.length / itemsPerPage, rounded up.

Materials

• Starter: Paginating an HTML List

Key Takeaways

• Pagination can be handled on the front or backend, usually by passing the page to display.
• Items per page is usually a configuration setting that doesn’t change. This, combined

---

3. Object literals

Learning Objectives

• Define Javascript object.
• Demonstrate the creation of an object literal.
• Output the data of an object to an HTML page.

Terminology

Object

A collection of name/value pairs (in terms of Javascript)

Object Literal

An object literally coded using proper object notation.

Object Property

A fancy term for a name/value pair where the value is anything but a function.

Object Method

A fancy term for name/value pair where the value is a function.

Materials

• Animal Images
• Starter: Animal objects

Key Takeaways

• Unlike other programming languages, an object is simply a collection of name/value pairs.
• Object prototypes are objects that are named __prototype__; Javascript handles the rest.

Danger: Never overwrite or change the __prototype__ object unless you know what you’re doing. Doing so can break your application very badly.

---

Open lab-time

1. Take one of your image URLs from yesterday and convert it to an object, adding a:
   • title
   • imgURL
   • width
   • height
   • photoCredit
2. Repeat with the rest of your image URLs and convert your array of strings into an array of objects.
3. Refactor your random image code to use an object instead of just an image URL.
4. Try paginating your list of images.

---

Tony’s goals for Lab-Time

• Add URL params to Random Name Generator
• Gists!
  • linking JS modules
  • Pagination

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.