30 Essential One‑Line JavaScript Tricks to Boost Your Coding Efficiency
This article presents a curated collection of concise one‑line JavaScript techniques—including array manipulation, string handling, object utilities, functional programming, date/time processing, DOM operations, and performance‑optimizing functions—each illustrated with clear code examples to boost developer productivity.
JavaScript is known for its flexibility and expressive power; here are several concise one‑line solutions that achieve complex functionality.
1. Array Operation Mastery
Array deduplication
const unique = arr => [...new Set(arr)];
// Example
const numbers = [1,2,2,3,3,4,5,5];
console.log(unique(numbers)); // [1, 2, 3, 4, 5]Array flattening
const flatten = arr => arr.flat(Infinity);
// Example
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6]Generate numeric range
const range = (start, end) => [...Array(end - start + 1)].map((_, i) => start + i);
// Example
console.log(range(1,5)); // [1, 2, 3, 4, 5]2. String Handling Tricks
Generate random string
const randomString = length => Math.random().toString(36).substring(2, length + 2);
// Example
console.log(randomString(10)); // "a1b2c3d4e5"String reversal
const reverse = str => str.split('').reverse().join('');
// Example
console.log(reverse('hello')); // "olleh"Palindrome check
const isPalindrome = str => str === str.split('').reverse().join('');
// Example
console.log(isPalindrome('radar')); // true
console.log(isPalindrome('hello')); // false3. Object Mastery
Deep clone object
const deepClone = obj => JSON.parse(JSON.stringify(obj));
// Example
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);Merge multiple objects
Extract object fields
4. Functional Programming Techniques
Function composition
Function currying
5. Date and Time Handling
Format date
Calculate time difference
6. DOM Manipulation Tricks
Collect all form data
Smooth scroll to top
7. Useful Utility Functions
Debounce function
Throttle function
const throttle = (fn, delay) => {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last >= delay) {
fn(...args);
last = now;
}
};
};
// Example
const throttledScroll = throttle(handleScroll, 100);Feel free to add more.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JavaScript
Provides JavaScript enthusiasts with tutorials and experience sharing on web front‑end technologies, including JavaScript, Node.js, Deno, Vue.js, React, Angular, HTML5, CSS3, and more.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
