JavaScript keeps growing and growing, opening doors for new “to be tech geeks” in the market as it’s one of the easiest languages to start. (is it really?)
It’s true that JavaScript can do a lot of blazing things! and there is just so much to learn.
And whether you’re new to JavaScript or more of a professional developer it’s always good to learn something new.
I’m gonna go over some really helpful one-liners (20 + Bonus) that can help you boost your productivity and can help in debugging code.
A one-liner is a code practice in which we perform some function in just one line of code.
This function will return a boolean (true or false) using Math.random() method. Math.random creates a random number between 0 and 1, after which we check if it is higher or lower than 0.5. That means it’s a 50/50 chance to get either true or false.
const getRandomBoolean = () => Math.random() >= 0.5; console.log(getRandomBoolean()); // a 50/50 chance of returning true or false
By this function, you’ll be able to check if the date that is provided is either a weekday or weekend.
const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1; console.log(isWeekend(new Date(2021, 4, 14))); // false (Friday) console.log(isWeekend(new Date(2021, 4, 15))); // true (Saturday)
Simple utility function to check if a number is even or odd.
const isEven = (num) => num % 2 === 0; console.log(isEven(5)); // false console.log(isEven(4)); // true
A very simple method to remove all duplicate values from an array. This function converts our array to a Set and then back to an array.
const uniqueArr = (arr) => [...new Set(arr)]; console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5])); // [1, 2, 3, 4, 5]
A clean and easy way to check if a variable is an array.
Well, there can be other ways too 😉
const isArray = (arr) => Array.isArray(arr); console.log(isArray([1, 2, 3])); // true console.log(isArray({ name: 'Ovi' })); // false console.log(isArray('Hello World')); // false
This will take two numbers as params and will generate a random number between those two numbers!
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min); console.log(random(1, 50)); // could be anything from 1 - 50
Maybe you need to create a temporary unique id for something, here’s a trick you can use to generate a random string on the go.
const randomString = () => Math.random().toString(36).slice(2); console.log(randomString()); // could be anything!!!
The window.scrollTo() method takes an x and y coordinate to scroll to. If we set these to zero and zero, we’ll scroll to the top of the page.
const scrollToTop = () => window.scrollTo(0, 0); scrollToTop();
Toggling a boolean value is one of the very basic programming problems, that can be solved in a lot of different ways. Instead of using if-statements to determine what value to set the boolean to, you could instead use the function to flip the current value using the ! “not” operator.
// bool is stored somewhere in the upperscope const toggleBool = () => (bool = !bool);
The below code is one of the simpler ways to swap two variables without using a third variable and with just one line of code.
[foo, bar] = [bar, foo];
To calculate the days between two dates, we first find the absolute between two dates and then divide it with 86400000 which is equal to milliseconds in a single day, and at the end, we round the result and return it.
const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000); console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25'))); // 199
PS: You might need to add a check to see if navigator.clipboard.writeText exists
const copyTextToClipboard = async (text) => { await navigator.clipboard.writeText(text); };
There are a couple of ways to merge arrays. One of them is using the “concat” method. Another one is using the spread operator (”…”).
PS: We can also any duplicates from the final array using the “Set” object.
// Merge but don't remove the duplications const merge = (a, b) => a.concat(b); // Or const merge = (a, b) => [...a, ...b]; // Merge and remove the duplications const merge = [...new Set(a.concat(b))]; // Or const merge = [...new Set([...a, ...b])];
People sometimes use libraries to find the actual type of something in JavaScript, this small trick can save your time (and code size).
const trueTypeOf = (obj) => { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); }; console.log(trueTypeOf('')); // string console.log(trueTypeOf(0)); // number console.log(trueTypeOf()); // undefined console.log(trueTypeOf(null)); // null console.log(trueTypeOf({})); // object console.log(trueTypeOf([])); // array console.log(trueTypeOf(0)); // number console.log(trueTypeOf(() => {})); // function
Need to truncate string from the end, not a problem!
const truncateString = (string, length) => { return string.length < length ? string : `${string.slice(0, length - 3)}...`; }; console.log( truncateString('Hi, I should be truncated because I am too loooong!', 36), ); // Hi, I should be truncated because...
How about truncating the string from the middle?
This function will take a string as the first param, then the size of string we need as 2nd argument, then how many chars we need from the start and end in 3rd and 4th param.
const truncateStringMiddle = (string, length, start, end) => { return `${string.slice(0, start)}...${string.slice(string.length - end)}`; }; console.log( truncateStringMiddle( 'A long story goes here but then eventually ends!', // string 25, // total size needed 13, // chars to keep from start 17, // chars to keep from end ), ); // A long story ... eventually ends!
Well, unfortunately, JavaScript does not have a built-in function to capitalize string, but this workaround can help you obtain the goal.
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
This simple helper method returns true or false depending on if a tab is in view/focus
const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
This will return true if the user is on an Apple device
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
This is a great code saver when you want to write an if..else statement in just one line.
// Longhand const age = 18; let greetings; if (age < 18) { greetings = 'You are not old enough'; } else { greetings = 'You are young!'; } // Shorthand const greetings = age < 18 ? 'You are not old enough' : 'You are young!';
When assigning a variable value to another variable, you may want to ensure that the source variable is not null, undefined, or empty. You can either write a long if statement with multiple conditionals, or use a short-circuit evaluation.
// Longhand if (name !== null || name !== undefined || name !== '') { let fullName = name; } // Shorthand const fullName = name || 'buddy';
That’s all folks! Hope you found this helpful, see you in the next one 😉