Top 7 Javascript Best Practices For Beginners 👍

b6

alt text

1. Always use camelcase when declare variables.

❌ Don't Use

var first_name = document.ElementById("firstname").value;
var date_of_birth = document.ElementById("dob").value;

✔ Use

var firstName = document.ElementById("firstname").value;
var dateOfBirth = document.ElementById("dob").value;

2. Use shorten IF in small conditions.

❌ Don't Use

//Un-Compressed Code
if ( age < 19 ) {
      isMajor = false;
} else {
      isMajor = true;
}

✔ Use

//Compressed Code
isMajor = ( age < 19 ) ? false : true;

3. Declare Variables outside of loop.

Not in all cases. Do it when you use common components/functions/DOMs inside the loop.

❌ Don't Use

for(var i = 0; i < someArray.length; i++) {
   var container = document.getElementById('container');
   container.innerHtml += 'my number: ' + i;
}

/* 
This will load the DOM each time of the loop. 
Will slowdown your application performance in big cases.
*/

✔ Use

var container = document.getElementById('container');

for(var i = 0; i < someArray.length; i++) {
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

4. Reduce the single global variables.

❌ Don't Use

var userId = '123456';
var userName = 'username';
var dateOfBirth = '06-11-1998';

function doSomething(userId,userName,dateOfBirth){
      //Your Implementation
}

✔ Use

//Make a collection of data
var userData = {
   userId : '123456',
   userName : 'username',
   dateOfBirth : '06-11-1998'
}

function doSomething(userData){
      //Your Implementation
}

function doSomethingElse(userData.userId){
      //Your Implementation
}

5. Always comment your works & function input,outputs.

❌ Don't Use

function addNumbers(num1, num2){
     return num1 + num2;
}

function getDataById(id){
     return someDataArray[id];
}

✔ Use

/*
* Adding two numbers
* @para num1 (int), num2 (int)
* @return int
*/
function addNumbers(num1, num2){
     return num1 + num2;
}

/*
* Adding two numbers
* @para id (int)
* @return Array
*/
function getDataById(id){
     return someDataArray[id];
}

6. Always Build/Minify your JS before move it to live.

Commenting your works, New lines & other best practices will increase your javascript file size. We need this stuffs in Development Environment only.

So Build & Minify your javascript file using build tools. It will compress your javascript to load much faster.

Asserts Build Tool : Webpack
Online Javascript Minifier : javascript-minifier

7. Load your scripts just before </body> Tags.

❌ Don't Use

<head>
     <!--Don't Load JS files here.-->
</head>

<body>
      <!--Don't Load JS files here.-->

✔ Use

          <!--Load JS  files here.-->
     </body>
</html>

Nubelle

Thanks Bro

root

Nice post bro.

b6

@Malith 👌👌

b6

@root thx bro

devR

useful post @b6

GeethOnion

Very useful 😍

dev_lak

Nice post bro

b6

@devR Thx bro

b6

@GeethOnion Thx bro

b6

@dev_lak thx bro

tnlthanzeel

isnt it better to load the javascripts just before closing the body tag? so the page will render faster

b6

@tnlthanzeel yep.. the assets will.be loaded quickly before javascript. So the site renders before, functions loads after

tnlthanzeel

@b6 niceee

lkdev

wow, nice looking post with very useful content, thanks @b6

b6

@lkdev 😊😊😊

DevKasun

useful article

dee_kas

Nice work.really useful

kapilsri

really good thing

b6

@DevKasun thx bro

Top 7 Javascript Best Practices For Beginners 👍

1. Always use camelcase when declare variables.

2. Use shorten IF in small conditions.

3. Declare Variables outside of loop.

4. Reduce the single global variables.

5. Always comment your works & function input,outputs.

6. Always Build/Minify your JS before move it to live.

7. Load your scripts just before </body> Tags.

0
Online

3.7k
Users

1.3k
Topics

5.3k
Posts

Top 7 Javascript Best Practices For Beginners 👍

1. Always use camelcase when declare variables.

2. Use shorten IF in small conditions.

3. Declare Variables outside of loop.

4. Reduce the single global variables.

5. Always comment your works & function input,outputs.

6. Always Build/Minify your JS before move it to live.

7. Load your scripts just before </body> Tags.

0Online

3.7kUsers

1.3kTopics

5.3kPosts

0
Online

3.7k
Users

1.3k
Topics

5.3k
Posts