🤓 The Top 10 JavaScript Tricks for Cleaner Code
Tags: javascript, webdev, programming, beginners
Published: 2023-10-23 05:28:36


Hello Guys, My name is **[Md Taqui Imam](https://bit.ly/mdTaquiImam)** i am a Full Stack developer
And in Today post i will tell you about **"The Top 10 JavaScript Tricks for Cleaner Code"** that every javascript developers should know.

> And i will write a seperate blog as a series on each Trick🔥. So, don't forget to Follow✅

{% cta https://github.com/taqui-786 %}Follow me in Github{% endcta %} 


![Welcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/839u12vbgr91lwvhrqnr.gif)

> _**So Let's Start 🔥**_


## 1. 💡 Use Object Destructuring 

Object destructuring allows you to extract data from objects into distinct variables. This can make your code cleaner by avoiding repetitively using dot notation.

For example:

```js
const user = {
  name: 'John',
  age: 30
};

// Without destructuring
const name = user.name; 
const age = user.age;

// With destructuring
const { name, age } = user;
```

Pretty cool right? Even a grade schooler can understand this!

## 2.🧹 Use Default Parameters

Default parameters allow you to set default values for function parameters if none are provided. This avoids repeating yourself by redefining values every time.

For example: 

```js 
function greet(name = 'Stranger') {
  console.log('Hello ' + name);
}

greet(); // Hello Stranger
greet('John'); // Hello John
```

Setting default values makes functions more flexible to use.

## 3.📚 Use Template Literals 

Template literals make string concatenation cleaner using backticks and ${expression} instead of plus signs. Even a kid could see this is an easier way to build strings!

For example:

```js
const name = 'John';
const age = 30;

// Without template literals
const greeting = 'Hello ' + name + ', you are ' + age; 

// With template literals 
const greeting = `Hello ${name}, you are ${age}`;
```

Template literals remove lots of pesky concatenation. Neat!

## 4.✂ Use Array Destructuring

Array destructuring works similarly to object destructuring, allowing you to extract array elements into variables.

For example:

```js
const fruits = ['apples', 'oranges', 'bananas'];

// Without destructuring
const fruit1 = fruits[0];
const fruit2 = fruits[1]; 

// With destructuring
const [fruit1, fruit2] = fruits;
```

Much simpler! Even a young coder could pick this up.

## 5.🏃 Use Array Methods 

JavaScript has handy array methods to help us write cleaner code. Things like map(), filter(), find(), reduce() etc. can avoid lots of loops and make code more expressive.

For example:

```js 
// Filter out all even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Extract names from objects
const names = users.map(user => user.name); 
```

JavaScript's array methods are super easy to grasp.

## 6.🧠 Use Ternary Operator

The ternary operator allows you to write one-line if/else statements in a simpler way.

For example: 

```js
// Without ternary
let message;
if(isLoggedIn) {
  message = 'Welcome back!';
} else {
  message = 'Please log in';
}

// With ternary 
const message = isLoggedIn ? 'Welcome back!' : 'Please log in';
```

Even a young student could pick up this shorthand logic.

## 7.🛠 Use Object Methods

JavaScript gives objects built-in methods like Object.keys(), Object.values(), JSON.stringify() etc. Using these avoids reimplementing repetitive tasks.

```js
// Get object keys 
const keys = Object.keys(user);

// Convert object to JSON
const json = JSON.stringify(user);
```

The built-in object methods help keep code tidy and reusable.

## 8.➕ Use Rest/Spread Properties

The rest/spread syntax allows us to handle function parameters and array elements in flexible ways.

For example:

```js
// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

// Spread syntax 
const newArray = [...array, 'new item'];
```

Even young minds can grasp these concepts that add power to JS.

## 9.🧸 Use Let & Const

Using let and const avoids unintended behavior from var. They make sure variables are block-scoped and constants can't be reassigned.

For example: 

```js
// var is function scoped 
if(true) {
  var snack = 'chips';
}
console.log(snack); // chips 

// let and const are block scoped
if(true) {
  let fruit = 'apples';
  const color = 'red';
}
// fruit not defined here 
```

Let and const help beginners remember best practices.

## 💭 In Conclusion

There were just some of the top JavaScript tricks that can help you write cleaner and more elegant code. Even beginning programmers can understand these concepts to get the most out of JavaScript. Keep practicing and have fun with code!

## [Written By  Md Taqui Imam](https://bit.ly/MdTaqui)

## Happy Coding😊