JS Unique Tricks for Intermediators
Tags: javascript, tutorial, productivity, frontend
Published: 2023-04-09 15:03:26

Javascript is a versatile language that allows developers to create powerful and interactive web applications. In this article, we will explore some unique tricks that can be used to enhance the functionality of Javascript.

Trick 1: Using the Ternary Operator for Conditional Statements
--------------------------------------------------------------

The ternary operator is a shorthand way to write conditional statements in Javascript. It is often used to replace if-else statements and can make your code more concise and easier to read.

Here's an example:


```
// Without ternary operator
if (a > b) {
  result = "a is greater than b";
} else {
  result = "b is greater than a";
}

// With ternary operator
result = a > b ? "a is greater than b" : "b is greater than a";
```

In this example, we use the ternary operator to check whether `a` is greater than `b` and assign the appropriate string to the `result` variable.

Trick 2: Using Object Destructuring to Assign Variables
-------------------------------------------------------

Object destructuring is a technique that allows you to extract values from objects and assign them to variables. This can be a useful way to simplify your code and make it more readable.

Here's an example:

```

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

// Without object destructuring
const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

// With object destructuring
const { firstName, lastName, age } = person;
```

In this example, we use object destructuring to extract the `firstName`, `lastName`, and `age` properties from the `person` object and assign them to variables of the same name.

Trick 3: Using the Spread Operator to Combine Arrays
----------------------------------------------------

The spread operator is a powerful tool in Javascript that allows you to expand arrays and objects. It can be used to combine arrays in a concise and readable way.

Here's an example:



```
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Without spread operator
const arr3 = arr1.concat(arr2);

// With spread operator
const arr3 = [...arr1, ...arr2];
```

In this example, we use the spread operator to combine the `arr1` and `arr2` arrays into a new array `arr3`. This is much more concise than using the `concat` method.

Trick 4: Using Arrow Functions for Concise Functions
----------------------------------------------------

Arrow functions are a shorthand way to write functions in Javascript. They can make your code more concise and easier to read.

Here's an example:

```

// Without arrow function
function add(a, b) {
  return a + b;
}

// With arrow function
const add = (a, b) => a + b;
```

In this example, we use an arrow function to define the `add` function. This is much more concise than using the `function` keyword.

Trick 5: Using Template Literals for Dynamic Strings
----------------------------------------------------

Template literals are a powerful feature in Javascript that allows you to create dynamic strings. They can be used to insert variables and expressions into strings.

Here's an example:

```
const name = "John";
const age = 30;

// Without template literals
const message = "My name is " + name + " and I am " + age + " years old.";

// With template literalz
const message = `My name is ${name} and I am ${age} years old.`;
```

In this example, we use template literals to create a dynamic string that includes

the `name` and `age` variables. This is much more concise and easier to read than using string concatenation.

Trick 6: Using the Nullish Coalescing Operator for Default Values
-----------------------------------------------------------------

The nullish coalescing operator is a relatively new feature in Javascript that can be used to provide default values for variables that may be null or undefined.

Here's an example:


```
const foo = null;
const bar = foo ?? "default value";

console.log(bar); // "default value"
```

In this example, we use the nullish coalescing operator to assign the value of `foo` to `bar`. If `foo` is null or undefined, the default value of "default value" is used instead.

Trick 7: Using Promises for Asynchronous Code
---------------------------------------------

Promises are a powerful tool in Javascript that allow you to write asynchronous code in a synchronous style. They can be used to make your code more readable and easier to maintain.

Here's an example:

```

function fetchData() {
  return new Promise((resolve, reject) => {
    // Perform asynchronous operation
    const data = getDataFromServer();

    if (data) {
      resolve(data);
    } else {
      reject(new Error("Unable to fetch data"));
    }
  });
}

fetchData()
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
```

In this example, we use a promise to fetch data from a server. The `fetchData` function returns a promise that resolves with the data if the operation is successful or rejects with an error if it fails.

Conclusion
----------

Javascript is a powerful language with many unique features that can be used to enhance the functionality of your code. By using these tricks, you can make your code more concise, readable, and easier to maintain.

**Let me know in comments if you know any more  :)**