# Week 4 - Objects & Arrays I

# Objects

In real life, anything that you can touch are objects and the same is true in JavaScript! Let's take a car as an example.

Objects like a car can only be defined by two things:

  • What they have (properties)
  • What they can do (methods)

Let's keep using the car example:

Car object example

Let's break down both relations and how to access them.

  • Properties

    Like we described earlier properties are just things the object has. So in this example we see, this car has a name, model, weight and color.

    We see the properties are being accessed using a dot - car.name, cat.model, etc.

    Okay so how do we write it?

    var car = {
      name: "Fiat",
      model: 500,
      weight: "850kg",
      color: "White"
    }
    
  • Methods

    If objects are nouns, think of methods like verbs. It's what they do, it's the exact same thing as functions.

    In the example we see this car has 3 methods: start, drive, brake, and stop and are being called with the same dot, except the added the parenthesis to let us know it's a function.

    Example: car.start(), car.stop(), car.brake()

    Let's add methods to the previous example

    var car = {
      name: "Fiat",
      model: 500,
      weight: "850kg",
      color: "white",
      start: function(){
        // do something
      },
      drive: function(){
        // do something
      },
      brake: function(){
        // do something
      },
      stop: function(){
        // do something
      }
    }
    

# Quiz

  1. Identify whether each field is a prop or a method:
  var cat = {
    eyes: 2, //            1 - _____
    name: "catty", //      2 - _____
    mewo: function(){ //   3 - _____
      console.log("Meow")
    }
  1. Choose the correct way to get the number of eyes the cat object has:
    1. cat.eyes()
    2. cat.eyes
    3. cat.name()
    4. eyes(cat)
  2. Choose the correct way to change the cat's name to Puck:
    1. cat.giveName("Puck")
    2. cat.name = "Puck"
    3. cat.name() = "Puck"
    4. cat.name: "Puck"
  3. Choose the correct way for the cat to meow:
    1. cat.meow()
    2. cat.meow
    3. console.log(cat.meow)
    4. meow(cat)
  4. Functions in objects act differently than normal functions we've worked before
    1. True
    2. False

# Practice

Below are two unfinished JavaScript each of them objects that need to be completed

The first app have multiple methods on an object called car. Create the object for the given code to work.

The second problem is calling the method meow and expecting to log out "woof woof".

Practice Problems

# Solution

# Arrays

# Introduction

Arrays are boxes that can store many things of any type, not just one like a variable and are denoted by braces []

First let's remember what data types we have worked with until this point:

  • Boolean example: true, false
  • Number example: 1, 2924, 0.002912, 2/3
  • String example: "Hello", "Goodbye", "I can be anything I want~"
  • Variable example: name, iRepresentSomething, imDefinedElsewhere

An array is similar to a variable where it can store information, but unlike a variable it can store an infinite number of things. Let's compare.

var cat1 = "Benny the Cat"
var cat2 = "Jimmy the Cat"
var cat3 = "Arto the Artistic Cat"

In the example above we see three variables - 3 cats. What if we want to group all these cats together into one variable? We use an array! We will name this cats.

var cats = [cat1, cat2, cat3]
console.log(cats)
// > ["Benny the Cat", "Jimmy the Cat", "Arto the Artistic Cat"]

# Accessing a specific entry in the area

Arrays are accessed by using the index (How arrays count the location of their entries) and indexes start counting at 0

Array counting

Example: At the start of a race you start at mile 0.

Let's get the second cat of our array.

cats[1]
//> "Jimmy the Cat"

# Methods available with arrays

  1. array.push(item) - Adds an item to the array at the end.
//example - adding another cat to our list
cats.push("Piggy the Clean Cat")
  1. array.shift() - removes the first item in the array and returns that item
// example
var cats = [cat1, cat2, cat3]
cats.shift()
// > "Benny the Cat"
console.log(cats)
// > [cat2, cat3]
  1. array.pop() - removes the last item in the array and returns that item
// example
var cats = [cat1, cat2, cat3]
cats.pop()
// > "Arto the Artistic Cat"
console.log(cats)
// > [cat1, cat2]

# Solution

# Quiz

  1. T/F Arrays are used to store multiple values of a single type in a variable
  2. How would you get the third entry of an array?
  3. How would you call array methods?
    1. pop(cats)
    2. pop([cats])
    3. cats.pop()

# Practice

Below are two unfinished JavaScript each of them objects that need to be completed

The first expects problem expects to console out true without directly adding to the array.

Practice Problems

# Homework

Add history to calculator solution