JavaScript Tips for Cleaner Code
Tags: webdev, frontend, javascript, react
Published: 2023-12-31 17:01:24

Some javaScript techniques that lead to clean and well-organized code.


## 1. Object Destructing:

- 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:

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

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

// With destructuring
const { name, age } = user;
```
## 2. 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:

```javascript
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. Template Literals:

- Template literals make string concatenation cleaner.

For example:

```javascript
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.

## 4. Use Array Destructuring:

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

For example:

```javascript
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 programmer 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:

```javascript
// 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. Ternary Operator:

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

For example:

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

// With ternary 
const message = isLoggedIn ? 'Welcome back!' : 'Please log in';
```
## 7. Object Methods:

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

For example:

```javascript
// 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:

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

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

## 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:

``` javascript
// 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.

## Summary:
These JavaScript hacks bring elegance to your code—perfect for beginners and pros alike. Happy coding!

## Resource
https://dev.to/taqui_786/the-top-10-javascript-tricks-for-cleaner-code-422b