Forem: Justin

JS Challenge: Check if all elements in an array are the same

Justin — Tue, 15 Aug 2023 15:29:30 +0000

One solution is to verify each element in the array is equal to the first element of the array.

Alternately we can also filter which are not equal to the first element and verify the resulting array length is zero.

arr1 = [1, 1, 1, 1, 1];
arr2 = [1, 1, 0, 1, 1];

arr1.every((e,i,a) => e === a[0]); //returns true
arr2.every((e,i,a) => e === a[0]); //returns false

//OR

arr1.filter((e,i,a) => e !== a[0]).length===0; //returns true
arr2.filter((e,i,a) => e !== a[0]).length===0; //returns false

JS Challenge: Sum of the values of an object's properties

Justin — Thu, 10 Aug 2023 16:45:25 +0000

Steps involved:

Get the object's values into an array using Object.values()
Use Array.prototype.reduce() to find the sum of the values

expenses = {grocery: 23.45, cleaners: 17.88, uber: 12.25, tip: 2.00}
Object.values(expenses).reduce((total, value) => 
  total + value, 0
) //returns the sum of values -> 55.58

JS Challenge: Check if an array has all its values sorted in the ascending order

Justin — Wed, 09 Aug 2023 16:20:12 +0000

We can use every() method of array to check if condition is true for every element of the array. So our solution using every() method goes like this:

arr1 = [1, 2, 3, 4, 6, 5];
arr2 = [1, 2, 3, 4, 5, 6];

arr1.every((element, index, array) => 
  index === 0 || element >= array[index - 1]
)

arr2.every((element, index, array) => 
  index === 0 || element >= array[index - 1]
)

JS Challenge: Count the occurrences of a character/pattern in a string

Justin — Tue, 08 Aug 2023 14:58:57 +0000

Method 1: split() the string at the occurrences of the character/pattern and add 1 to the length of the resulting array

Method 2: Create an array from the result of matchAll() and get its length

str = 'All is well and ends well';
char = 'l';

str.split(char).length - 1;

//OR this works too

[...str.matchAll(char)].length

JS Challenge: Reverse the characters of each word in a string

Justin — Mon, 07 Aug 2023 15:41:32 +0000

The solution is to create an array of the characters in the string by using the split() function, reverse the array and then join the characters back into a string using join() function.

str = 'Once upon a time there was clean fresh air';
str.split(' ').map(word => 
  word.split('').reverse().join('')
).join(' ');

//To reverse the order of words in the string too

str.split(' ').map(word => 
  word.split('').reverse().join('')
).reverse().join(' ');

JS Challenge: Check if a string is a palindrome

Justin — Thu, 03 Aug 2023 15:37:09 +0000

Any string, after removing whitespaces and punctuations, that reads the same when the order of letters is reversed - regardless of the case of letters - is considered a palindrome. For example:

'Was it a car or a cat I saw?'

So the steps involved are:

Convert the string to uniform case
Remove all non-alphabet characters from the string
Reverse the order of letters and check if it reads the same as the original string

const str = "Was it a car or a cat I saw?";
[...str.toLowerCase().replace(/[^a-z]/g, '')].join('') ===
 [...str.toLowerCase().replace(/[^a-z]/g, '')].reverse().join('')

JS Challenge: Create an array and fill with serial numbers

Justin — Wed, 02 Aug 2023 11:44:44 +0000

The following code creates and fills an array with numbers 0 to 9

[...Array(10).keys()]

Result: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

If you want the numbers from 1 to 10:

[...Array(10).keys()].map(i => i+1)

Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Or this should work as well:

Array(10).fill().map((v,i) => i+1)

Result: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

JS Challenge: Remove duplicates from an array

Justin — Tue, 01 Aug 2023 15:01:47 +0000

The first method below creates a new Set object with the elements of the array which eliminates all duplicates since a Set by definition cannot have duplicate elements. Then using the Spread operator creates a new Array from the elements of the Set.

The second method uses Array filter() method to filter out multiple occurrences of the same element - keeping only the first occurrence.

const arr = [1, 1, 2, 3, 3, 4, 4, 5];

let uniqueArr = [...new Set(arr)];

// OR this works too

uniqueArr = arr.filter((value, index, self) => 
  self.indexOf(value) === index);

JS Challenge: Fold a long line of text into lines of 80ish characters without breaking words

Justin — Mon, 31 Jul 2023 17:40:34 +0000

The challenge is to wrap text after every 80th character. If the 80th character is within a word, wrap after the word ends.

Solution:

const longLine = `This is a long line of text that needs to be \
folded after 80ish characters. If the 80th character \
happens to be within a word, wrap the line after the word`;

console.log(longLine.replace(/([^\n\r]{80})\s+/g, "$1\n"));

Basically the above code scans the long line of text for stretches of 80 characters without a line break followed by space(s) and inserts line breaks at those offsets.

If the 80th character falls within a word, the above code will forward to the end of that word and break there. But what if you don't want the lines to exceed 80 characters under no circumstances? In that case you need to go back to the end of the previous word and insert a line break there. The code below does exactly that:

const longLine = `This is a long line that needs to be folded \ 
into lines not more than 80 characters long without breaking \
words.`;

console.log(longLine.replace(/([^\n\r]{80}\s+)/g, 
  (m,g) => g.replace(/\s+([^\s]+\s*)$/, "\n$1")
));

JS Challenge: Convert snake_case to camelCase

Justin — Fri, 28 Jul 2023 03:43:41 +0000

I have seen many JavaScript snippets to convert strings in snake case to camel case. For example the following string:

SNAKE_casE

will look like this after conversion:

snakeCase

One snippet I have seen recently in a forum goes like this:

let str = 'SNAKE_casE';
const [firstPart, lastPart] = str.toLowerCase().trim().split("_");
const outputCamelCase = `${firstPart}${lastPart.replace(
  lastPart[0],
  lastPart[0].toUpperCase()
)}`;
console.log(outputCamelCase);

which will produce an output:

snakeCase

But what if the snake case string has multiple segments as below:

SNAKE_casE___WITH_muLtiPLE_SEGments

The code above can deal with only two segments.

Here is my take on the problem. This one-liner should work for any snake case string even those with multiple segments:

let str = 'SNAKE_casE___WITH_muLtiPLE_SEGments';
str.toLowerCase().replace(/_+(.)/g, (m, g) => 
  {return g.toUpperCase()}
);

First it converts the entire string to lower case. Then scans the string for occurrences of underscore(s) followed by a single character (.) and globally replaces those occurrences with the upper case of the character that follows the underscore(s). Notice the second argument in the call to replace() is a function - in this case it returns the character converted to upper case. If the second argument to replace() is a function it can take the match and the capture groups as arguments and return a value to replace the match. See the reference for a complete description.

Duplicating Line(s) in Chrome DevTools Editor

Justin — Mon, 05 Nov 2018 20:28:08 +0000

Here is a useful tip for those who want to quickly copy a single line or a number of adjacent lines while editing code in Chrome DevTools Editor. Prior to version 62, Chrome DevTools on Windows used to have this nifty feature to quickly duplicate a single line by pressing Ctrl+C followed by Ctrl+V on that line without selecting any text. Later versions of Chrome DevTools, for some reason, discontinued this extremely useful feature. Even the usual Windows method of drag and drop while pressing Ctrl key does not produce a copy of the selection in Chrome DevTools - but rather moves the selection. I have created a ticket in the Chromium project bugs tracker to reinstate this feature - but nothing has been done yet.

But recently I discovered a method to make the drag and drop copying to work: after selecting the text that you want to copy, if you press Ctrl key and start dragging the selection and then press Shift key while dropping the selection at the destination, it creates a copy of the selection at the destination. I noticed that the sequence of operation matters:

1. Press Ctrl key before you start dragging the selection

2. Press Shift key while dropping the selection at the destination

The version I have tested it is Chrome 70. YMMV. Hope it helps to some extent those who are still grieving - like me - the missing line duplication feature in Chrome DevTools editor on Windows.

How To Quickly Generate Google Fonts Preview

Justin — Tue, 31 Jul 2018 17:20:06 +0000

So many fonts are out there. How to preview and pick what we want? Here is how to generate a preview of the Google Fonts on a single web page using a bit of JavaScript:

Read my article on Medium