19 Practical ES6 Snippets to Solve Common JS Problems 🚀💯
Tags: webdev, javascript, frontend, productivity
Published: 2022-09-15 15:47:21

---
title: 19 Practical ES6 Snippets to Solve Common JS Problems 🚀💯
published: true
description: 
tags: webdev, javascript, frontend, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzncjvbqvq8jkw7l1v9w.png
canonical_url: https://madza.hashnode.dev/19-practical-es6-snippets-to-solve-common-js-problems
---
In our developer workflow, we often encounter challenging problems that might require just a few lines of code to be solved. In this article, I attempted to compile useful snippets that may assist you when working with URLs, DOM, events, dates, user preferences, and so on.

All of the snippets were handpicked from [30 seconds of code](https://www.30secondsofcode.org/js/p/1). It's an awesome resource, I would highly recommend going to check it out for more stuff.

The main criterion for curating these was practical usability. Hopefully, you will find something valuable, that you can apply in your future codebases.

<hr>

### 1. How to get the base URL?

```javascript
const getBaseURL = url => url.replace(/[?#].*$/, '');

getBaseURL('http://url.com/page?name=Adam&surname=Smith');
// 'http://url.com/page'
```

### 2. How to check if the URL is absolute?

```javascript
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str);

isAbsoluteURL('https://google.com'); // true
isAbsoluteURL('ftp://www.myserver.net'); // true
isAbsoluteURL('/foo/bar'); // false
```

### 3. How to get URL parameters as object?

```javascript
const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
    ),
    {}
  );

getURLParameters('google.com'); // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith');
// {name: 'Adam', surname: 'Smith'}
```

### 4. How to check if the element contains another element?

```javascript
const elementContains = (parent, child) =>
  parent !== child && parent.contains(child);

elementContains(
  document.querySelector('head'),
  document.querySelector('title')
);
// true
elementContains(document.querySelector('body'), document.querySelector('body'));
// false
```

### 5. How to get all the ancestors of the element?

```javascript
const getAncestors = el => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

getAncestors(document.querySelector('nav'));
// [document, html, body, header, nav]
```

### 6. How to smooth-scroll element into view?

```javascript
const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });

smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar');
// scrolls smoothly to the first element with a class of fooBar
```

### 7. How to handle click outside the element?

```javascript
const onClickOutside = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element
```

### 8. How to generate UUID?

```javascript
const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'
```

### 9. How to get the selected text?

```javascript
const getSelectedText = () => window.getSelection().toString();

getSelectedText(); // 'Lorem ipsum'
```

### 10. How to copy text to the clipboard?

```javascript
const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};
```

### 11. How to add styles to HTML element?

```javascript
const addStyles = (el, styles) => Object.assign(el.style, styles);

addStyles(document.getElementById('my-element'), {
  background: 'red',
  color: '#ffff00',
  fontSize: '3rem'
});
```

### 12. How to toggle full-screen mode?

```javascript
const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Opens `body` in fullscreen mode
fullscreen(false); // Exits fullscreen mode
```

### 13. How to detect if Caps lock is on?

```html
<form>
  <label for="username">Username:</label>
  <input id="username" name="username">

  <label for="password">Password:</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock is on</span>
</form>
```

```javascript
const el = document.getElementById('password');
const msg = document.getElementById('password-message');

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});
```

### 14. How to check if the Date is valid?

```javascript
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid('December 17, 1995 03:24:00'); // true
isDateValid('1995-12-17T03:24:00'); // true
isDateValid('1995-12-17 T03:24:00'); // false
isDateValid('Duck'); // false
isDateValid(1995, 11, 17); // true
isDateValid(1995, 11, 17, 'Duck'); // false
isDateValid({}); // false
```

### 15. How to get colon time from Date?

```javascript
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // '08:38:00'
```

### 16. How to generate UNIX timestamp from Date?

```javascript
const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000);

getTimestamp(); // 1602162242
```

### 17. How to check the preferred language of the current user?

```javascript
const detectLanguage = (defaultLang = 'en-US') =>
  navigator.language ||
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
  defaultLang;

detectLanguage(); // 'nl-NL'
```

### 18. How to check the preferred color scheme of the user?

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

prefersDarkColorScheme(); // true
```

### 19. How to check if the device supports touch events?

```javascript
const supportsTouchEvents = () =>
  window && 'ontouchstart' in window;

supportsTouchEvents(); // true
```

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.