DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

πŸ’‘Piyush Kesarwani
πŸ’‘Piyush Kesarwani

Posted on

6 Killer JavaScript One-Liners β€” for beginners

JavaScript is by far one of the best programming languages for web development. It is the only language that is used by almost 98% of websites. So, learning JavaScript during the journey of web development is very important for many beginners.

This article contains the most important JavaScript first-liners that every developer must know. Let’s get started.

Shuffle Array

`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));`
Enter fullscreen mode Exit fullscreen mode

This one-liner will help you to shuffle the entire elements into an array of elements.

Copy To Clipboard

`const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);// Testing
copyToClipboard("Hello World!");`
Enter fullscreen mode Exit fullscreen mode

In web apps, copy to clipboard is rising in huge popularity as it makes web development super fun and easy to use.

Get Unique elements from an array

const getUnique = (arr) => [...new Set(arr)];// Testing
const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];
console.log(getUnique(arr));
Enter fullscreen mode Exit fullscreen mode

With this code, you can easily get unique elements from an array using the Set Data Structure.

Switch to Dark Mode

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;// Testing
console.log(isDarkMode());
Enter fullscreen mode Exit fullscreen mode

With this code, you can check whether the web application has the dark mode activated or not.

Scroll To Top

const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" });
Enter fullscreen mode Exit fullscreen mode

This code will take the page scroll to the top. This is very useful when the website’s content is long and you have to scroll instantly to the top.

Scroll to bottom

const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" });
Enter fullscreen mode Exit fullscreen mode

Simple as scrolling to the top, but gives the reverse functionality by scrolling to the bottom.


That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech. You can subscribe to my free Newsletter.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me on Upwork and Freelancer.

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn.

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram.

Top comments (0)

Want to Create an Account?
Now it's your turn!
Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.