7 neat tricks for JS that you probably did not know
Tags: javascript, webdev, programming, productivity
Published: 2022-08-28 05:02:31

Got tired of learning and want to get some **cool tricks up your sleeve** to earn the right to show off? You have come to the right place. Here are **neat tricks** that can even make your life easier!

## 1. Readable numbers

Ever run into an unreadably **long number** where you had to put your finger on the screen to read it? Luckily, there is an easy solution to that by using `_` within the bounds of the number.

```js
const number = 123_456_789;
```

You can put `_` anywhere within a number to make it easier to read, without hampering the number itself.

## 2. Truncate the end of arrays

Most people use `Array.length` as a **getter function**. A little-known fact is: that it can also be used as a **setter**.

```js
let array = [1, 2, 3, 4, 5];

console.log(array); // [1, 2, 3, 4, 5]
console.log(array.length); // 5

array.length = 3;

console.log(array); // [1, 2, 3]
```

## 3. Short circuit evaulation

![short-circuit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6nqo3aziai6dmjnh9ht.gif)

No, we are NOT talking about those **short circuits**.

The `&&` and `||` operators can be easily used to check for conditions and return values in a single line, which is known as **short circuit evaluation**.

### Use case of `&&`

```js
const showUserData = true;
const data = "not so secret data";

// will display false if showUserData is false
console.log(showUserData && data);
```

### Use case of `||`

```js
const fallbackData =
  "nothing to see folks";
const data = "random data";

// will display `fallbackData` if
// data is false-ish (eg: null, undefined, '', etc)
console.log(data || fallbackData);
```

## 4. Optional chaining

> The optional chaining operator (`?.`) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid

It's a simple solution to get a **deeply nested property** without having to check the validity of each reference in the chain.

```js
// usage (will return undefined if any of the items is not defined)
user.data?.name;
user.data?.addressList?.[0];
user.greet?.(time);
```

## 5. Get unique values in an array

Accessing the **unique values** in an array is a pretty common operation. There's a usual way, and there's a smart way of doing it

```js
// USUAL WAY
// O(n^2) time complexity & O(n) space complexity
const uniqueValues = array.filter(
  (value, index, self) =>
    self.indexOf(value) === index
);

// SMART WAY
// complexity: O(n) time & space
const uniqueValues = [
  ...new Set(array),
];
```

## 6. Nullish coalescing

> The nullish coalescing operator (`??`) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

**Nullish coalescing** is extremely useful when you want to return a default value when a variable might contain a **null-ish value**.

```js
const getUserName = (user) => {
  return user?.name ?? "Anonymous";
};
```

## 7. Replace all

The `string.replace` method is typically used to **replace the first occurrence of a substring**, but there is a simple way to turn it into a function that can replace all occurrences by using a **regular expression** with a **global flag**.

```js
const replace_string =
  "Visit replacesoft. replacesoft is a software company";

console.log(
  replace_string.replace(
    /replace/,
    "Micro"
  )
); // "Visit Microsoft. replacesoft is a software company"

console.log(
  replace_string.replace(
    /replace/g,
    "Micro"
  )
); // "Visit Microsoft. Microsoft is a software company"
```

**That's all folks!**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I have moved to Bali, Indonesia as a Digital Nomad. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.