1. SOME JAVASCRIPT
PITFALLS
by Claudio Cicali (Sponsorpay)
@mi.o / @aui
galcm / cldo

2. DISCLAIMER
The following examples are meant to run
inside the global scope
I'm also not a "always use the === test operator" kind of guy [1]
[1] long time PHP developer

3. DECLARATIONS AND EXPRESSIONS
/ Avral dcaain
/ aibe elrto
vrA
a ;
/ A asgmn epeso (eiiin/iiilzto)
/ n sinet xrsin dfnto ntaiain
A=0 ;
/ Dcaainaddfnto
/ elrto n eiiin
vrA=0
a ;

4. DON'T TOUCH UNDECLARED VARIABLES
/ Rfrneerr Ai ntdfnd(utfrtehrls ts)
/ eeec ro: s o eie js o h ames et
i (A= udfnd){
f = neie
cnoelg"el";
osl.o(Hlo)
}
/ Ti wl fi a wl (eycmo msae)
/ hs il al s el vr omn itk!
i (! ){
f A
cnoelg"el";
osl.o(Hlo)
}

5. DON'T TOUCH UNDECLARED VARIABLES
/ T ts i avral i dcae,awy*uetetpo oeao
/ o et f aibe s elrd las s h yef prtr
i (tpo A= "neie"){
f yef = udfnd
cnoelg"el";
osl.o(hlo)
}
/ *Uls yuaetsiga ojc poet
/ nes o r etn n bet rpry
vrA
a ;
/ N err
/ o ros
i (A= udfnd){
f = neie
cnoelg A) / "neie"
osl.o( ; / udfnd
}

6. UNDEFINED PROPERTIES
vrmOj={
a yb
};
/ N err (ecnsi tetpo ts)
/ o ros w a kp h yef et
i (mOjA= udfnd){
f yb. = neie
cnoelg tpo mOjA) / udfnd
osl.o( yef yb. ; / neie
}
any object property is declared within the object itself

7. VARIABLE HOISTING
/ N err
/ o ros
i ( ==0 {
f A = )
cnoelg"aeaCk";
osl.o(Hv oe)
}
/ I tesm soe vralscnb dcae *fe*bigue
/ n h ae cp, aibe a e elrd atr en sd
vrA=0
a ;
/ Tedcaaini "ose"a tevr tpo tesoe
/ h elrto s hitd t h ey o f h cp
+- vrA
-> a ;
|
| / Tets fisnntees
/ h et al oehls
| i ( ==0 {
f A = )
| cnoelg"aeaCk";
osl.o(Hv oe)
| }
|
| / Tedfnto i NThitd(hs n Ck fru)
/ h eiiin s O ose tu, o oe o s
+- A=0
-- ;

8. VARIABLE HOISTING
/ Err(elrto oto soe n "osig)
/ ro dcaain u f cp, o hitn"
i (){
f A
cnoelg"el";
osl.o(hlo)
}
fnto foa( {
ucin obr)
vrA=0
a ;
}
vrA=4;
a 2
fnto foa( {
ucin obr)
cnoelg A) / Cnyuges
osl.o( ; / a o us?
vrA=0 / Dcaainhitd NTteasgmn
a ; / elrto ose, O h sinet
}
foa(;
obr)

9. VARIABLE HOISTING
vrA=4;
a 2
fnto foa( {
ucin obr)
cnoelg A) / 4
osl.o( ; / 2
/ vrA=0
/ a ;
}
foa(;
obr)

10. FUNCTION DECLARATIONS AND
EXPRESSIONS
/ Ti afnto dcaain( nm,n asgmn)
/ hs ucin elrto a ae o sinet
fnto FOA( {
ucin OBR)
}
/ Ti i afnto epeso (sinet
/ hs s ucin xrsin asgmn)
vrFOA =fnto( {
a OBR ucin)
};
/ Ti i silafnto epeso ( "ae"oe
/ hs s tl ucin xrsin a nmd n)
vrFOA =fnto smtig){
a OBR ucin oehn(
/ Te"oehn"smo cnb ue ol i ti soe
/ h smtig ybl a e sd ny n hs cp
};

11. FUNCTION DECLARATIONS AND
EXPRESSIONS
(ucinsmtig){
fnto oehn(
/ Rcrinwtotuigagmnscle (erctd
/ euso ihu sn ruet.ale dpeae)
smtig)
oehn(;
}(;
))
/ Ti i wog(ytxerr
/ hs s rn sna ro)
fnto( {;
ucin) }
/ Bttoeae-aan-vldepesos
/ u hs r gi ai xrsin
-ucin){;
fnto( }
+ucin){;
fnto( }
!ucin){;
fnto( }
0fnto( {;
,ucin) }
(ucin){)
fnto( };

12. FUNCTION DECLARATION HOISTING
/ Aalbe(elrto hsbe hitd
/ vial dcaain a en ose)
fo) / "n"
o(; / Oe
/ Fnto dcaain(/ ti w' gta err
/ ucin elrto wo hs ed e n ro)
fnto fo){
ucin o(
cnoelg'n';
osl.o(Oe)
}
/ Fnto epeso (vlae a rntm,nthitd
/ ucin xrsin eautd t u-ie o ose)
vrfo=fnto( {
a o ucin)
cnoelg"w";
osl.o(To)
}
/ Wl lg"w"
/ il o To
fo)
o(;

13. HIDDEN GLOBALS
fnto slyprto( {
ucin ilOeain)
vrA=B=0
a ;
/ Wl b pre a flos
/ il e asd s olw
vrA
a ;
A=0;
B=0;
/ tu cetn agoa vral B
/ hs raig lbl aibe
}

14. HIDDEN GLOBALS
/ Wl cet agoa P
/ il rae lbl
fr( i mOjc){
o P n ybet
cnoelgP;
osl.o()
}
/ Awy uevr
/ las s a
fr(a Pi mOjc){
o vr n ybet
cnoelgP;
osl.o()
}

15. ARRAYS: DO NOT USE AS DICTIONARIES!
vrA=[;
a ]
/ Teeaen "soitv ary" i JvSrp
/ hr r o ascaie ras, n aacit
A'e1]=10 / Tesm a Aky =10
[ky' 0; / h ae s .e1 0;
A'e2]=20 / Tesm a Aky =20
[ky' 0; / h ae s .e2 0;
cnoelgAlnt) / 0 sil0
osl.o(.egh; / , tl
/ Uepanojcsised
/ s li bet nta
vrA={;
a }
A'e1]=10
[ky' 0;
A'e2]=20
[ky' 0;
cnoelg Ojc.esA.egh) / 2(S)
osl.o( betky()lnt ; / E5

16. ARRAYS: THEY ARE NOT SPARSE
vrA=[;
a ]
A99 =4;
[9] 7
cnoelg Alnt ) / 10 (ih99udfndvle)
osl.o( .egh ; / 00 wt 9 neie aus

17. USE USE STRICT
/ Sic o "titmd"wt js a hrls srn
/ wth n src oe ih ut n ames tig
"s src"
ue tit;
/ Ti,nwilgl asgmn o a udfndvral wl
/ hs o lea, sinet f n neie aibe il
/ trwa errisedo ipiieydcaiga(lbl vral
/ ho n ro nta f mlctl elrn goa) aib
e
A=4;
9
"s src"
ue tit;
/ Dpdpoete:ti wl nwtrwa err
/ ue rpris hs il o ho n ro
vrA={P:"o" P:"a" P:"o"}
a 1 fo, 2 br, 1 zt ;

18. USE USE STRICT
"s src"
ue tit;
/ "ih de nteitayoe(ytxerr
/ wt" os o xs nmr sna ro)
wt (bet {
ih ojc)
}
"s src"
ue tit;
fnto foa( {
ucin obr)
cnoelg ti ) / udfnd
osl.o( hs ; / neie
}

19. USE USE STRICT
"s src"
ue tit;
/ "ne fntos aentpritdral AYHR
/ Inr ucin" r o emte ely NWEE
i (re {
f tu)
fnto inrobr){} / sna err
ucin neFoa( / ytx ro
}
/ I ntsrc-oe yucudwieamntust lk
/ n o titmd, o ol rt osroiy ie
i (re {
f tu)
fnto inrobr){cnoelg1;}
ucin neFoa( osl.o()
}es {
le
fnto inrobr){cnoelg2;}
ucin neFoa( osl.o()
}
inrobr) / Cnyugestersl?
neFoa(; / a o us h eut
fnto otrobr){
ucin ueFoa(
fnto inrobr){} / Silpritd
ucin neFoa( / tl emte
}

20. A NOTE OF WARNING ON USE STRICT
Strict mode applies to the context it is used
Scrict mode changes semantics: be sure to apply it only on
code you control
<cit
srp>
/ goa cnet
/ lbl otx
"s src"
ue tit;
..
.
<srp>
/cit
<citsc"eaylbj"<srp>
srp r=lgc_i.s>/cit
/ Nwtecd isd lgc_i wl rni src md.
/ o h oe nie eaylb il u n tit oe
/ Dntd ta.
/ o' o ht

21. ( PARENTHESIS )
/ Ltsgtteitgrpr o ti nme
/ e' e h nee at f hs ubr
vrA=31;
a .4
/ Teuulwy
/ h sa a
cnoelg Mt.lo(A))
osl.o( ahfor ;
/ Sitl fse,cmrse bte
/ lghy atr opess etr
cnoelg 0A)
osl.o( | ;

22. ( PARENTHESIS )
/ Wa I"icvrd,uigti tcnqe
/ ht dsoee" sn hs ehiu
vrA=31;
a .4
vrB=31;
a .4
cnoelg 0A==0B) / tu?N,""(reih
osl.o( | = | ; / re o 3 tu-s)
/ M bgwsepotdb smtiglk
/ y u a xlie y oehn ie
vrA=31;
a .4
vrB=1.4
a 31;
cnoelg 0A==0B) / fle N,"3,siltu-s
osl.o( | = | ; / as? o 1" tl reih

23. ( PARENTHESIS )
What happened then?
Operators precedence, of course.
0A==0B/ i 0fle1.4
| = | / s |as|31
/ We usr,ueprnhss
/ hn nue s aetei
vrA=31;
a .4
vrB=1.4
a 31;
cnoelg (|)==(|)) / fle Ys
osl.o( 0A = 0B ; / as? e!

24. IIFE ARE LOVELY. USE THEM.
Immediately-Invoked Function Expression ("iffy")
;fnto(,$ udfnd {
(ucinw , neie)
/ Ti i yu cutad hr yucnpa sf adsud
/ hs s or oryr: ee o a ly ae n on
/ Bte cmrsin
/ etr opeso
/ Sihl fse we acsiggoa ojcs(hc aelcl
/ lgty atr hn cesn lbl bet wih r oa)
/ Ntee oesnl goa smo dcae
/ o vn n ige lbl ybl elrd
"s src" / Src md fryu cd ol
ue tit; / tit oe o or oe ny
}(idw jur)
)wno, Qey;

25. IIFE ARE LOVELY. USE THEM.
More than one style
/ Du Cokodrcmed ti oe
/ og rcfr eomns hs n
(fnto( {}))
ucin) ( ;
/ Ti oewl wr a wl
/ hs n il ok s el
(fnto( { ))
ucin) } (;
Technically, we need to coerce the function to be an
expression, not a declaration
Other "formats" exist, but you better
stick with those for convention sake.

26. THANK YOU
Claudio Cicali, @caludio on twitter
Created with Reveal.js