7 Killer One-Liners in JavaScript
Tags: javascript, webdev, programming, productivity
Published: 2022-02-13 05:49:32

---
canonical_url: https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf
---

# 7 Killer One-Liners in JavaScript

JavaScript is the most crucial pillar of Web Development.

> This article contains **code snippets** hand-picked by _sterilized contamination-free gloves_ and _placed onto a satin pillow._

> A team of 50 _inspected the code_ and _ensured it was in the highly polished_ before posting. Our article-posting specialist from Switzerland lit a candle, and a hush fell over the crowd as he entered the code into the _finest gold-lined keyboard that money can buy._

> We all had a wonderful celebration, and the whole party marched down the street to the café where the entire town of Kolkata waved _"Bon Voyage!"_ to the article as it was posted online.

Have a wonderful time reading it!

## Shuffle Array

While using algorithms that require _some degree of randomization_, you will often find shuffling arrays quite a necessary skill. The following snippet shuffles an array **in place** with `O(n log n)` complexity.

```javascript
const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);

// Testing
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr));
```

## Copy to Clipboard

In web apps, **copy to clipboard** is rapidly rising in popularity due to its _convenience for the user_.

```javascript
const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

// Testing
copyToClipboard("Hello World!");
```

**NOTE:** The approach works for **93.08%** global users as per [caniuse](https://caniuse.com/?search=Clipboard%20API%3A%20writeText). So the check is necessary that the user's browser supports the **API**. To support all users, you can use an `input` and **copy its contents**.

## Unique Elements

Every language has its own implementation of `Hash List`, in **JavaScript**, it is called `Set`. You can easily get the unique elements from an array using the `Set` **Data Structure**.

```javascript
const getUnique = (arr) => [...new Set(arr)];

// Testing
const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));
```

## Detect Dark Mode

With the rising popularity of **dark mode**, it is ideal to switch your app to **dark mode** if the user has it enabled in their device. Luckily, `media queries` can be utilized for making the task a _walk in the park_.

```javascript
const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;

// Testing
console.log(isDarkMode());
```

As per [caniuse](https://caniuse.com/?search=%20%20window.matchMedia) the support of `matchMedia` is **97.19%**.

## Scroll To Top

Beginners very often find themselves struggling with scrolling elements into view properly. The easiest way to scroll elements is to use the `scrollIntoView` method. Add `behavior: "smooth"` for a smooth scrolling animation.

```javascript
const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" });
```

## Scroll To Bottom

Just like the `scrollToTop` method, the `scrollToBottom` method can easily be implemented using the `scrollIntoView` method, only by switching the `block` value to `end`

```javascript
const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" });
```

## Generate Random Color

Does your application rely on **random color generation**? Look no further, _the following snippet got you covered_!

```javascript
const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff).toString(16)}`;
```

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 am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

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)