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",
"Beryllium"
];
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
Function and arrow functions
- 1,297