JavaScript pitfalls

2,172 views

Published on

  • Be the first to comment

JavaScript pitfalls

  1. 1. SOME JAVASCRIPT PITFALLS by Claudio Cicali (Sponsorpay) @mi.o / @aui galcm / cldo
  2. 2. DISCLAIMER The following examples are meant to run inside the global scopeIm also not a "always use the === test operator" kind of guy [1] [1] long time PHP developer
  3. 3. DECLARATIONS AND EXPRESSIONS/ Avral dcaain / aibe elrtovrA a ;/ A asgmn epeso (eiiin/iiilzto) / n sinet xrsin dfnto ntaiainA=0 ;/ Dcaainaddfnto / elrto n eiiinvrA=0 a ;
  4. 4. DONT TOUCH UNDECLARED VARIABLES/ Rfrneerr Ai ntdfnd(utfrtehrls ts) / eeec ro: s o eie js o h ames eti (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. 5. DONT TOUCH UNDECLARED VARIABLES/ T ts i avral i dcae,awy*uetetpo oeao / o et f aibe s elrd las s h yef prtri (tpo A= "neie"){ f yef = udfnd cnoelg"el"; osl.o(hlo)}/ *Uls yuaetsiga ojc poet / nes o r etn n bet rpryvrA a ;/ N err / o rosi (A= udfnd){ f = neie cnoelg A) / "neie" osl.o( ; / udfnd}
  6. 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. 7. VARIABLE HOISTING/ N err / o rosi ( ==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 sdvrA=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. 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 2fnto foa( { ucin obr) cnoelg A) / Cnyuges osl.o( ; / a o us? vrA=0 / Dcaainhitd NTteasgmn a ; / elrto ose, O h sinet}foa(; obr)
  9. 9. VARIABLE HOISTINGvrA=4; a 2fnto foa( { ucin obr) cnoelg A) / 4 osl.o( ; / 2 / vrA=0 / a ;}foa(; obr)
  10. 10. FUNCTION DECLARATIONS AND EXPRESSIONS/ Ti afnto dcaain( nm,n asgmn) / hs ucin elrto a ae o sinetfnto 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. 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. 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( cnoelgn; 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 Tofo) o(;
  13. 13. HIDDEN GLOBALSfnto 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. 14. HIDDEN GLOBALS/ Wl cet agoa P / il rae lblfr( i mOjc){ o P n ybet cnoelgP; osl.o()}/ Awy uevr / las s afr(a Pi mOjc){ o vr n ybet cnoelgP; osl.o()}
  15. 15. ARRAYS: DO NOT USE AS DICTIONARIES!vrA=[; a ]/ Teeaen "soitv ary" i JvSrp / hr r o ascaie ras, n aacitAe1]=10 / Tesm a Aky =10 [ky 0; / h ae s .e1 0;Ae2]=20 / Tesm a Aky =20 [ky 0; / h ae s .e2 0;cnoelgAlnt) / 0 sil0 osl.o(.egh; / , tl/ Uepanojcsised / s li bet ntavrA={; a }Ae1]=10 [ky 0;Ae2]=20 [ky 0;cnoelg Ojc.esA.egh) / 2(S) osl.o( betky()lnt ; / E5
  16. 16. ARRAYS: THEY ARE NOT SPARSEvrA=[; a ]A99 =4; [9] 7cnoelg Alnt ) / 10 (ih99udfndvle) osl.o( .egh ; / 00 wt 9 neie aus
  17. 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) aibeA=4; 9"s src" ue tit;/ Dpdpoete:ti wl nwtrwa err / ue rpris hs il o ho n rovrA={P:"o" P:"a" P:"o"} a 1 fo, 2 br, 1 zt ;
  18. 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. 19. USE USE STRICT"s src" ue tit;/ "ne fntos aentpritdral AYHR / Inr ucin" r o emte ely NWEEi (re { f tu) fnto inrobr){} / sna err ucin neFoa( / ytx ro}/ I ntsrc-oe yucudwieamntust lk / n o titmd, o ol rt osroiy iei (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 eutfnto otrobr){ ucin ueFoa( fnto inrobr){} / Silpritd ucin neFoa( / tl emte}
  20. 20. A NOTE OF WARNING ON USE STRICT Strict mode applies to the context it is usedScrict 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. 21. ( PARENTHESIS )/ Ltsgtteitgrpr o ti nme / e e h nee at f hs ubrvrA=31; a .4/ Teuulwy / h sa acnoelg Mt.lo(A)) osl.o( ahfor ;/ Sitl fse,cmrse bte / lghy atr opess etrcnoelg 0A) osl.o( | ;
  22. 22. ( PARENTHESIS )/ Wa I"icvrd,uigti tcnqe / ht dsoee" sn hs ehiuvrA=31; a .4vrB=31; a .4cnoelg 0A==0B) / tu?N,""(reih osl.o( | = | ; / re o 3 tu-s)/ M bgwsepotdb smtiglk / y u a xlie y oehn ievrA=31; a .4vrB=1.4 a 31;cnoelg 0A==0B) / fle N,"3,siltu-s osl.o( | = | ; / as? o 1" tl reih
  23. 23. ( PARENTHESIS ) What happened then? Operators precedence, of course.0A==0B/ i 0fle1.4 | = | / s |as|31/ We usr,ueprnhss / hn nue s aeteivrA=31; a .4vrB=1.4 a 31;cnoelg (|)==(|)) / fle Ys osl.o( 0A = 0B ; / as? e!
  24. 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. 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. 26. THANK YOUClaudio Cicali, @caludio on twitter Created with Reveal.js

×