18 Tips For Writing JavaScript Code Like A Hero
By: Ivan C
Tags: Javascript Tips, JavaScript, Coding, Web Development, Programming

During my years of programming, I always prioritized the way to write the code, not only so that it is clean but also because it helps the speed of processing and it is faster to write it.

It is not the same to write 1000 lines of code than 300, this helps a lot to the program or script that we are doing.

You have to be very careful when programming, because in large projects having “dirty” code can be a serious problem.

Many programmers criticize the JavaScript language for not having a standard way of working like Java or C ++ for example but the truth is that Javascript is one of the best languages ​​that are being used in these times, some of them are Facebook and Netflix. Libraries like React among others improve Front-end performance and as for the backend, nextJs is used for greater speed, these combinations drive today’s programmers crazy.

ECMAScript v6 (Abbreviated as ES6 or ES2015) is the standard that JavaScript has followed since June 2015. Until then, the version of JS that we were using in our browsers and Node.js, in this post we will see about this

By learning the following tips you will be able to improve the way you write your code. Take your time and practice with the console to learn well.

Let's do it! 🔥

1. Use ‘const’ for the constants instead of ‘var’

Constants are variables that never change, declaring the variable this way we make sure they never change

/* Old way */

var i = 1; /* Correct */

const i = 1;

2. Use ‘let’ for the changing variables instead of ‘var’

The let statement declares a locally scoped variable with block scope, this variable will change:

/* Inadequate */

var myVal = 1;

for (var i; i < 10; i++){

myVal = 1 + i;

} /* Correct */

let myVal = 1;

for (let i; i < 10; i++){

myVal += i

}

3. Declaring Objects

Example for shortcut declaring objects:

/*

Old way

The Object() class makes an unnecessary function call

*/

const myObject = new Object(); /* Correct */

const myObject = {};

4. Declaring Arrays

Example for shortcut declaring arrays:

/*

Old way

The Array() class makes an unnecessary function call

*/

const myArray = new Array(); /* Correct */

const myArray = [];

5. Concatenate strings

Example for concatenating strings this is very helpful:

/* Old way */

const myStringToAdd = "world";

const myString = "hello " + myStringToAdd; /* Correct */

const myStringToAdd = "world";

const myString = `hello ${myStringToAdd}`;

6. Use object method shorthand

Example of useful functions in objects:

/* Inadequate */

const customObject = {

val: 1,

addVal: function () {

return customObject.val + 1;

}

} /* Correct */

const customObject = {

val: 1,

addVal(){

return customObject.val++

}

}

7. Creating the value of an Object

Example of creating a new object with value:

/* Inadequate */

const value = 1;

const myObject = {

value: value

} /* Correct */

const value = 1;

const myObject = {

value

}

8. Assign values to an Object

Example of assign object values to another object:

/* Old way */

const object1 = { val: 1, b: 2 };

let object2 = { d: 3, z: 4 };

object2.val = object1.val;

object2.b = object1.b; /* Correct */

const object1 = { val: 1, b: 2 };

const object2 = { ...object1, d: 3, z: 4 }

9. Assign a value to an Array

Example of shortcut assign a value in an array:

/* Inadequate */

const myArray = [];

myArray[myArray.length] = "hello world"; /* Correct */

const myArray = [];

myArray.push('Hello world');

10. Concatenate Arrays

Example of concatenating arrays:

/* Inadequate */

const array1 = [1,2,3,4];

const array2 = [5,6,7,8];

const array3 = array1.concat(array2); /* Correct */

const array1 = [1,2,3,4];

const array2 = [5,6,7,8];

const array3 = [...array1, ...array2]

11. Get multiple properties of an object

Example of creating a function with an object parameter:

/* Inadequate */

function getFullName(client){

return `${client.name} ${client.last_name}`;

} /* Correct */

function getFullName({name, last_name}){

return `${name} ${last_name}`;

}

12. Getting values from an object

Example to get values ​​and create variables:

/* Inadequate */

const object1 = { a: 1 , b: 2 };

const a = object1.a;

const b = object1.b; /* Correct */

const object1 = { a: 1 , b: 2 };

const { a, b } = object1;

13. Creating functions

Example of shortcut functions with arrows:

/* Old way but good */

function myFunc() {} /* Good */

const myFunc = function() {} /* Best */

const myFunct = () => {} // IMPORTANT: In some cases it is not recommended to use these functions with arrows to avoid reading errors

14. Default values

Example of set default values in function parameters:

/* Inadequate */

const myFunct = (a, b) => {

if (!a) a = 1;

if (!b) b = 1;

return { a, b };

} /* Correct */

const myFunct = (a = 1, b = 1) => {

return { a, b };

}

15. Use ‘reduce’ Instead ‘forEach’ and ‘for’ to sum values

Example of shortcut sum of array:

/* Inadequate */

const values = [1, 2, 3, 4, 5];

let total = 0;

values.forEach( (n) => { total += n}) /* Inadequate */

const values = [1, 2, 3, 4, 5];

let total = 0;

for (let i; i < values.length; i++){

total += values[i];

} /* Correct */

const values = [1, 2, 3, 4, 5];

const total = values.reduce((total, num) => total + num);

16. Exist in array

/* Inadequate */

const myArray = [{a: 1}, {a: 2}, {a: 3}];

let exist = false;

myArray.forEach( item => {

if (item.a === 2) exist = true

}) /* Correct */

const myArray = [{a: 1}, {a: 2}, {a: 3}];

const exist = myArray.some( item => item.a == 2)

17. Shortcut if boolean

/* Inadequate */

const a = 1;

const b = 1;

let isTrue = false

if (a === b) {

isTrue = true

} /* Correct */

const a = 1;

const b = 1;

const isTrue = a === b

18. Shortcut if values

/* Inadequate */

const a = 5;

let b;

if (a === 5){

b = 3;

} else {

b = 2;

} /* Correct */

const a = 5;

const b = a === 5 ? 3 : 2;

Conclusion

The idea is that you review this post and you can practice how to work in a cleaner way and improve processing speed. I will be updating this post as I find new improvements

Remember if you have any questions or inquiries tell me, I would be very glad to help you.