bit.ly/pizzalert

Nizar Khalife

Web Developer.

 

JavaScripting for years.


I teach it too!

Functions...

They're so complicated.

Scope

Closures

Context

Arrows

Hoisting

Arguments

call, apply

& bind

Callbacks

Async

JavaScript functions can be saved in variables.

Functions that serve as arguments are callbacks.

alert('pepperoni🍕')

pepperoni🍕

pizzalert('pepperoni')
ReferenceError: pizzalert is not defined
alert(myPizza)
ReferenceError: myPizza is not defined

Identifier

Variable!

pizzalert('pepperoni')
var pizzalert = 'large'
pizzalert('pepperoni')
TypeError: pizzalert is not a function
var pizzalert = 9999
pizzalert('pepperoni')
TypeError: pizzalert is not a function
var pizzalert = true
pizzalert('pepperoni')
TypeError: pizzalert is not a function
var pizzalert
pizzalert('pepperoni')
TypeError: pizzalert is not a function
var pizzalert = {
  size: 'large'
}
pizzalert('pepperoni')
TypeError: pizzalert is not a function
function pizzalert (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('pepperoni')

pepperoni🍕

var pizzalert = function (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('pepperoni')

Anonymous Function

pepperoni🍕

var popup = alert
popup('pepperoni🍕')

pepperoni🍕

var pa = pizzalert
pa('pepperoni')

pepperoni🍕

JavaScript functions can be saved in variables.

Functions that serve as arguments are callbacks.

var pizzalert = function (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('cheese')

cheese🍕

Argument

var pizzalert = function (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('vegan')

vegan🍕

pizzaType = 'vegan'
  alert('vegan' + '🍕')
var pizzalert = function (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('eggplant')

eggplant🍕

pizzaType = 'eggplant'
  alert('eggplant' + '🍕')
var pizzify = function (myString) {
  return '🍕' + myString + '🍕'
}
alert( pizzify('Ricardo') )

🍕Ricardo🍕

myString = 'Ricardo'
  return '🍕' + 'Ricardo' + '🍕'
alert( '🍕Ricardo🍕' )
var pizzify = function (myString) {
  return '🍕' + myString + '🍕'
}
alert( pizzify(9999) )

🍕9999🍕

myString = 9999
  return '🍕' + 9999 + '🍕'
alert( '🍕9999🍕' )
var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('France', alert);

🤺France🤺

myString = 'France'
  myFunc('🤺' + 'France' + '🤺')
myFunc = alert
  alert('🤺' + 'France' + '🤺')

Arguments

Callback!

var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('Russia', alert);

🤺Russia🤺

myString = 'Russia'
  myFunc('🤺' + 'Russia' + '🤺')
myFunc = alert
  alert('🤺' + 'Russia' + '🤺')

Callback!

var pizzalert = function (pizzaType) {
  alert(pizzaType + '🍕')
}
pizzalert('pepperoni')

pepperoni🍕

var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('Italy', pizzalert);

🤺Italy🤺🍕

myString = 'Italy'
  myFunc('🤺' + 'Italy' + '🤺')
myFunc = pizzalert
  pizzalert('🤺' + 'Italy' + '🤺')

Callback!

var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('Ukraine', function (newString) {
  alert( newString )
});

🤺Ukraine🤺

myString = 'Ukraine'
  myFunc('🤺' + 'Ukraine' + '🤺')

Callback!

  alert( '🤺Ukraine🤺' )
myFunc = function (newString) { ... }
var pizzify = function (myString) {
  return '🍕' + myString + '🍕'
}
alert( pizzify('vegetables') )

🍕vegetables🍕

var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('Hungary', function (newString) {
  alert( pizzify(newString) )
});

🍕🤺Hungary🤺🍕

myString = 'Hungary'
  myFunc('🤺' + 'Hungary' + '🤺')
myFunc = function (newString) { ... }
  alert( pizzify('🤺Hungary🤺') )

Callback!

vs.

pizzify
fencify
var pizzify = function (myString) {
  return '🍕' + myString + '🍕'
}
alert( pizzify('Wapuu') )

🍕Wapuu🍕

alert( '🍕Wapuu🍕' )

Returns

 the result

var fencify = function (myString, myFunc) {
  myFunc('🤺' + myString + '🤺')
}
fencify('Wapuu', function (newString) {
  alert( newString )
});

🤺Wapuu🤺

  alert( '🤺Wapuu🤺' )

Passes

 the result

fencify

Uses a callback.

JavaScript functions can be saved in variables.

Functions that serve as arguments are callbacks.

But why bother with callbacks?

When our code has to wait.

Example: operations

a, b & c.

a
b
c

Program Start

Done

(3 seconds)

1 second

1 second

1 second

If a took

4 seconds?

a
b
c

Program Start

Done

(6 seconds)

1 second

1 second

Blocking

4 seconds

(stuck waiting)

JavaScript wouldn't block.

start a

b
c

Program Start

Done

(4 seconds)

4 seconds

(in the background)

finish a

Not blocking

Async

Asynchronous:

Waiting happens in the background.

Slow Things: I/O

Network

Database

File system

Intensive processes

Events For Waiting

Page load

Timers

User interaction

Other?

For waiting, JavaScript is async by default.

Async things in JavaScript always use callbacks.

setTimeout(function () {
  console.log('A')
}, 4000)

console.log('B')
console.log('C')

 >

 

 

 

 

B

C

A   (after 4 seconds)

setTimeout(function () {
  console.log('A')
  console.log('B')
}, 4000)

console.log('C')

 >

 

 

 

 

C

A

B  (after 4 seconds)

setTimeout(function () {
  console.log('B')
}, 1000)

setTimeout(function () {
  console.log('C')
}, 1000)

console.log('A')

 >

 

 

 

 

A

B

C  (after 1 second)

setTimeout(function () {
  console.log('C')
}, 2000)

setTimeout(function () {
  console.log('B')
}, 1000)

console.log('A')

 >

 

 

 

 

A

B  (after 1 second)

C  (after 2 seconds)

var isClicked = false

$('button').click(function () {
  isClicked = true
})

console.log( isClicked )

 >

 

 

 

 

false

var isClicked = false

$('button').click(function () {
  isClicked = true

  console.log( isClicked )
})

 >

 

 

 

 

true

var myResult

$.get('http://coolapi.rest', function (myData) {
  myResult = myData
})

console.log(myResult)

 >

 

 

 

 

undefined

var myResult

$.get('http://coolapi.rest', function (myData) {
  myResult = myData
  console.log(myResult)
})

console.log(myResult)

 >

 

 

 

 

undefined

{...}  (when AJAX finishes)

var player

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE'
  })
}

player.playVideo()
TypeError: Cannot read property 'playVideo' of undefined 
var player

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE'
  })

  player.playVideo()
}

JavaScript functions can be saved in variables.

Functions that serve as arguments are callbacks.

For waiting, JavaScript is async by default.

Async things in JavaScript always use callbacks.

Nizar Khalife

Teacher at Ironhack.

 

Introducing...

http://nizaroni.pizza

bit.ly/pizzalert

Callbacks

By khalifenizar

Callbacks

  • 139
Loading comments...

More from khalifenizar