JavaScript pitfalls

SOME JAVASCRIPT
PITFALLS
by Claudio Cicali (Sponsorpay)

@mi.o / @aui
galcm / cldo

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

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 ;

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)
}

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
}

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

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
-- ;

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)

VARIABLE HOISTING
vrA=4;
a 2

fnto foa( {
ucin obr)

cnoelg A) / 4
osl.o( ; / 2

/ vrA=0
/ a ;
}

foa(;
obr)

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
};

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( };

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(;

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

}

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()
}

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

ARRAYS: THEY ARE NOT SPARSE
vrA=[;
a ]

A99 =4;
[9] 7

cnoelg Alnt ) / 10 (ih99udfndvle)
osl.o( .egh ; / 00 wt 9 neie aus

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 ;

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
}

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
}

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

( 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( | ;

( 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

( 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!

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;

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.

THANK YOU
Claudio Cicali, @caludio on twitter

Created with Reveal.js

JavaScript pitfalls

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to JavaScript pitfalls (20)

JavaScript pitfalls