DEV Community

Cover image for πŸ€“7 Useful JavaScript One-Liner Code You Must Know πŸ’Ž
Random
Random

Posted on

πŸ€“7 Useful JavaScript One-Liner Code You Must Know πŸ’Ž

Hey Coders, it's me Md Taqui Imam. In today's blog, I want to share some 7 useful JavaScript one-liner code that can make your code look more professional and reduce code base size.


And Don't forget to checkout πŸ‘‡ once

Free HTML Website Templates on HTMLrev

Discover free HTML website templates built with vanilla CSS, Bootstrap, Tailwind, Angular, React, Vue, Nextjs, Nuxt, Svelte, Gatsby, Astro and Laravel.

favicon htmlrev.com

So Let's begin and don't forget to drop a (πŸ”₯πŸ’–πŸ¦„πŸš€πŸ€―) and save it for later πŸ“Œ.

If you have any doubt then comment below πŸ’Œ.

Follow me on Githubβœ…


1. Find Value in Array πŸ”

Let's start with Basic One-Liner of how to Check if an Array contain a value or not.

// Array
const MyArray = [12,55,40,78,5];
// One-liner 
const haveValue = arr => arr.includes(5);
// Test
console.log("Answer ", haveValue(MyArray)) // Answer true

Enter fullscreen mode Exit fullscreen mode

This is the one-liner to see Array contain a Particular value or not. You can modify accourding to your needs.

2. Object Deep Clone πŸ’€

This one-Liner will make a Deep clone of your object:

const myObj = {
  "name": "Md Taqui Imam",
  "age": 22,
  "country": "india"
};

const deepClone = obj => JSON.parse(JSON.stringify(obj));

console.log("Answer ", deepClone(myObj));

// Answer Object {"name": "Md Taqui Imam","age": 22,"country": "india"}
Enter fullscreen mode Exit fullscreen mode

And thanks to @jonrandy contribuiting about one more shortest and easier way to clone objects in javascript with structuredClone( )

const myObj = {
  "name": "Md Taqui Imam",
  "age": 22,
  "country": "india"
};

const deepClone = structuredClone(myObj) // with  structuredClone

console.log("Answer ", deepClone);

Enter fullscreen mode Exit fullscreen mode

3. Scroll To Top πŸ“ƒ

This is the One-Liner that instantly navigates you to the Top of the Page :

window.scrollTo(0, 0) // navigate to Top
Enter fullscreen mode Exit fullscreen mode

4. Truncate a String To a Specific Length "..."⭐

This One-Liner is to Truncate a String and add "..." to an End on a specific given Length :

const myString = "Lorem ipsum is simply dummy text of the printing and typesetting industry.";

const truncate = (str, len) => str?.length > len ? str.slice(0, len) + "..." : str;

console.log("Answer", truncate(myString, 52)); 
// Answer Lorem ipsum is simply dummy text of the printing and...
Enter fullscreen mode Exit fullscreen mode

5. Remove Duplicated item in πŸ‘‰ [ ]

This one-Liner will return a new Array without repeating duplicated item from an Array :

const myArr = [4,8,3,9,4];

const duplicate = arr => [...new Set(arr)]

console.log("Answer ", duplicate(myArr));

 // Answer (4) [4, 8, 3, 9]
Enter fullscreen mode Exit fullscreen mode

6. Check all are same πŸ€” or not

This one-liner will help you to check that all item of an Array are same/identical or Not :

const myArr = [4,4,4,4,4];

const allSame = arr => arr.every(val => val === arr[0]);

console.log("Answer ", allSame(myArr));

 // Answer true
Enter fullscreen mode Exit fullscreen mode

7. Get last item from πŸ‘‰ [ ]

Now, Last one-liner will help you to get the last item of an array :

const myArr = [4,8,2,9,1,6];

const lastItm = arr => arr[arr.length - 1];

console.log("Answer", lastItm(myArr));

 // Answer 6
Enter fullscreen mode Exit fullscreen mode

See you in next week πŸ˜…

I hope you find this Blog post helpful and these 7 one-liners will help you to make your code base size smaller, and boost you productivity.

Have a nice dayπŸ‘‹

github

twitter

portfolio

buymeacoffee

Top comments (13)

Collapse
 
ranjancse profile image
Ranjan Dailata • Edited

Improved code for deep cloning of objects.

function deepClone(obj) {
  // Check if the input is an object
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  return JSON.parse(JSON.stringify(obj));
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
random_ti profile image
Random

Thankyou Ranjan for your contribuition πŸ™

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Further improved code - use the native structuredClone:

const clone = structuredClone(obj)
Enter fullscreen mode Exit fullscreen mode

Faster, less problems, more options.

Thread Thread
 
random_ti profile image
Random

this is πŸ”₯

Collapse
 
joolsmcfly profile image
Julien Dephix

Hi.

You can add js next to the opening backticks to have syntax highlight.

Also note that JSON.stringify will work as you'd expect if properties are booleans, numbers etc. Functions, Maps, Sets will be omitted or null'd.

Check the doc for more info.

Collapse
 
random_ti profile image
Random

Thankyou so much julien, i really don't know about this js syntax feature of dev to.

Collapse
 
joolsmcfly profile image
Julien Dephix • Edited

It can be any supported language too.

<p class="greeting">Hello from HTML</p>
Enter fullscreen mode Exit fullscreen mode
echo "Hello from PHP";
Enter fullscreen mode Exit fullscreen mode

etc

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Thank you. For #5, Is it dublicate or duplicate?

Collapse
 
random_ti profile image
Random

Sorry its duplicate πŸ˜… Thankyou for informing me

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

You're welcome

Collapse
 
devluc profile image
Devluc

Awesome tips Taqui, thanks for sharing them

Collapse
 
milanx profile image
Milan Mohapatra

Looking coolπŸ”₯, how can I add buttons and follow me sections like you.

Collapse
 
random_ti profile image
Random • Edited

It is called CTA(call to action) button.

This is the syntax to add CTA πŸ‘‡ Button

{% cta https://example.com %} Follow me in Githubβœ…{% endcta %}
Enter fullscreen mode Exit fullscreen mode

Replace "example.com" and "Follow me in Github" accourding to you.

😊