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)

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
}

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

console.log(sec_result)

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

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`

``````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 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 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?

Function and arrow functions

By Kamil Gałuszka

• 1,297