We can all agree that searching for a Javascript bug fix or answer on Google or StackOverflow is not fun ðīââ ïļ.
Here are twenty short and powerful JavaScript techniques that will maximize productivity âĄïļ and minimize pain ðĐļ.
Let’s dive into the code ðĪ
Unique Array
Filter out duplicate values from an Array.
const arr = ["a", "b", "c", "d", "d", "c", "e"]
const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a', 'b', 'c', 'd', 'e']
Explanation
Unique Array of Objects
The Set object won’t allow you to filter out duplicate objects since each one is different. JSON.stringify does the trick for us here.
const arr = [{ key: 'value' }, { key2: 'value2' }, { key: 'value' }, { key3: 'value3' }];
const uniqueObjects = Array.from( new Set( arr.map(JSON.stringify) )
).map(JSON.parse) console.log(uniqueObjects);
Array Iterator Index
With the .map and .forEach javascript iteration functions, you can get the index of each item.
const arr = ['a', 'b', 'c'];
const letterPositions = arr.map( (char, index) => `${char} is at index ${index}`
)
Split string by # of chars
We can use the .match regular expression function to split a string by n characters.
const str = "asdfghjklmnopq";
const splitPairs = str.match(/.{1,2}/g); console.log(splitPairs); // ['as', 'df', 'gh', 'jk', 'lm', 'no', 'pq']
Explanation
In the regular expression /.{1,2}/g we used, the number 2 stands for how many characters we want to split by. If there is a remainder, this will still work.
Alternatively, if you want to split a string by n characters where n is subject to change, you can do it with new RegExp.
const splitPairsBy = (n) => str.match(new RegExp(`.{1,${n}}`, "g"))
Split string by different chars
Another regex hack with .match allows you to split a string like “aabbc” to an array ["aa", "bb", "c"].
const str = "abbcccdeefghhiijklll";
const splitChars = str.match(/(.)1*/g); console.log(splitChars); // ['a', 'bb', 'ccc', 'd', 'ee', 'f', 'g', 'hh', 'ii', 'j', 'k', 'lll']
Iterate through object
Object.entries allows us to turn a JSON object to an array of key-value pairs, thus enabling us to iterate through it with a loop or an array iterator.
const obj = { "key1": "value1", "key2": "value2", "key3": "value3"
};
const iteratedObject = Object.entries(obj) .map(([key, value]) => `${key} = ${value}`); console.log(iteratedObject); // ['key1 = value1', 'key2 = value2', 'key3 = value3']
Explanation
If obj is passed through Object.entries, it will look something like this:
[ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"]
]
Using the .map function alongside object destructuring lets us access the key-values.
Key-Value Array to Object
You can convert an “Object.entryified” array of key-values back to an object with Object.fromEntries
const entryified = [ ["key1", "value1"], ["key2", "value2"], ["key3", "value3"]
]; const originalObject = Object.fromEntries(entryified); console.log(originalObject); // { key1: 'value1', ... }
Explanation
Occurrence Counting
You might want to count how many times an item appears in an array. We can use the .filter function with an iterator to accomplish this.
const occurrences = ["a", "b", "c", "c", "d", "a", "a", "e", "f", "e", "f", "g", "f", "f", "f"];
// creating a unique array to avoid counting the same char more than once
const unique = Array.from(new Set(occurrences)); const occurrenceCount = Object.fromEntries( unique.map(char => { const occurrenceCount = occurrences.filter(c => c === char).length; return [char, occurrenceCount] })
) console.log(occurrenceCount); // { a: 3, b: 1, c: 2, ... }
Explanation
Replacement Callback
The .replace function doesn’t limit you to just replacing with a fixed string. You can pass a callback to it and use the matched substring.
const string = "a dog went to dig and dug a doggone large hole";
const replacedString = string.replace(/d.g/g, str => str + "gy") console.log(replacedString); // a doggy went to diggy and duggy a doggygone large hole
Explanation
Conditional chaining
Many of you are familiar with running into undefined errors in JS, conditional chaining can prevent a lot of that from happening.
The optional chaining (
?.) operator accesses an object’s property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.
const obj = { "a": "aaaaaaa", "b": null
}; console.log(obj.b.d); // throws an error console.log(obj.b?.d); // returns undefined
Explanation
Constrain a Number
Oftentimes you might need to contrain a number to be within a certain range. Doing it with the ternary operator every time you need it is a pain. A function is so much cleaner.
const constrain = (num, min, max) => { if(num < min) return min; else if(num > max) return max; else return num;
} constrain(5, 1, 3) // 3
constrain(2, 1, 5) // 2
constrain(0, -100, 100) // 0
Explanation
Indexing front and back of an array
The .at function allows you to index an array from the beginning and the end with positive and negative numbers.
const arr = [1, 2, 3, 4, 5]; arr.at(0) // 1
arr.at(1) // 2
arr.at(-1) // 5
arr.at(-2) // 4
Explanation
Sort alphabetically
Sort an array of strings alphabetically
const words = ["javascript", "typescript", "python", "ruby", "swift", "go", "clojure"];
const sorted = words.sort((a, b) => a.localeCompare(b)); console.log(sorted); // ['clojure', 'go', 'javascript', 'python', 'ruby', 'swift', 'typescript']
ðĄ Tip: You can switch the order between ascending and descending by switching a.localeCompare(b) to b.localeCompare(a)
Explanation
Sort by Truthy/Falsy value
You can sort an array by a truthy/falsy value, placing those with the truthy value first and the falsy values after.
const users = [ { "name": "john", "subscribed": false }, { "name": "jane", "subscribed": true }, { "name": "jean", "subscribed": false }, { "name": "george", "subscribed": true }, { "name": "jelly", "subscribed": true }, { "name": "john", "subscribed": false }
]; const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))
Number(false) is equal to zero and Number(true) is equal to one. That’s how we can pass it through the sort function.
Round Decimal to n digits
You can round a decimal to n digits with .toFixed. Note that .toFixed turns a number into a string, so we have to re-parse it as a number.
console.log(Math.PI); // 3.141592653589793
console.log(Number(Math.PI.toFixed(2)))
Explanation
Thanks for reading âĻ!
I’m open to feedback. If you have any thoughts or comments be sure to share them in the comments below.
Source: https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp