5 Modern Practices of JavaScript that Every Developer Should Know

5 best tips and practices for writing clean code

Photo by Shirin Alian on Unsplash

More than a decade ago, JavaScript was just a tool to make websites interactive and better-looking but things have changed considerably ever since.

Now JavaScript is widely used in every sphere of production, ranging from web development to games to mobile applications. Moreover, for any given task chances are you will find a stable and fully-fledged JavaScript.

It is thus becoming increasingly important to stay up-to-date with all the best practices to give you and your code an edge over others, especially in job interviews and technical rounds.

Below are 5 modern rules of JavaScript that every developer should know to write clean code and become proficient:

1. Destructuring

Often times we have many values and properties relating to the same thing and we store and pass these values and data using objects.

The standard way to access the values is given below:

const mobile= {
    id: 42,
    brand: 'Apple'
};
console.log(mobile.id);
console.log(mobile.brand);

While this approach works, you can see code repetition here as we keep referencing the object each time to get value. There is a better way to deal with this.

const mobile= {
    id: 42,
    brand: 'Apple'
};
var {id,brand} = mobile;
console.log(id);
console.log(brand);

//Destructuring can be applied to functions as well
var myFunction= ({id})=>{           
   console.log(id); 
 }
myFunction(mobile);

Additionally, you can destructure arrays as well using this technique.

function myFun() {
  return [1, 2];
}

let a, b; 
[a, b] = myFun(); 
console.log(a); // 1
console.log(b); //2

The same properties can be used for swapping variables easily as well.

let a = 1;
let b = 3;
**
**[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

You can find the in-depth guide on destructuring here.

2. Better logging

The console log is the go-to debugging method for almost all the developers out there, irrespective of their experience. However, not many people know that there exist smart ways to log messages.

const foo= {
  brand: 'Apple'
};

const bar= {
  brand: 'LG'
};

console.log(foo);
console.log(bar);

The output would look something like this:

{"brand": "Apple" }
{"brand": "LG" }

The code snippet above shows a very common way to log messages but the problem with it is that there would be no way of knowing which log has printed what as you can see from the output.

The right way to log data is by wrapping the log message with parenthesis or, as in our case, when logging multiple objects you can use .table instead of the .log as well. This will give a much more clear indication of the object we are logging.

Both ways are shown below:

const foo= {
  brand: 'Apple'
};

const bar= {
  brand: 'LG'
};
console.log({foo,bar})
console.table([foo,bar])

The output will be much easier to the eye and more elaborate.

//Output
{   
  "foo": {     
    "brand": "Apple"   
  },  
  "bar": {     
    "brand": "LG"   
  } 
}

Theconsole.table() will render the following:

Table showing the objects with their properties

Another useful method is the count method which can become extremely useful when using loops or recursion and calling the same function over and over again. The count method logs every time the function is called, without having you to declare any counter variable to store the number of times the function is called.

For example, see the snippet below:

let user = "";

function greet() {
  console.count();
  return "Welcome " + user;
}

user = "John";
greet();
user = "Sam";
greet();

We have called the function greet()two times and hence the code output would look like this:

"default: 1"
"default: 2"

There are more such ways to make debugging easier such as using the trace method. You can find the full list here.

3. Higher-Order Functions

Higher-order functions are functions that take some argument and outputs the result. If you have been programming for a while, chances are that you must have come across and used these functions without even knowing.

JavaScript offers several higher-order functions which can make life easier for programmers. There are certain common operations such as sorting an array or removing duplicate elements from a list. All such operations can be performed in a few lines of code by using the native functions.

To retrieve all the unique elements we can use the Set() method.

let duplicateArray = [1,2,2,2,4,4,3];
let uniquesArray= Array.from(new Set(duplicateArray)); //[1,2,4,3]

Similarly to sort the array we can use the sort() method.

let mArray = [1,2,5,4];
console.log(mArray.sort()); // [1,2,4,5]

The benefits of using these functions are pretty obvious. They result in short, clean code and enables you to focus on more important things rather than writing functions to sort arrays and remove duplicate elements.

These functions also make running loops very simple. Instead of running a traditional for or while loop, one can easily achieve the same by using functions.

For example, if we want to print every element in an array multiplied by 5 and also store the sum of all elements, we can run a loop as shown below:

let arr= [1,2,3];
let total=0;
for(var i=0;i<arr.length;i++){
    total+=arr[i];
    console.log(arr[i]*5);
}
console.log(total);

Or, we can use functions to quickly perform these tasks.

let arr= [1,2,3];
arr.map(val => console.log(val*5))
let total=arr.reduce((acc,current)=>acc+current);
console.log(total)

Although we have used simple operations such as multiplication, in real-world applications the tasks are much more complex, and using reduce() , filter() and other such functions can save a lot of headaches.

There are plenty of other such functions and you can find a comprehensive guide here.

4. Async-await

JavaScript supports asynchronous programming and what that means is that you can run a piece of code without interfering with the flow of the overall program. In other words, it is a form of parallel programming.

For instance, you see a progress bar while your data is being fetched in the background. Once the data is loaded, the program renders the data and removes the progress bar.

The modern way to implement this concept is to use async and await functionalities offered by JavaScript.

Below is a code snippet showing the common practice of performing asynchronous operations:

function random(){
    return Promise.resolve(Math.random())

  }
const showNum = ()=>{
    let first,second;
    random().then(v => {
      first=v;
      console.log(first);
      return random().then(p=>{
        second=p;
        console.log(second);
        console.log(second+first);
      })
    })
  }
showNum()

The code above tries to log the sum of two randomly generated numbers. As you can see, using then()can result in a chain of repetitive code which not only looks untidy but also is time-consuming to write.

However, JavaScript offers us a better alternative.

function random(){
    return Promise.resolve(Math.random())

  }
const showNum = async()=>{
    let first = await random();
    console.log(first);
    let second=await random();
    console.log(second);
    console.log(first+second);
  }
showNum()

Using async and await has made it very simple to perform such operations in JavaScript and not many languages offer such a straightforward way of handling asynchronous tasks.

5. Linting

Linting is a common practice followed by experienced developers to make their code free from bugs and inconsistencies. In layman’s term, it is a tool that analyzes your program to flag programming errors, bugs, stylistic errors, as well as unused variables and declarations.

When used for a long period of time, it can improve your programming skills as you will become accustomed to the uniform code style and write much cleaner code. It also keeps track of your TODO’s and FIXME’s.

A simple case to showcase linting is given below:

const test = 'I am a test';
console.log(`Test: ${test}`);
const test= 'Another one.';

The constant test is declared twice and thus, will throw an error while you execute the program.

But when you use a linter, this error will be caught immediately.

Linter pointing out the error

This is one of the core advantages of using linter and one of the primary reasons why it is preferred so much in today’s world.

We have used a short 3 line example to showcase one of the common errors but JavaScript applications are becoming increasingly complex and such errors are bound to happen in a much larger program.

You can install and get started with ESLint, which is a popular JavaScript linter, by following their official guide.

Conclusion

JavaScript applications are becoming increasingly complex every day, partly because of the fact that is becoming used virtually everywhere. Today, it’s next to impossible to find a web page that does not use JavaScript.

Besides this rapid growth, the JavaScript language is also evolving. Almost every year JavaScript undergoes major changes and new functionalities are added to facilitate the development process.

Not only do these new functions and modern rules speed up the development stage but also can also benefit you in technical interviews.

Hence it is imperative for experienced developers to stay on top of these advancements and it is even more necessary for new developers to grasp and use the new tools at their disposal.