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

My helpful screenshot

Functions are Objects
1
2
3
4
5
6
7

//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
1
2
3
4
5
6
7
8
9
10
11
12
13

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
1
2
3
4
5

anonymousGreet(); //error : anonymousGreet is undefined this line
var anonymousGreet = function (){ //anonymousGreet is set to a function
  console.log('hi');
}
pass function as parameter
1
2
3
4
5
6
7
8

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

My helpful screenshot

by reference

My helpful screenshot

bigword alert : Mutate

  • to change sth
  • Immutable means it can’t be changed
by value/reference
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
1
2
3
4
5
6
7
8

function greet(firstname,lastname,language){
  console.log(arguments);
  console.log(firstname);
  console.log(lastname);
  console.log(language);
}
greet() // undefined undefined undefined
spreadparams
1
2
3
4

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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');

Comment and share

Author's picture

Necisam

author.bio


author.job


Tainan, Taiwan