this, Objects, Classes

Question 1

if you define the function with an arrow function

Answer 1

write console.log(this) on the first valid line above the arrow function. And you will see what THIS stands for inside the arrow function.(If arrow function is a method inside the class, it is transferred into the constructor, so the fist valid line is always inside the constructor, so THIS is always the class itself)

//first

console.log(this); //this is the line!!
const print = () => {
  dosmth(this);
}

//second example

const colors = {

  printColor(){
    console.log(this)  //this is the line!!!!
    const print = () => {
       dosmth(this);
     }
     print();
  }
};

colors.printColor();

Question 2

if you call bind, apply or call on the function when you invoked it

Answer 2

this is equal to the first argument of bind, apply or call

const print = function(){
  console.log(this); //the color object is this
}

print.call( { color : ‘red’ } ); //the color object is this

if we just called print() - the value would be different

Question 3

all other cases

not arrow function, not bind, apply or call

Answer 3

this is what is on the left side of .

const colors = {
  printColor(){
    console.log(this)  
  }
};

colors.printColor();

this in this case is colors

const obj = {a : 1};
obj.attrib = colors.printColor;

obj.attrib(); // in this case this will the obj, not the colors

Question 4

shorthand object properties (ES 2015)

not supported in IE

Answer 4

instead of this:

const getStats = (arr) => {
  const min = Math.min(...arr);
  const max = Math.max(...arr);
  const sum = arr.reduce((total, cur) => total + cur);
  return {
    min: min,
    max: max,
    sum: sum
  }
}

with ES 2015 we can write this

const getStats = (arr) => {
  const min = Math.min(...arr);
  const max = Math.max(...arr);
  const sum = arr.reduce((total, cur) => total + cur);
  return {
    min,
    max,
    sum
  }
}

it will create properties with the specified names and store values from the variables with the same name

Question 5

computed properties (dynamic keys)

Answer 5

Previously, in order to set a key name equal to the value of some variable we did this

const role = "host"; //we want to use variable role to set key "host"
const person = "James";
const role2 = "director";
const person = "Kate";

const team = {};
team[role] = person;

we couldn’t do this

const team = {
role: person
}
because this would result in key being role, not host

Now we can do this with

const team = {
  [role]: person,
  [role2]: person2,
  [1 + 6 + 3}: 'twelve'
}

Question 6

computed properties (dynamic keys)
return copy of the passed object with the additional specified properties

Answer 6

function addProp(obj, prop, val){
  return {
    ...obj,
    [prop]: value
}

Question 7

functions as properties on objects

Answer 7

const math = {

  add : function(x, y){
    return x + y;
  },
  multiply: function(x, y){
    return x * y;
  },
  nums: [1, 2, 3]
}

math. add will not execute the function, just print the object
math. add(3, 4) will execute

Question 8

functions as properties on objects SHORTHAND

Answer 8

const math = {

  add (x, y){
    return x + y;
  },
  multiply(x, y){
    return x * y;
  },
  nums: [1, 2, 3]
}

the key here is add and the value is the object (body of the function)

Question 9

this in the context of a standalone function (not an object method)

Answer 9

this = Browser Window

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

the same for arrow functions

const greet = function (){
  console.log(this);
}

Windows is the global scope of the browser
For ex., alert(“someth”) is the same as window.alert(“someth”);

Question 10

this in the object method

Answer 10

const person = {
  name: "Tata",
  greet(){
   console.log(this);
  }
}

this is the surrounding object person. So we can access other properties

const person = {
  name: "Tata",
  last: "Ni",
  greet(){
   console.log(this.name);
   console.log(`${this.name} ${this.last}`);
  }
}

Question 11

this in the object method with destructuring

Answer 11

const person = {
  name: "Tata",
  last: "Ni",
  greet(){
   const{
     name,
     last
    } = this;
   console.log(`${name} ${last}`);
  }
}

Question 12

this in the object method and calling one method from another

Answer 12

const person = {
  name: "Tata",
  last: "Ni",
  greet(){
   console.log(this.name);
   console.log(`${this.name} ${this.last}`);
  },
  print(){
    this.greet(); //we must use this, otherwise will not work
  }
}

be careful when switching the context!!!

const print = person.print;

if we now call print(); - we’ll get an error, because in this context this is not the person object, but the Window again. And the browser window doesn’t have greet() method

Question 13

this in arrow functions

Answer 13

no matter which context - this is always the same, never changes when the context changes
In arrow functions, this retains the value of the enclosing lexical context’s this. (not dynamic runtime value). No matter what, foo’s this is set to what it was when it was created

const person = {
  name: "Tata",
  last: "Ni",
  greet(){
   console.log(this.name);
   console.log(`${this.name} ${this.last}`);
  },
  print: () => {
    console.log(this); //Window object
    console.log(this.name); //undefined
  }
}

if we call

person.print(); we’ll get

console. log(this); //Window object
console. log(this.name); //undefined

that’s why we don’t use often arrow functions as object methods

Question 14

arrow functions vs function expressions use cases

Answer 14

use arrow functions as callbacks

use function expressions as object methods

Question 15

prototype

Answer 15

basically the same as class in java
when you print an object you see in its property \_\_proto\_\_ the name of its class (reference to the actual prototype object)

you can for ex. print it
String.prototype
Array.prototype

we can even add methods or properties to the prototype

String.prototype.yell

Question 16

extending

Answer 16

extends

super() - to execute the parent’s constructor

Question 17

factory functions

Answer 17

we create an object inside a function and return it. This object can also have methods, defined inside the function

function makeColor(r, g, b){
  const color = {};
  color.r = r;
  color.g = g;
  color.b = b;

  color.rgb = function(){
    const {r, g, b} = this;
    console.log(`rgb(${r}, ${g}, ${b})`);
  }
  return color;

}

now we can create an object using this factory function makeColor and call rgb function on this object

const color = makeColor(13, 465, 22);
color.rgb();

OR even

makeColor(13, 465, 22).rgb();

THIS IS NOT HOW WE NORMALLY create objects and use them. This pattern is not commonly used. Instead - constructor pattern.

Question 18

constructor pattern

Answer 18

using classes and new

class Color {
  constructor(r, g, b){
   this.r = r;
   this.g = g;
   this.b = b;
    console.log(r, g, b);
  };

greet(){
console.log(…);
}

}

const color = new Color(11, 45, 23);