Treating Javascriptophpobia

Slide 1

Slide 1 text

TREATING JAVASCRIPTOPHPOBIA

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

TREATMENT OVERVIEW 1. Scope 2. Functions 3. Closures 4. (IIFE) 5. Questions

Slide 6

Slide 6 text

SCOPE The scope of a name binding – an association of a name to an entity, such as a variable – is the part of a computer program where the binding is valid: where the name can be used to refer to the entity.

Slide 7

Slide 7 text

GLOBAL SCOPE $ f o o = " b a r " ; $ G L O B A L S [ " b a r " ] = " b a z " ; v a r _ d u m p ( $ f o o ) ; / / " b a r " v a r _ d u m p ( $ G L O B A L S [ ' f o o ' ] ) ; / / " b a r " v a r _ d u m p ( $ G L O B A L S [ ' b a r ' ] ) ; / / " b a z " v a r _ d u m p ( $ b a r ) ; / / " b a z "

Slide 8

Slide 8 text

LOCAL SCOPE f u n c t i o n f o o ( ) { $ a = ' a ' ; } v a r _ d u m p ( $ a ) ; / / n u l l f o o ( ) ; v a r _ d u m p ( $ a ) ; / / s t i l l n u l l

Slide 9

Slide 9 text

LOCAL SCOPE $ a = ' a ' ; f u n c t i o n b a r ( ) { v a r _ d u m p ( $ a ) ; / / n u l l } b a r ( ) ;

Slide 10

Slide 10 text

LOCAL SCOPE $ a = ' a ' ; f u n c t i o n b a r ( ) { g l o b a l $ a ; v a r _ d u m p ( $ a ) ; / / " a " $ a = ' b b b b ' ; } b a r ( ) ; v a r _ d u m p ( $ a ) ; / / " b b b b "

Slide 11

Slide 11 text

SUPERGLOBALS v a r _ d u m p ( $ _ S E R V E R ) ; / / S e r v e r & e x e c u t i o n e n v i n f o r m a t i o n v a r _ d u m p ( $ _ G E T ) ; / / H T T P G E T v a r i a b l e s v a r _ d u m p ( $ _ P O S T ) ; / / H T T P P O S T v a r i a b l e s v a r _ d u m p ( $ _ C O O K I E ) ; / / H T T P c o o k i e s v a r _ d u m p ( $ _ R E Q U E S T ) ; / / _ G E T + _ P O S T + _ C O O K I E v a r _ d u m p ( $ _ F I L E S ) ; / / H T T P F i l e U p l o a d v a r i a b l e s v a r _ d u m p ( $ _ S E S S I O N ) ; / / S e s s i o n i n f o r m a t i o n v a r _ d u m p ( $ _ E N V ) ; / / E n v i r o n m e n t v a r i a b l e s v a r _ d u m p ( $ G L O B A L S ) ;

Slide 12

Slide 12 text

BLOCK SCOPE $ a = ' a a ' ; i f ( t r u e ) { v a r _ d u m p ( $ a ) ; / / " a a " $ b = ' b b ' ; } v a r _ d u m p ( $ b ) ; / / " b b " d o { v a r _ d u m p ( $ a ) ; / / " a a " v a r _ d u m p ( $ b ) ; / / " b b " $ d = ' d d ' ; b r e a k ; } w h i l e ( t r u e ) ; v a r _ d u m p ( $ d ) ; / / " d d " There is no "block" scope

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

GLOBAL SCOPE c o n s o l e . l o g ( t h i s = = = w i n d o w ) ; / / t r u e / / i n n o d e j s : c o n s o l e . l o g ( t h i s = = = g l o b a l ) ; / / t r u e v a r p h p = " a w e s o m e " ; / / P r e f e r r e d ! p h p = " a w e s o m e " ; t h i s . p h p = " a w e s o m e " ; w i n d o w . p h p = " a w e s o m e " ;

Slide 15

Slide 15 text

LOCAL SCOPE f u n c t i o n f o o ( ) { v a r a = " a " ; } c o n s o l e . l o g ( a ) ; / / R e f e r e n c e E r r o r f o o ( ) ; c o n s o l e . l o g ( a ) ; / / R e f e r e n c e E r r o r

Slide 16

Slide 16 text

LOCAL SCOPE v a r a = " a " ; f u n c t i o n b a r ( ) { c o n s o l e . l o g ( a ) ; / / " a " } b a r ( ) ;

Slide 17

Slide 17 text

LOCAL SCOPE v a r a = " a " ; f u n c t i o n f o o ( ) { v a r b = " b " ; f u n c t i o n b a r ( ) { c o n s o l e . l o g ( a ) ; c o n s o l e . l o g ( b ) ; v a r c = " c " ; } c o n s o l e . l o g ( c ) ; / / R e f e r e n c e E r r o r r e t u r n b a r ( ) ; } c o n s o l e . l o g ( b ) ; / / R e f e r e n c e E r r o r c o n s o l e . l o g ( c ) ; / / R e f e r e n c e E r r o r f o o ( ) ;

Slide 18

Slide 18 text

SUPERGLOBALS? No need for it; bindings always "trickle" down to a lower scope level.

Slide 19

Slide 19 text

BLOCK SCOPE v a r a = ' a a ' ; i f ( t r u e ) { c o n s o l e . l o g ( a ) ; / / " a a " v a r b = ' b b ' ; } c o n s o l e . l o g ( b ) ; / / " b b " d o { c o n s o l e . l o g ( a ) ; / / " a a " c o n s o l e . l o g ( b ) ; / / " b b " v a r c = ' c c ' ; b r e a k ; } w h i l e ( t r u e ) ; c o n s o l e . l o g ( c ) ; / / " c c " There is no block scope... yet! (ECMAScript >= 6)

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

SCOPE IN A NUTSHELL PHP JS Global scope script window Local scope function function Block scope no ES >=6 Bubbles separate parent-child Access g l o b a l local -> local parent -> child local -> local

Slide 22

Slide 22 text

PRIORITY v a r a = " a " ; f u n c t i o n f o o ( ) { v a r a = " b " ; f u n c t i o n b a r ( ) { c o n s o l e . l o g ( a ) ; / / " b " c o n s o l e . l o g ( w i n d o w . a ) ; / / " a " } r e t u r n b a r ( ) ; } f o o ( ) ; Local > Global

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

HOISTING - VARIABLES $ a = " a " ; v a r _ d u m p ( $ a ) ; / / " a " v a r _ d u m p ( $ b ) ; / / n u l l v a r _ d u m p ( i s s e t ( $ b ) ) ; / / f a l s e $ b = " b " ;

Slide 25

Slide 25 text

HOISTING - VARIABLES v a r f o o = " b a r " ; c o n s o l e . l o g ( f o o ) ; / / " b a r " c o n s o l e . l o g ( j s ) ; / / u n d e f i n e d v a r j s = " a w e s o m e " ; c o n s o l e . l o g ( p h p ) ; / / R e f e r e n c e E r r o r

Slide 26

Slide 26 text

HOISTING - FUNCTIONS f u n c t i o n f o o ( ) { e c h o ' F o o i s e x e c u t e d ' ; } f o o ( ) ; / / " F o o i s e x e c u t e d " b a r ( ) ; / / " B a r i s e x e c u t e d " f u n c t i o n b a r ( ) { e c h o ' B a r i s e x e c u t e d ' ; } Functions need not be defined before they are referenced, except when a function is conditionally defined

Slide 27

Slide 27 text

HOISTING - FUNCTIONS m y F u n c t i o n ( ) ; / / " I a m c a l l e d " f u n c t i o n m y F u n c t i o n ( ) { c o n s o l e . l o g ( " I a m c a l l e d " ) ; }

Slide 28

Slide 28 text

WHAT IS HOISTING? c o n s o l e . l o g ( j s ) ; v a r j s = " a w e s o m e " ; / / r e - w r i t t e n : v a r j s ; c o n s o l e . l o g ( j s ) ; j s = " a w e s o m e " ;

Slide 29

Slide 29 text

TL;DR - SCOPE 1. Global scope (window / global) 2. Local scope (function) 3. Priority (Local > Global) 4. Hoisting (declaration <> assignment)

Slide 30

Slide 30 text

TREATMENT OVERVIEW 1. Scope 2. Functions 3. Closures 4. (IIFE) 5. Questions

Slide 31

Slide 31 text

FUNCTIONS A sequence of program instructions that perform a specific task, packaged as a unit.

Slide 32

Slide 32 text

DECLARATION (1) / / f u n c t i o n l i t e r a l d e c l a r a t i o n f u n c t i o n f o o ( / * o p t i o n a l p a r a m e t e r s * / ) { / * f u n c t i o n b o d y * / r e t u r n t r u e ; / / o p t i o n a l r e t u r n s t a t e m e n t } c o n s o l e . l o g ( f o o ( ) ) ; / / t r u e c o n s o l e . l o g ( w i n d o w . f o o ( ) ) ; / / t r u e c o n s o l e . l o g ( f o o . n a m e ) ; / / " f o o " Function literal

Slide 33

Slide 33 text

DECLARATION (2) / / f u n c t i o n e x p r e s s i o n v a r b a r = f u n c t i o n ( / * o p t i o n a l p a r a m e t e r s * / ) { r e t u r n t r u e ; } ; c o n s o l e . l o g ( b a r ( ) ) ; / / t r u e c o n s o l e . l o g ( b a r . n a m e ) ; / / < e m p t y s t r i n g > Function expression (or "Inline function") (or "Anonymous function") (not a closure)

Slide 34

Slide 34 text

DECLARATION (3) / / i n l i n e n a m e d f u n c t i o n v a r b a z = f u n c t i o n s c o o b y d o o ( ) { r e t u r n t r u e ; } ; c o n s o l e . l o g ( b a z ( ) ) ; / / t r u e c o n s o l e . l o g ( b a z . n a m e ) ; / / " s c o o b y d o o " c o n s o l e . l o g ( s c o o b y d o o ( ) ) ; / / R e f e r e n c e E r r o r Inline named function (also not a closure)

Slide 35

Slide 35 text

DECLARATION - PHP / / f u n c t i o n l i t e r a l d e c l a r a t i o n f u n c t i o n f o o ( ) { r e t u r n t r u e ; } v a r _ d u m p ( f o o ( ) ) ; / / t r u e Function literal

Slide 36

Slide 36 text

DECLARATION - PHP / / a n o n y m o u s f u n c t i o n $ b a r = f u n c t i o n ( ) { r e t u r n t r u e ; } ; v a r _ d u m p ( $ b a r ( ) ) ; / / t r u e v a r _ d u m p ( g e t t y p e ( $ b a r ) ) ; / / o b j e c t v a r _ d u m p ( g e t _ c l a s s ( $ b a r ) ) ; / / " C l o s u r e " Function expression (not *really* a closure)

Slide 37

Slide 37 text

DECLARATION - PHP / / i n l i n e n a m e d f u n c t i o n ? $ b a z = f u n c t i o n b a z i n g a ( ) { / / S y n t a x e r r o r r e t u r n t r u e ; } ; v a r _ d u m p ( $ b a z ( ) ) ;

Slide 38

Slide 38 text

INVOCATION (1) / / f u n c t i o n i n v o c a t i o n f u n c t i o n f o o ( ) { c o n s o l e . l o g ( t h i s = = = w i n d o w ) ; / / t r u e } f o o ( ) ; Function invocation

Slide 39

Slide 39 text

INVOCATION (2) / / m e t h o d i n v o c a t i o n v a r b a r = { a f t e r S u b m i t : f u n c t i o n ( ) { c o n s o l e . l o g ( t h i s = = = b a r ) ; / / t r u e } } ; b a r . a f t e r S u b m i t ( ) ; Method invocation

Slide 40

Slide 40 text

INVOCATION (3) / / c o n s t r u c t o r i n v o c a t i o n f u n c t i o n C a r ( b r a n d ) { t h i s . m a k e = b r a n d ; c o n s o l e . l o g ( t h i s ) ; } v a r b m w = n e w C a r ( ' b m w ' ) ; / / C a r { m a k e = " b m w " } v a r f o r d = n e w C a r ( ' f o r d ' ) ; / / C a r { m a k e = " f o r d " } Constructor invocation

Slide 41

Slide 41 text

INVOCATION (4) / / c a l l / a p p l y i n v o c a t i o n ( 1 ) v a r a i r p l a n e = { f l y : f u n c t i o n ( ) { c o n s o l e . l o g ( t h i s ) ; } } ; v a r f i g h t e r P l a n e = { t y p e : ' f i g h t e r ' } ; a i r p l a n e . f l y ( ) ; / / O b j e c t { f l y = f u n c t i o n ( ) } a i r p l a n e . f l y . c a l l ( f i g h t e r P l a n e ) ; / / O b j e c t { t y p e = " f i g h t e r " } Call / Apply invocation

Slide 42

Slide 42 text

INVOCATION - PHP f u n c t i o n s u m ( $ a , $ b ) { r e t u r n $ a + $ b ; } v a r _ d u m p ( s u m ( 1 , 2 ) ) ; / / 3 v a r _ d u m p ( c a l l _ u s e r _ f u n c ( ' s u m ' , 1 , 2 ) ) ; / / 3 ~ c a l l v a r _ d u m p ( c a l l _ u s e r _ f u n c _ a r r a y ( ' s u m ' , [ 1 , 2 ] ) ) ; / / 3 ~ a p p l y

Slide 43

Slide 43 text

INVOCATION - PHP / / s e t c o n t e x t $ f o o = f u n c t i o n ( ) { r e t u r n $ t h i s - > a + $ t h i s - > b ; } ; $ d a t a = n e w \ S t d C l a s s ( ) ; $ d a t a - > a = 1 ; $ d a t a - > b = 2 ; $ n e w F o o = C l o s u r e : : b i n d ( $ f o o , $ d a t a ) ; v a r _ d u m p ( $ n e w F o o ( ) ) ; / / 3 $ n e w e r F o o = $ f o o - > b i n d T o ( $ d a t a ) ; v a r _ d u m p ( $ n e w e r F o o ( ) ) ; / / 3

Slide 44

Slide 44 text

NAMED FUNCTIONS / / n ! = n + ( n - 1 ) ! v a r f a c t o r i a l = f u n c t i o n ( x ) { r e t u r n ( x = = = 1 ) ? 1 : f a c t o r i a l ( x - 1 ) + x ; } ; c o n s o l e . l o g ( f a c t o r i a l ( 4 ) ) ; / / 1 0 ( = 4 + 3 + 2 + 1 )

Slide 45

Slide 45 text

NAMED FUNCTIONS / / c o p y r e f e r e n c e t o a n o n y m o u s f u n c t i o n , / / a n d d e s t r o y t h e o r i g i n a l r e f e r e n c e t o i t v a r a l s o F a c t o r i a l = f a c t o r i a l ; f a c t o r i a l = n u l l ; c o n s o l e . l o g ( a l s o F a c t o r i a l ( 4 ) ) ; / / T y p e E r r o r !

Slide 46

Slide 46 text

NAMED FUNCTIONS / / b e t t e r s o l u t i o n : v a r m y F a c = f u n c t i o n f a c ( x ) { r e t u r n ( x = = = 1 ) ? 1 : f a c ( x - 1 ) + x ; } ; c o n s o l e . l o g ( m y F a c ( 4 ) ) ; / / 1 0 v a r a l s o M y F a c = m y F a c ; m y F a c = n u l l ; c o n s o l e . l o g ( a l s o M y F a c ( 4 ) ) ; / / 1 0

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

OVERLOADING / / P r e m i s e f u n c t i o n s u m ( a , b ) { r e t u r n a + b ; } c o n s o l e . l o g ( s u m ( 1 , 2 ) ) ; / / 3 c o n s o l e . l o g ( s u m ( 4 , 6 , 7 ) ) ; / / 1 0 ( w h a t h a p p e n e d t o 7 ? )

Slide 49

Slide 49 text

OVERLOADING / / S o l u t i o n f u n c t i o n s u m 2 ( ) { / / n o n a m e d a r g u m e n t s n e e d e d a n y m o r e v a r r e s u l t = 0 ; f o r ( v a r i = 0 ; i < a r g u m e n t s . l e n g t h ; i + + ) { r e s u l t + = a r g u m e n t s [ i ] ; } r e t u r n r e s u l t ; } ; c o n s o l e . l o g ( s u m 2 ( 4 , 6 , 7 ) ) ; / / 1 7 c o n s o l e . l o g ( s u m 2 ( 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ) ) ; / / 4 5

Slide 50

Slide 50 text

TL;DR - FUNCTIONS 1. 3 ways of declaring a function 2. 4 ways of invoking a function 3. Named functions (recursion) 4. Overloading

Slide 51

Slide 51 text

TREATMENT OVERVIEW 1. Scope 2. Functions 3. Closures 4. (IIFE) 5. Questions

Slide 52

Slide 52 text

CLOSURES

Slide 53

Slide 53 text

CLOSURES A closure is a function or reference to a function together with a referencing environment A closure enables a function to access non-local variables even when invoked outside its immediate lexical scope.

Slide 54

Slide 54 text

EXAMPLE (1) v a r f o o = ' f o o ' ; f u n c t i o n c l i c k ( ) { c o n s o l e . l o g ( f o o ) ; } c l i c k ( ) ; / / " f o o "

Slide 55

Slide 55 text

EXAMPLE (2) v a r e x e c u t e L a t e r ; f u n c t i o n b a r ( ) { v a r m i c k e y = ' m o u s e ' ; e x e c u t e L a t e r = f u n c t i o n ( ) { c o n s o l e . l o g ( m i c k e y ) ; } } c o n s o l e . l o g ( t y p e o f e x e c u t e L a t e r ) ; / / u n d e f i n e d b a r ( ) ; c o n s o l e . l o g ( t y p e o f e x e c u t e L a t e r ) ; / / f u n c t i o n e x e c u t e L a t e r ( ) ; / / " m o u s e "

Slide 56

Slide 56 text

EXAMPLE (PHP) $ a m o u n t = 0 ; $ c l i c k = f u n c t i o n ( ) u s e ( & $ a m o u n t ) { $ a m o u n t + + ; } ; v a r _ d u m p ( $ a m o u n t ) ; / / 0 $ c l i c k ( ) ; v a r _ d u m p ( $ a m o u n t ) ; / / 1

Slide 57

Slide 57 text

USAGE: PRIVATE VARIABLES f u n c t i o n S o l d i e r ( ) { v a r r a n k ; t h i s . s e t R a n k = f u n c t i o n ( n a m e ) { r a n k = n a m e ; } ; t h i s . g e t R a n k = f u n c t i o n ( ) { r e t u r n r a n k ; } ; } v a r c o r p o r a l = n e w S o l d i e r ( ) ; c o r p o r a l . s e t R a n k ( ' c o r p o r a l ' ) ; c o n s o l e . l o g ( c o r p o r a l . r a n k ) ; / / u n d e f i n e d c o n s o l e . l o g ( c o r p o r a l . g e t R a n k ( ) ) ; / / " c o r p o r a l "

Slide 58

Slide 58 text

TL;DR - CLOSURES 1. Examples 2. Usage: Private variables

Slide 59

Slide 59 text

TREATMENT OVERVIEW 1. Scope 2. Functions 3. Closures 4. (IIFE) 5. Questions

Slide 60

Slide 60 text

IMMEDIATE FUNCTIONS IIFE - Immediately-Invoked Function Expressions

Slide 61

Slide 61 text

DEFINITION ( f u n c t i o n ( ) { } ) ( ) ;

Slide 62

Slide 62 text

DEFINITION / / C a l l o p e r a t o r : ( ) ( / * . . . * / ) ( ) ;

Slide 63

Slide 63 text

DEFINITION ( f u n c t i o n ( ) { v a r f o o = ' f o o ' ; } ) ( ) ; c o n s o l e . l o g ( f o o ) ; / / R e f e r e n c e E r r o r Temporary scope with private variables

Slide 64

Slide 64 text

USAGE ( f u n c t i o n ( $ ) { $ ( ' a ' ) . b i n d ( ' c l i c k ' , f u n c t i o n ( ) { a l e r t ( ' I w a s c l i c k e d ' ) ; } ) ; } ) ( j Q u e r y ) ; Aliasing variables

Slide 65

Slide 65 text

USAGE / / P r e m i s e : k e e p t r a c k o f # r u n s v a r r u n s = 0 ; v a r t i m e r = s e t I n t e r v a l ( f u n c t i o n ( ) { r u n s + + ; c o n s o l e . l o g ( r u n s ) ; i f ( r u n s > = 1 0 ) { c l e a r I n t e r v a l ( t i m e r ) ; } } , 5 0 0 ) ; Tidy global scope

Slide 66

Slide 66 text

USAGE / / B e t t e r w a y o f k e e p i n g t r a c k : v a r t i m e r = s e t I n t e r v a l ( ( f u n c t i o n ( ) { v a r r u n s = 0 ; r e t u r n f u n c t i o n ( ) { r u n s + + ; c o n s o l e . l o g ( r u n s ) ; i f ( r u n s > = 1 0 ) { c l e a r I n t e r v a l ( t i m e r ) ; } } ; } ) ( ) , 5 0 0 ) ; Clean global scope

Slide 67

Slide 67 text

TL;DR - IIFE'S 1. Temporary Scope 2. Private variables 3. Usage: Structuring code (aliasing) 4. Usage: Tidy Scope

Slide 68

Slide 68 text

QUESTIONS?

Slide 69

Slide 69 text

BOOKS https://github.com/getify/You-Dont-Know-JS

Slide 70

Slide 70 text

MOAR BOOKS

Slide 71

Slide 71 text

JOIND.IN/13118

Slide 72

Slide 72 text

TOM VAN HERREWEGHE - @miljar miljar.github.io

Slide 73

Slide 73 text

training.king-foo.be

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

CREDITS - IMAGES 1. Sleeping kid - https://flic.kr/p/5PcP7r 2. Ju-jitsu feet - Jachim Coudenys 3. Wolf spider - https://flic.kr/p/6hULjn 4. Javascript screen - https://flic.kr/p/5Y1z6v 5. Lobotomy - Wikimedia Commons 6. Bubbles 1 - https://flic.kr/p/4Ljnww 7. Cranes over Dubai - https://flic.kr/p/rFgym 8. Overloading - https://flic.kr/p/xEwLt 9. Currying - https://flic.kr/p/9ZGhy6 10. YDKJS books - O'Reilly 11. Secrets of the Javascript Ninja - Amazon.com

Slide 76

Slide 76 text

CREDITS - REVIEWERS Gerry Vandermaesen Jani Hartikainen