DEV Community

Gyanendra Kumar Knojiya
Gyanendra Kumar Knojiya

Posted on • Originally published at gyanendraknojiya.Medium on

10 Awesome JavaScript One-Liners

I’d like to share some mind-blowing javascript one-liners with you today that can save you a lot of time.

image

Good day, everyone! Gyanendra here, 2 years of experience as a Full Stack developer. I’d like to share some mind-blowing javascript one-liners with you today.

1. Reverse a string

We can split a string. As a result, we’ll have an array. We can revert this array and join to get a string.

let str = 'codingcafe'
str = str.split('').reverse().join('')
console.log(str)

// efacgnidoc
Enter fullscreen mode Exit fullscreen mode

2. Get query parameters from the URL

To obtain query parameters, we must first divide the URL at “?” and then replace “=” **with “:”** and “&” *with *“,”. As we did here-

function getQueryParams(URL) {
  console.log(decodeURI(URL.split('?')[1]))
  URL = JSON.parse(
    '{"' + decodeURI(URL.split('?')[1]).replace(/&/g, '","').replace(/=/g, '":"') + '"}'
  )
  return URL
}
getQueryParams('https://codingcafe.co.in?name=gyan&age=24')

// {name: 'gyan', age: '24'}
Enter fullscreen mode Exit fullscreen mode

3. Check Odd/Even

The remainder becomes 0 when we divide an even integer by two. Otherwise, it’s an odd number.

function isEven(num) {
  return num % 2 === 0 ? true : false
}
isEven(5)

// false
Enter fullscreen mode Exit fullscreen mode

4. Clipboard API

To copy a text, we can use JavaScript navigator.

const copy = (text) => navigator.clipboard.writeText('Hello world!')
Enter fullscreen mode Exit fullscreen mode

To paste text:

const text = navigator.clipboard.readText()
Enter fullscreen mode Exit fullscreen mode

5. Remove duplicate from an Array

We can make a set from an array to get rid of duplicates.

const removeDuplicates = (ary) => {
  return [...new Set(ary)]
}
removeDuplicates([5, 6, 1, 2, 3, 6, 3, 5, 1])

// [5, 6, 1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

6. Shuffle an array:

We can use array.sort() with (Math.random() — 0.5). **Math.random() — 0.5 **is a random number, which may be positive or negative.

function shuffle(array) {
  array.sort(() => Math.random() - 0.5)
}
shuffle([3, 7, 6, 5])

// [7, 5, 3, 6]
Enter fullscreen mode Exit fullscreen mode

7. Check to see if the current tab is visible or focused

we can **document.hidden **to check-

const inView = () => document.hidden
inView()

// Result: returns true or false depending on if tab is focused
Enter fullscreen mode Exit fullscreen mode

8. Check to see if the Element is focused

we can **document.activeElement **to check-

const inView = (el) => el === document.activeElement
inView(element)

// Result: returns true or false depending on if element is focused
Enter fullscreen mode Exit fullscreen mode

9. Scroll to top

The x- and y-coordinates to scroll to will be sent to the window.scrollTo() function. We’ll scroll to the top of the page if we set these to zero and zero.

const scrollToTop = () => window.scrollTo(0, 0)

scrollToTop()
Enter fullscreen mode Exit fullscreen mode

10. Scroll to the bottom

The x- and y-coordinates to scroll to will be sent to the window.scrollTo() function. We’ll scroll to the bottom of the page if we set these to zero and the height of the page.

const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight)

scrollToBottom()
Enter fullscreen mode Exit fullscreen mode

Conclusion

Thanks for reading this article. I hope you like this article.
buy a coffee for me https://www.buymeacoffee.com/gyanknojiya

👋 One new thing before you go

Tired of getting nickel-and-dimed on your side projects? 😒

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! 🐥

Just one of many great perks of being part of the network ❤️

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay