Loading

JS6

Johan Kohlin

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

Client side programming

Lecture #6

slides.com/jkohlin/js6/live

This week: Chapter 5

but please read chapter 7 as well (especially p.289) compairing objects

Objects

type: object

a collection of properties

color: Yellow

shape: Square

var shape = {color: "yellow", shape: "square"};

type: object

a collection of properties 

var verse = {
  animal: "cow", 
  sound: "moo", 
};

animal: cow

sound: moo

type: object

a collection of properties

dance: flossing

difficult: true

origin: SNL

var taunt = {
  dance: "flossing", 
  difficult: true, 
  origin: "SNL"
};

An object cannot be further resolved. 

I't s a single value

Arrays

Objects

Can have multiple values 👍  👍 
Values can be accessed with square brackets 👍  👍 
Values can be accessed using dot-notation 👍 
Each value can have its own name 👍 
Each value MUST have its own name 👍 
Made for storing many values of same type 👍  

var car = {
    make: "chevy",
    model: "Bel Air",
    color: "red",
    year: 1957,
    mileage: 1021,
    passengers: 2,
    convertible: true
};
var car = {
    make: "chevy",
    model: "Bel Air",
    color: "red",
    year: 1957,
    mileage: 1021,
    passengers: 2,
    convertible: true
};

The Object

- an organized type!

Arrays

Objects

Functions

Numbers

Strings

Booleans

In pairs,

Describe this toy as an object

(use values of all types if you can)

var toy = {  
 
  

};

Other metaphors

var person = {
    mame = "John",
    email = "john@ju.se",
    phone = "070-123456"
}

Name:

Email:

Phone:

Two ways to set properties

literal syntax

var friend = {
    name:     "Jane Doe",
    phone:    "555-12345",
    email:    "jane@doe.com",
    bff:      true
};

var friend = {};

friend.name = "Jane Doe";
friend.phone = "555-12345";
friend.email = "jane@doe.com";
friend.bff = true;

dot notation

A.K.A. JavaScript Object Notation or JSON

Two ways to get properties

brackets notation

alert( friend["name"] );

alert( friend.name );

dot notation

Arrays

var fruits = ["apple", "banana"];

Objects

var fruit = {name: "banana", color: "yellow"};
var fruits = [
  "apple", 
  "banana"
];
var fruit = {
  name: "banana", 
  color: "yellow"
};
fruits.push("cherry")
fruit.edible = true
alert( fruits[1] ) // "banana" 
alert( fruit["name"] ) // "banana"
fruits[2] = "cherry"
fruit["edible"] = true
alert( fruit.name ) // "banana"

Not easily copied

like with arrays

var person = {
  name: "John",
  age: 23
};

var dude = person;

dude.age = 24;

console.log(person.age) // 24

How to copy an object

var person = {
  name: "John",
  age: 23
};

//this is how you'd make a new copy
var dude = Object.assign({}, person);

dude.age = 24;

console.log(person.age) // 23

functions in objects

{

 

 

}

 

name : "Jane" ,

print: function() {

         alert(this.name);

       }

properties or methods

property

method

because it's a function

this

a keyword that refers to itself

var fruit = {
    kind: "apple",
    color: "red",
    print: function() {
        console.log( this.kind );
    }
}

fruit.print();

this always refer to the object the function was called from. In this case print is called from fruit

this

Why not just write fruit.kind?

var fruit = {
    kind: "apple",
    color: "red",
    print: function() {
        console.log( this.kind );
    }
}
var newFruit = fruit;
fruit = 42;

newFruit.print(); // "apple"

it doesn't matter what variable the object is in ,

this works anyway

Lets code some methods

There is a third way to create objects:

 

Object Constructor Functions

  • When you need an unknown number of objects of the same kind
  • They can share methods and properties

The object constructor

a "blueprint" for creating many objects of the same "type"

function Gingerbread (text) {
  this.decoration = text;
}

var cookie1 = new Gingerbread("Daniel");

var cookie2 = new Gingerbread("Maria");
{decoration: "Daniel"}

{decoration: "Maria"}

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie1 = new Gingerbread("Daniel");

var cookie2 = new Gingerbread("Maria");

Notice the Upper case letter. That is a convention

The new keyword is essential. It creates the new object

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

{}

var cookie = 

new

a new empty object is created

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

new

Gingerbread("Daniel");

Gingerbread is called

from the new object

{}

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

new

Gingerbread("Daniel");

this, refers to the new object

{}

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

new

Gingerbread("Daniel");

{decoration}

decoration, is added to the new object

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

new

Gingerbread("Daniel");

{decoration:"Daniel"}

"Daniel", is passed to Gingerbread and assigned to the property decoration of the this new object

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}

var cookie = 

{decoration:"Daniel"}

The constructor call expression is resolved to a new object with a decoration property set to "Daniel"

and saved to the variable cookie

The object constructor

function Gingerbread (text) {
  this.decoration = text;
}
var cookie = new Gingerbread("Daniel");

"Daniel"

cookie.decoration

The Prototype object

  1. The Prototype object is included in all functions
  2. Objects created from a function has access to that object
  3. This is called prototypal inheritance 
Gingerbread.prototype.color = "white"
console.log(cookie.color) // "white"

The Prototype object

function Car (color, brand) {
  this.color = color;
  this.brand = brand;
  this.fuel = "diesel";
}

Car.prototype.wheels = 4;
Car.prototype.present = function () {
  console.log("This is a " + this.color + " " + this.brand)
}

var micra = new Car("white", "Nissan")
var m3 = new Car("black", "BMW")

micra.present() // This is a white Nissan
m3.present() // This is a black BMW

Core objects

Built into the JavaScript language

Math, Date, RegExp

All types have a Prototype Object

Array, Bool, Number, Object, String

open the console and type one of them followed by a period (e.g. Math.) to see all properties

open the console, type: var str = "Hello";

Then type str. to see all properties inherited

Host objects

Built into the browser (where the code is running )

 

window

  window.innerHeight

  prompt()

  alert()

console

  console.log()

document

  document.querySelector()

Printing a table view in console

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

Example