JavaScript Common Mis JavaScript Common Mistakes & Best Practicestakes & Best Practices

7/18/2019 JavaScript Common Mis JavaScript Common Mistakes & Best Practicestakes & Best Practices

http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 1/17

Common Errors & Best Practices in Javascript

Created By: Rohit Verma



Page 2 © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Common Errors " #est $ractices

% Make things configurable

&l'a!s tr! to ma(e things configra)le managed from some *ro*ert! file +Li(e in ,alidations andmessages-.

// Bad Practice

If +email&ddressLength / 20-alert+Email &ddress is in,alid-4

// ood Practice

55 In Constants 67 8ile 9&;E9&IL;&<<RE77 = 20

If +email&ddressLength / 9&;E9&IL;&<<RE77-55<is*la! Error 9essage

4In case ma> length of email address is changed at some later re?irement then change 'ill )e done onl! at one *lace in Constants 67



Page ! © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% "o not add any Java#cript in the $tml/Jsp files but add the Javascript code in a sepa

rate Js file and add the reference of the J# file in the $tml/Jsp%

% Java#cript references location in Jsp/$tml

The 6a,a7cri*t references shold not )e added on the to* of @T9L as 'hile *arsing the @T9L*age if an! 6a,a7cri*t reference occrs some'here in @T9L then it loads the 6a,a7cri*t first then contines loading the rest of the @T9L 'hich cases dela! in loading the *age.

// Bad Practice 'dding the J# references on the top part of $(M)

Ahtml/Ahead/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t1.sB/A5scri*t/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t2.sB/A5scri*t/

A5head/A)od!/A5)od!/A5html/



Page * © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

//ood Practice +,- 'dd J# reference .ust before the closing of body tag

Ahtml/

Ahead/A5head/A)od!/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t1.sB A5scri*t/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t2.sB/A5scri*t/A5)od!/

A5html/

//ood Practice +2- using async loads the Java#cript asynchronously ithout causing any delay in

loading the $(M) page

Ahtml/Ahead/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t1.sB async/A5scri*t/

Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t2.sB async/A5scri*t/A5head/A)od!/A5)od!/A5html/




Contined..

//ood Practice +!- 1sing defer orks same as adding the references at the end of the $(M) the J

ava#cript is loaded at the end after all the $(M) "3M has been parsed

Ahtml/Ahead/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t1.sB defer /A5scri*t/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t2.sB defer /A5scri*t/A5head/A)od!/A5)od!/A5html/

4ote : Dsing as!nc and defer are s**orted )! almost all crrent ,ersions of the )ro'sers ho'e,er a ,er!fe' )ro'ser ,ersions do not s**ort them so the! shold )e sed accordingl!.




Contined..

% "o not add multiple validations code in a single Java#cript function but us

e utilities%

// Bad Practice

fnction chec(Validations+-if+email&ddressLength/20-

55<is*la! error

4if+tele*honeNm)erLength/10-55<is*la! error

4if+tele*honeNm)er= -

55<is*la! error

44


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 7/17Page 6 © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

// ood Practice

fnction chec(Validations +-if+email&ddressValidation+--

55<is*la! error and retrn4if+chec(Tel*honeNmValidation+--

55<is*la! error and retrn

44

% Compatibility 7ie 8ssues

&l'a!s add the com*ati)ilit! meta tags in 6s* if a**lication 'or(s on Internet E>*lorer to dis*la!the ,ie' in the latest com*ati)le mode

Ameta htt*Fe?i,=BFD&FCom*ati)leB content=BIE=edgeB/


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 8/17Page 9 © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% "eclare all the Java#cript variables on the top%

//Bad Practice

,ar firstName=9ar(,ar lastName=6ohnson

//ood Practice

,ar firstName lastName

firstName = 9ar(BlastName = 6ohnsonB

% 'lays use ::: in place of :: for comparison of values and type both

// 8ncorrect ;esults

1==1 55tre

1== tre 55 tre // Correct ;esults

1===1 55 false1=== tre 55 false


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 9/17Page < © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% 'utomatic (ype Conversions

6a,a7cri*t is loosel! t!*ed and can do atomatic t!*e con,ersions )t )e carefl in case of themathematical o*erations

,ar >=G!=10,ar H=>F! 55 Correct Reslt FG

,ar H=>! 55 Incorrect Reslt G10

To a,oid sch *ro)lems al'a!s con,ert the ,ales to nmeric ,ales )efore the mathematical o*eration +*arseInt+--.

,ar H=> *arseInt+!- 55 Correct reslt 1G


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 10/17Page ,= © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% 'ccidental use of assignment operators for comparisons

//8ncorrect ;esult

,ar >=0if+>=10- 55 &l'a!s retrn tre

//Correct ;esult

,ar >=0if+>==10-55 &l'a!s retrn false

% >loating point numbers calculation

&ll nm)ers in 6a,a7cri*t are stored as JKF)its >loating point numbers +8loats-.$rogramming langagesinclding 6a,a7cri*t ha,e difficlties 'ith *recise floating *oint ,ales.

,ar > = 0.K

,ar ! = 0.2 // 8ncorrect ;esult

,ar H = > ! 55 the reslt in H 'ill )e 0.J000000000000001if +H == 0.J- 55 &l'a!s retrn false

//Correct ;esult

,ar H = +> 10 ! 10- 5 10 55 H 'ill )e 0.J

if +H == 0.J- 55 &l'a!s retrn tre


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 11/17Page ,, © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% Breaking the #tring

6a,a7cri*t allo's )rea(ing the statement in t'o lines //Correct

,ar > =B@ello MorldB

#rea(ing a statement in the middle of a string 'ill not 'or( //8ncorrect

,ar > = B@elloMorldB

Oo mst se a B)ac(slashB if !o mst )rea( a statement in a string //Correct

,ar > = B@ello PMorldB


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 12/17Page ,2 © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% 4ull and undefined checks

To )e nll an o)ect has to )e defined first.To test if an o)ect e>ists )elo' a**roach shold )e sed

//8ncorrect

if +m!Q) == nll "" t!*eof m!Q) == BndefinedB-

//Correct

if +t!*eof m!Q) == BndefinedB "" m!Q) == nll-

% )ooping

// Bad Practice

for +i = 0 i A arr.length i- // ood Practice

length = arr.lengthfor +i = 0 i A length i-


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 13/17Page ,! © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% "o not get the Java#cript elements again and again in Java#cript but initial

i?e once.

//Bad Practice

557ome *lace in 6a,a7cri*tdocment.getElement#!Id+?antit!-.,ale=G00557ome other *lace in 6a,a7cri*t

docment.getElement#!Id+?antit!-.,ale=200

//ood Practice

557tore all the elements initiall!?antit!Q)= docment.getElement#!Id+?antit!-

557ome *lace in 6a,a7cri*t ?antit!Q).,ale=G00557ome other *lace in 6a,a7cri*t?antit!Q).,ale=200


http://slidepdf.com/reader/full/javascript-common-mis-javascript-common-mistakes-best-practicestakes-best 14/17Page ,* © NEC Technologies India Limited 2013 Confidential – for internal se onl!

Contined..

% Caching 8ssues

7ome times e,en after *dating the 6a,a7cri*t Code Qn rnning the a**lication the *dated 6a,a7cri*t code does not reflect in the )ro'ser and a**lication )eha,es a)normall! for that sall! 'e delete the )ro'sing histor! and again start the a**lication.

It is a ,er! common *ro)lem 'hile de,elo*ing an! 'e) a**lication to a,oid sch *ro)lems 'e shold add ni?e *arameters in the 6a,a7cri*t references.

Ahtml/Ahead/A5head/A)od!/Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t1.sparam:,%=B A5scri*t/

Ascri*t t!*e=Bte>t5a,ascri*tB src=Bscri*t2.sparam:,%=B/A5scri*t/A5)od!/A5html/



Contined..

% Minify Java#cript files

Senerall! in large scale 'e) a**lications a lot of 6a,a7cri*t files are sed in that case all the 6a,a7cri*t shold )e minified after the 6a,a7cri*t code is fi>ed so that the *erformance can )e im*ro,ed. There are man! tools a,aila)le to minif! the 6a,a7cri*t li(e minif! etc.

% Code >ormatting

Code formatting is ,er! im*ortant as no' a da!s a maor *art of sorce code is 'ritten in 6a,a7cri*t itself If code is not formatted *ro*erl! then the maintenance of 6a,a7cri*t can )e ?ite diff iclt s*eciall! to a ne'comer. 8or that 'hen the 6a,a7cri*t code get fi>ed once the code formatter tool can )e a**lied to the 6a,a7cri*t for clean formatting.

There are a fe' online code formatting tools are a,aila)le li(e s)eatifier 'hich can format the6a,a7cri*t and @T9L *ro*erl!.



(hanks@@



Documents

JavaScript Common Mis JavaScript Common Mistakes & Best Practicestakes & Best Practices