Objects & `this`

Typ alla grejer som behövs till inlämningsuppgiften finns i övningsuppgifterna, det gäller att plocka ihop allt

Bra idé att försöka lösa övningarna, annars se igenom lösningsförslagen och försök att förstår hur koden fungerar

Gör kommentarer och använd Debuggern i Chrome/Firefox/Safari/Opera

Ett objekt är en samling av key/value-par

const obj = {
  property: 'value'
};

Varje nytt objekt har ett eget this

// We may look the same but we are not
const arrayOfObjects = [
  {
    name: "Jesper"
  },
  {
    name: "Jesper"
  }
];

Varje nytt element i DOMen har ett nytt this

context

this syftar på contexten

contexten är i vilket objekt vi befinner oss i

console.log(this); // window

const button = document.getElementById('button');

button.addEventListener('click', function(){
  console.log(this) // <button> Click me</button>
});

Ett element är ett objekt

Objekt kan ha funktioner

getElementById är en funktion som är bunden till objektet document

const document = {
  getElementById: function(id){
    // do magic stuff
  }
}
document.getElementById('id');

Vi kan referera till objektets egenskaper inifrån objektet

const person = {
  name: "Jesper",
  printName: function(){
    // print the property 'name' of this object
    console.log(this.name);
  }
}
console.log(person.name); // this does the same thing
person.printName();       // this does the same thing

function printMe(){
  console.log(this);
}

Vad är this här?

const obj = {
  printMe: function(){
    console.log(this);
  }
}

Vad är this här?

Constructor Pattern

En constructor är bara en funktion, inget mer.

Dock en funktion vars enda uppgift är att skapa objekt

En objektfabrik

function Book(name, year){
  this.name = name;
  this.year = year;
}

Vad är this i det här fallet?

function Book(name, year){
  this.name = name;
  this.year = year;
}

const book1 = new Book('Pesten', 1947);
const book2 = new Book('Darling River', 2010);

nyckelordet new är viktigt, annars skapas inget nytt objekt, inget nytt this skapas då

const book1 = new Book('Pesten', 1947);

Det vi skapar är detta:

const book1 = {
  name: 'Pesten',
  year: 1947
}

function Book(name, year){
  this.name = name;
  this.year = year;
  this.getInfo = function(){
    console.log(`The book ${this.name} was released in ${this.year}`);
  }
}

const book1 = new Book('Pesten', 1947);
const book2 = new Book('Darling River', 2010);
book2.getInfo();  //The book Pesten was released in 1947
book1.getInfo();  //The book Darling River was released in 2010 

Closures

function add(a,b){
  return a + b;
}

const result = add(10,10); // === 20

const result = add(10,10) + add(10,10);

const result = add(add(10,10), add(10,10));

Vi vill använda return för att det tillåter oss att fortsätta göra beräkningar på det som returneras

function createParagraph(content){
  return `<p>${content}</p>`;
}
document.body.innerHTML = createParagraph("Hello I am argument");

När en funktion har körts klart så försvinner allting ur minnet

const a = 10; // yea im right here
function makeB() {
  const b = 10;
}
makeB();
// After this, 'b' seize to exist, the function is done.

function createFunction(){
  const name = "Jesper";
  function printName(){
    console.log(name);
  }
  return printName;
}

Vad händer om vi kallar på createFunction();

En funktion returneras, console.log kommer INTE kallas på

function createFunction(){
  const name = "Jesper";
  function printName(){
    console.log(name);
  }
  return printName;
}
const printName = createFunction();
printName();

createFunction() har körts klart och name borde inte finnas längre

När vi skapar en funktion i en funktion så sparas de variabler som fanns i det yttre scopet när funktionen kallades på

Closure

När vi skapar en funktion inuti en annan funktion så kommer den inre funktionen ihåg det yttre scopet som funktionen kallades på i

I vanliga fall så kör en funktion klart och sen försvinner alla varibler som fanns i den funktionen.