Table of contents
- 18 JavaScript One-Liners That’ll Make You Look Like a Pro
- Introduction
- 1. Convert String to Number
- 2. Swap Values Without Temporary Variables
- 3. Find Maximum and Minimum in an Array
- 4. Check if Array Contains a Specific Value
- 5. Remove Falsy Values from an Array
- 6. Merge Arrays
- 7. Flatten an Array of Arrays
- 8. Generate a Random Number within a Range
- 9. Count Occurrences of Elements in an Array
- 10. Capitalize the First Letter of a String
- 11. Check if Object is Empty
- 12. Find Unique Values in an Array
- 13. Check if Variable is a Number
- 14. Reverse a String
- 15. Find Average of Array Elements
- 16. Convert Fahrenheit to Celsius
- 17. Truncate a String
- 18. Check Palindrome
- Conclusion
- FAQ Section
Permalink18 JavaScript One-Liners That’ll Make You Look Like a Pro
PermalinkIntroduction
Are you looking to level up your JavaScript skills? Mastering concise and elegant code can make you stand out as a professional developer. In this article, we'll explore 18 JavaScript one-liners that not only demonstrate your proficiency but also showcase the beauty and power of the language. Each example is carefully crafted to address common scenarios, providing detailed explanations and practical applications. Let's dive in and enhance your coding prowess!
Permalink1. Convert String to Number
const num = +"42";
This simple one-liner converts a string to a number using the unary plus operator. It's a handy trick when dealing with user inputs or API responses where data types may vary.
Permalink2. Swap Values Without Temporary Variables
let a = 1, b = 2;
[b, a] = [a, b];
By leveraging array destructuring, you can swap values between variables without needing a temporary variable. This concise syntax improves code readability and reduces the number of lines.
Permalink3. Find Maximum and Minimum in an Array
const numbers = [5, 3, 9, 1, 7];
const max = Math.max(...numbers);
const min = Math.min(...numbers);
Using the spread operator (...) with Math.max
and Math.min
functions allows you to find the maximum and minimum values in an array effortlessly.
Permalink4. Check if Array Contains a Specific Value
const array = [1, 2, 3];
const containsThree = array.includes(3);
The includes
method checks if an array contains a specific value, returning true or false accordingly. It's a concise alternative to traditional looping or indexOf
checks.
Permalink5. Remove Falsy Values from an Array
const array = [0, 1, false, 2, '', 3];
const filteredArray = array.filter(Boolean);
Using the filter
method with the Boolean
constructor as the callback function removes all falsy values (e.g., 0, false, '', null, undefined) from the array, leaving only truthy values behind.
Permalink6. Merge Arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
Combining arrays can be achieved elegantly by spreading their elements into a new array. This method is efficient and maintains the original arrays' integrity.
Permalink7. Flatten an Array of Arrays
const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flatArray = [].concat(...nestedArray);
To flatten an array of arrays, you can use the concat
method along with the spread operator. This approach creates a new array containing all the elements from the nested arrays.
Permalink8. Generate a Random Number within a Range
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const randomNumberInRange = randomNum(1, 100);
This one-liner defines a function to generate a random integer within a specified range. It's a useful utility for various applications, such as games or simulations.
Permalink9. Count Occurrences of Elements in an Array
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCount = fruits.reduce((acc, fruit) => (acc[fruit] = (acc[fruit] || 0) + 1, acc), {});
Using the reduce
method, you can efficiently count the occurrences of elements in an array and store the results in an object. This approach provides a concise and readable solution.
Permalink10. Capitalize the First Letter of a String
const capitalizeFirstLetter = str => str.charAt(0).toUpperCase() + str.slice(1);
const capitalizedString = capitalizeFirstLetter('hello');
By combining string methods like charAt
, toUpperCase
, and slice
, you can capitalize the first letter of a string. This function is handy for formatting text inputs or displaying titles.
Permalink11. Check if Object is Empty
const isEmptyObject = obj => Object.keys(obj).length === 0;
const empty = {};
const notEmpty = { key: 'value' };
const emptyCheck = isEmptyObject(empty); // true
const notEmptyCheck = isEmptyObject(notEmpty); // false
This concise function determines whether an object is empty by checking if it has any enumerable properties. It's a useful validation tool in various scenarios.
Permalink12. Find Unique Values in an Array
const array = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArray = [...new Set(array)];
Using a combination of the Set
object and the spread operator, you can quickly remove duplicate values from an array, leaving only unique elements behind.
Permalink13. Check if Variable is a Number
const isNumber = value => typeof value === 'number' && isFinite(value);
const numCheck = isNumber(42); // true
const strCheck = isNumber('42'); // false
This one-liner verifies whether a variable is a number by checking its type and finite nature. It's a robust method for type checking and validation.
Permalink14. Reverse a String
const reversedString = str => str.split('').reverse().join('');
const reversed = reversedString('hello');
By chaining string methods like split
, reverse
, and join
, you can quickly reverse the characters in a string. This function is efficient and easy to understand.
Permalink15. Find Average of Array Elements
const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((sum, num) => sum + num, 0) / numbers.length;
Using the reduce
method, you can calculate the sum of array elements and then divide by the array length to find the average. This approach provides a concise solution for statistical calculations.
Permalink16. Convert Fahrenheit to Celsius
const fahrenheitToCelsius = f => (f - 32) * 5 / 9;
const celsius = fahrenheitToCelsius(212); // 100
This simple function converts temperature from Fahrenheit to Celsius using the standard conversion formula. It's a practical utility for weather-related applications.
Permalink17. Truncate a String
const truncateString = (str, maxLength) => str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
const truncated = truncateString('Lorem ipsum dolor sit amet', 10);
By using a ternary operator, you can truncate a string to a specified length and append ellipsis (...) if necessary. This function ensures text fits within designated spaces without sacrificing readability.
Permalink18. Check Palindrome
const isPalindrome = str => str === str.split('').reverse().join('');
const palindromeCheck
= isPalindrome('racecar'); // true
This concise function determines whether a string is a palindrome by comparing it to its reversed version. It's a neat solution for validating symmetry in textual data.
PermalinkConclusion
Mastering JavaScript one-liners empowers you to write concise, efficient, and expressive code. By understanding these examples and applying them in your projects, you'll elevate your programming skills and impress your peers with your proficiency. Experiment with these techniques, explore additional functionalities, and continue your journey towards becoming a JavaScript pro!
PermalinkFAQ Section
PermalinkQ: Are one-liners always the best approach in JavaScript?
A: While one-liners can be elegant and efficient, they're not always the most appropriate solution. Consider factors like readability, maintainability, and performance when deciding whether to use one-liners or longer, more descriptive code.
PermalinkQ: Can one-liners replace traditional coding practices?
A: One-liners are valuable tools in a developer's arsenal, but they shouldn't replace fundamental coding practices entirely. It's essential to strike a balance between brevity and clarity to ensure code is understandable and maintainable by yourself and others.
PermalinkQ: How can I practice writing JavaScript one-liners?
A: To hone your skills in crafting JavaScript one-liners, practice solving small coding challenges or tasks using concise solutions. Explore different JavaScript features, experiment with various techniques, and analyze existing code snippets to understand their underlying principles.
PermalinkQ: Are there any performance implications of using one-liners?
A: While one-liners can be concise and elegant, they may not always be the most performant solution. It's crucial to benchmark and profile your code, especially when dealing with large datasets or critical performance scenarios, to ensure that one-liners meet your performance requirements.
PermalinkQ: Where can I find more JavaScript one-liners and tips?
A: Explore online resources, community forums, and coding platforms dedicated to JavaScript development. Engage with fellow developers, study open-source projects, and participate in coding challenges to expand your knowledge and discover new one-liner techniques.