JS understanding the weird parts 4-34 ~ 4-40 function

4-34 Functions are Objects

bigword alert : FIRST CLASS FUNCTIONS

• every things you can do with other types you can do with functions.
• assignthem to variables, pass them around, create them on the fly.
• js is not the only language that has first class function

---

function has more properties than object

• Name(optional)
• Code
• use () to invoke a function

Functions are Objects

//declare a function
function greet(){
  console.log('hi');
}

greet.languague = "English"; //add property to function!!!

---

#4-35 Function statements and function Expressions

bigword alert : Expression

• a unit of code that results in a value
• statement just do the work

function express vs statement

greet();

//function statement
function greet(){
  console.log('hi');
}

//function express, return a object to var
var anonymousGreet = function (){
  console.log('hi');
}
anonymousGreet(); //use () to invoke a function

function hoisting

anonymousGreet(); //error : anonymousGreet is undefined this line
var anonymousGreet = function (){ //anonymousGreet is set to a function
  console.log('hi');
}

pass function as parameter

function log(a){
  console.log(a);
}

log(function (){
  console.log('hi');
});

---

#4-36 By value and By reference

• In js, primitives are by value
• In js, objects(includes functions) are by reference
• 沒有選擇餘地，就是這樣

by value

by reference

bigword alert : Mutate

• to change sth
• Immutable means it can’t be changed

by value/reference

// by value (primitives)
var a = 3;
var b;

b = a;
a = 2;

console.log(a);
console.log(b);

// by reference (all objects (including functions))
var c = { greeting: 'hi' };
var d;

d = c;
c.greeting = 'hello'; // mutate

console.log(c);
console.log(d);

// by reference (even as parameters)
function changeGreeting(obj) {
    obj.greeting = 'Hola'; // mutate
}

changeGreeting(d);
console.log(c);
console.log(d);

// equals operator sets up new memory space (new address)
c = { greeting: 'howdy' };
console.log(c);
console.log(d);

---

#4-37 Object, functions,and this

• ‘this’ is depending on how the funciton is called

1. In the global execution context -> global object
2. In function context, simple call (ex : f1() ) -> global object
3. As an object method -> the object

whole document

what is this

console.log(this);// window

function a (){
  console.log(this);
}
a()// window

var b = function(){
  console.log(this);
}

b()//window

var c = {
  name:"the c object",
  log: function(){

    this.name = "updated c object";
    console.log(this);//c object

    var setname = function(newname){
      this.name = newname;// the global object ,windows!!!
      // a lot of people think it's wrong
    }
    setname('updated again!!');
    console.log(this); //c object with name : "updated c object"
  }
}
c.log();

tips avoiding weird this

var c = {
  name:"the c object",
  log: function(){
    var self = this; //save this(c object) address in var self

    self.name = "updated c object";
    console.log(self);

    var setname = function(newname){
      self.name = newname;// self point to the c objects
    }
    setname('updated again!!');
    console.log(self);
  }
}
c.log();

---

4-38 Array-collection of anything

• In javascript, array is typeless. You can put anything into it(Even a function = special object).

array contains everything

var arr = [
  1,
  true,
  {
    name:'sam',
    phone:'0911111111'
  },
  function (name){
    var greeting = 'Hello ';
    console.log(greeting + name);
  },
  "bello"
]
arr[3](arr[2].name); // "Hello sam"

---

4-39 arguments and spreads

• arguments keyword contains all the function arguments
• arguments is array-like, not exactly regular array
• arguments will become deprecated
• spread parameter(…) //資料查到是叫Rest parameters

use arguments

function greet(firstname,lastname,language){
  console.log(arguments);
  console.log(firstname);
  console.log(lastname);
  console.log(language);
}
greet() // undefined undefined undefined

spreadparams

function greet(firstname,lastname,language, ...other){
  // additional params are put into an array called other
}

---

4-40 function overloading

• js don’t have function overloading
• In js, funtion is an object
• In js, there are firstclass function

function greet(firstname, lastname, language) {
  language = language || 'en';
  if (language === 'en') {
    console.log('Hello ' + firstname + ' ' + lastname);
  }
  if (language === 'es') {
    console.log('Hola ' + firstname + ' ' + lastname);
  }
}
function greetEnglish(firstname, lastname) {
  greet(firstname, lastname, 'en');
}
function greetSpanish(firstname, lastname) {
  greet(firstname, lastname, 'es');
}
greetEnglish('John', 'Doe');
greetSpanish('John', 'Doe');