Functions and arrow functions

by Kamil Gałuszka 
with ♡ 
from Solution4Future & Hackerspace Silesia

anonymous and named functions

var result = divide(3,4)
console.log(result)

var sec_result = add(5,6)
console.log(sec_result)

var add = function (a, b){      // THIS is anonymous function
    return a+b
}


function divide(a, b){          // THIS is named  function
    return a/b
}

anonymous and named functions

var result = divide(3,4)
console.log(result)          // 0.75

var sec_result = add(5,6)    // Uncaught TypeError: add is not a function
console.log(sec_result)

var add = function (a, b){
    return a+b
}


function divide(a, b){
    return a/b
}

anonymous and named functions

function divide(a, b){
    return a/b
}
var add, result, sec_result;

result = divide(3,4)
console.log(result)

sec_result = add(5,6)
console.log(sec_result)

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

anonymous and named functions

function divide(a, b){
    return a/b
}

var add = function (a, b){
    return a+b
}


var result = divide(3,4)
console.log(result)           // 0.75

var sec_result = add(5,6)
console.log(sec_result)       // 11 

Constructor

function Cat (name) {
    this.name  = name
}


var myCat = new Cat('Mruczek')
console.log(myCat.name)

var notMyCat = Cat('Staszek')
console.log(notMyCat.name) 

Constructor

function Cat (name) {
    this.name  = name
}


var myCat = new Cat('Mruczek')
console.log(myCat.name)        // Mruczek

var notMyCat = Cat('Staszek')
console.log(notMyCat.name)     // Uncaught TypeError: Cannot read property 'name' of undefined

Constructor and `this`

function Cat (name) {
    this.name  = name
}


var myCat = new Cat('Mruczek')
console.log(myCat.name)        // Mruczek

var notMyCat = Cat('Staszek')  // this is wrong
console.log(this.name)         // Staszek
console.log(window.name)       // Staszek
console.log(name)              // Staszek

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name  = name
}


var myCat = new Cat('Mruczek')
console.log(myCat.name)        // Mruczek

var notMyCat = Cat('Staszek')  
// Cannot set property 'name' of undefined
console.log(notMyCat.name)

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name = name;
    this.meow = function(){
        console.log(this.name+': Miauuu!');
    }
}


var myCat = new Cat('Mruczek')
myCat.meow()               // Mruczek: Miauuu!

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name = name;

}

Cat.prototype.meow = function(){
    console.log(this.name+': Miauuu!');
}

var myCat = new Cat('Mruczek')
myCat.meow()          // Mruczek: Miauuu!

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = function(){
    setTimeout(function(){
        console.log(this.name+': Miauuu!'); 
    }, 500)
}

var myCat = new Cat('Mruczek')
myCat.meow()                 // 'undefined: Miauuu!'

Constructor and `this`

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = function(){
    var self = this;
    setTimeout(function(){
        console.log(self.name+': Miauuu!'); 
    }, 500)
}

var myCat = new Cat('Mruczek')
myCat.meow()                 // 'Mruczek: Miauuu!'

Constructor and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = function(){
    setTimeout((function(){
        console.log(this.name+': Miauuu!'); 
    }).bind(this), 500)
}

var myCat = new Cat('Mruczek')
myCat.meow()                 // 'Mruczek: Miauuu!'

Arrow function and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = function(){
    setTimeout(() => {
        console.log(this.name+': Miauuu!'); 
    }, 500)
}

var myCat = new Cat('Mruczek')
myCat.meow()                 // 'Mruczek: Miauuu!'

Arrow function and `this`

() => {
    console.log(this) 
}

// IS Equal to?

(function(){
    console.log(this)
}).bind(this)

Arrow and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = () => {
    console.log(this.name +': Miauuu!'
}

var myCat = new Cat('Mruczek')
myCat.meow()                

Arrow and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = () => {
    console.log(this.name +': Miauuu!'
}

var myCat = new Cat('Mruczek')
myCat.meow()                // 'undefined: Miauuu!!'

// What sorcerry is THIS?

Arrow functions and `this`

Arrow and `this`

function Cat (name) {
    'use strict'
    this.name = name;
    this.meow = () => {
        console.log(this.name +': Miauuu!')
    }
}

var myCat = new Cat('Mruczek')
myCat.meow()                // 'Mruczek: Miauuu!!'

Arrow and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = () => {
    console.log(this.name +': Miauuu!')
}

var myCat = new Cat('Mruczek')
myCat.meow.call(myCat)      
myCat.meow.apply(myCat)     
myCat.meow.bind(myCat)
myCat.meow()                

Arrow and `this`

function Cat (name) {
    'use strict'
    this.name = name;
}

Cat.prototype.meow = () => {
    console.log(this.name +': Miauuu!')
}

var myCat = new Cat('Mruczek')
myCat.meow.call(myCat)      // 'undefined: Miauuu!!'
myCat.meow.apply(myCat)     // 'undefined: Miauuu!!'
myCat.meow.bind(myCat)
myCat.meow()                // 'undefined: Miauuu!!'

// Are You really kidding me and screw around?

Arrow functions

Arrow and `this`

function Cat () {
    'use strict'
    var meow = () => {
        console.log(this)
    }
    meow()
}

var myCat = Cat();
var whatIsIt = ()=> {console.log(this)}
whatIsIt()

Arrow and `this`

function Cat () {
    'use strict'
    var meow = () => {
        console.log(this)
    }
    meow()
}

var myCat = Cat();   // undefined
var whatIsIt = ()=> {console.log(this)}
whatIsIt().          // window object

When to use arrow?

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );
var arr = [5, 6, 13, 0, 1, 18, 23];
var sum = arr.reduce((a, b) => a + b);  // 66
var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]
var double = arr.map((v) => v * 2);       // [10, 12, 26, 0, 2, 36, 46]

Thanks! Any questions?