#lodash

[obscurejavascript]

A Simple Capitalize Function For JavaScript

In Lodash, there is no way to capitalize every word in a sentence which is useful for formatting strings for titles and other user displayed UI elements. Firstly, there is a capitalize function, but it is only meant for one word:

console.log(_.capitalize('test')); // Test console.log(_.capitalize('This string, ShouLD be ALL in title CASe')); // This string, should be all in title case

There are a bunch of other tactics using different Lodash functions, but they all miss significant edge cases. Which is why I chose such a complex example from above. Instead, the most correct strategy is to simply loop through each word and capitalize them all:

const sentence = 'This string, ShouLD be ALL in title CASe'; const result = sentence.split(' ') .map((word) => _.capitalize(word)) .join(' '); console.log(result); // This String, Should Be All In Title Case

Note that (_.words)[https://lodash.com/docs/4.17.11#words] removes some punctiation which is why I used a split instead.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/capitalizeSentence.js

[obscurejavascript]

Quick Object Searches in Arrays of Objects With KeyBy in JavaScript

keyBy takes an array of object and a property name then creates an object map of that property name to the corresponding array element. This is useful to make checks for various properties in arrays easier and faster. After doing the keyBy direct property tests can be used instead of find loops or other tactics. For example:

const cars = [ { id: 'miata', hp: 155, weight: 2400 }, { id: '4c', hp: 237, weight: 2465 }, { id: 'elise', hp: 217, weight: 2000 } ]; const carIds = keyBy(cars, 'id'); console.log('Cars found (keyBy)'); console.log('miata:', 'miata' in carIds); console.log('elise:', 'elise' in carIds); console.log('ferrari:', 'ferrari' in carIds); // miata: true // elise: true // ferrari: false

The only disadvantage is that the array must be looped through once to create the key-value object:

function keyBy(arr, propertyName) { const obj = {}; for (const ele of arr) { obj[ele[propertyName]] = ele; } return obj; }

keyBy is available in utility libraries like Lodash: https://lodash.com/docs/4.17.15#keyBy

Github Location https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/keyBy.js

[obscurejavascript]

Switching Keys and Values in JavaScript

A simple invert function can do this. Here is how it works:

const obj = { a: 1, b: 2, c: 3 }; console.log(invert(obj)); // { '1': 'a', '2': 'b', '3': 'c' }

This is useful when there is a list of names to ids. Sometimes you will need to check if an id exists in that list. If this is done in a loop, it is usually much faster to check an inverted id to name object that is created before the loop:

function hasIds(obj, ids) { const byId = invert(obj); return ids.map((id) => byId[id] !== undefined); } const cars = { 'miata': 1, 'elise': 2, 'elan': 3 }; console.log(hasIds(cars, [1, 2, 5])); // [ true, true, false ]

The implementation for invert is simple:

function invert(obj) { const newObj = {}; for (const keyName in obj) { if (obj.hasOwnProperty(keyName)) { newObj[obj[keyName]] = keyName; } } return newObj; }

It is also available in many utility libraries like Lodash.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/invert.js

[obscurejavascript]

Using A Times Function To Simplify Nested Array Operations In JavaScript

This function just takes the number of times something should execute and just repeats that returning the result. Essentially abstracting a basic loop. This is useful for initialization. For example, to create a 2D array for storing when an object occupies coordinate in a space with arrays all this work would need to be done:

const size = 4; const coordinates = []; for (let index = 0; index < size; index += 1) { coordinates.push([]); for (let indexInner = 0; indexInner < size; indexInner += 1) { coordinates[index][indexInner] = 0; } }

Instead by using a times function, a lot of variable management and other work is simplified:

const size = 4; const coordinates = times(size, () => { return times(size, () => 0); });

The implementation code of times looks like this:

function times(number, callback) { const results = []; for (let index = 0; index < number; index += 1) { results.push(callback(index)); } return results; }

That version and Lodash's one only return arrays, but the above could be tweaked easily to support other data structures like object literals.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/times.js

[obscurejavascript]

Mapping Objects in JavaScript

mapValues is a way to manipulate Objects by iterating through thier values like you would do with map on Arrays. For an example where this is useful, there is an Object to track where columns in a grid are inserted. The keys are the column names and the values are the positions from 0. Later a new grid is made with a new column so all other ids must be shifted:

const grid1Columns = { name: 0, location: 1, url: 2, }; // Later another grid is added that is based on the current one let grid2Columns = {...grid1Columns}; grid2Columns.id = -1; grid2Columns = mapValues(grid2Columns, (index) => index + 1); console.log(grid1Columns); // { name: 0, location: 1, url: 2 } console.log(grid2Columns); // { name: 1, location: 2, url: 3, id: 0 }

mapKeys just does the same, but with keys:

grid2Columns = mapKeys(grid2Columns, (name) => name + 'Column'); console.log(grid2Columns); // { nameColumn: 1, locationColumn: 2, urlColumn: 3, idColumn: 0 }

Finally, a mapObject can be used to do everything at once instead:

const grid2ColumnsB = mapObject({ id: -1, ...grid1Columns}, (index, name) => { return { key: name + 'Column', value: index + 1 }; }); console.log(grid2ColumnsB); // { idColumn: 0, nameColumn: 1, locationColumn: 2, urlColumn: 3 }

Many utility libraries like Lodash support mapValues and mapKeys. Though there seems to be no general mapObject. Probably, because it is rare that both operations would want to be done in real world situations.

Here are the implementations of each function without libraries:

function mapValues(obj, callback) { // Make sure the original object is not modified const newObj = {}; for (let key in obj) { newObj[key] = callback(obj[key]); } return newObj; } function mapKeys(obj, callback) { // Make sure the original object is not modified const newObj = {}; for (let key in obj) { const newKey = callback(key); newObj[newKey] = obj[key]; } return newObj; } function mapObject(obj, callback) { // Make sure the original object is not modified const newObj = {}; for (let keyInObj in obj) { const {key, value} = callback(obj[keyInObj], keyInObj); newObj[key] = value; } return newObj; }

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/mapObject.js

[obscurejavascript]

Using Compact To Simplify Conditional Logic In JavaScript

compact takes an array an outputs an array with all falsy values removed. For example:

console.log(compact([1,2,3,'',null,undefined,4])); // [ 1, 2, 3, 4 ]

Where it is useful is when creating a list of results where some logic determines that certian list elements are included or not. The logic needed varies per list entry, so using a filter would not be that simple. For example, when updating information on only the present information

// Simulated api calls function updateUser(user) { return new Promise((resolve) => { setTimeout(() => { console.log('Updating user', user); resolve(); }, 200); }); } function updateAccount(account) { return new Promise((resolve) => { setTimeout(() => { console.log('Updating account', account); resolve(); }, 500); }); } async function getBasicData(user, account) { await Promise.all(compact([ user ? updateUser(user) : null, account ? updateAccount(account) : null, ])); } async function runTests() { await getBasicData(); // (nothing executed) await getBasicData({ name: 'User 2' }); // Updating user { name: 'User 2' } await getBasicData({ name: 'User 2' }, { name: 'Account 2' }); // Updating user { name: 'User 2' } // Updating account { name: 'Account 2' } } runTests();

Compact is available in most utility libraries like Lodash, but is also very simple in plain JavaScript:

function compact(arr) { if (Array.isArray(arr)) { return arr.filter((element) => Boolean(element)); } return []; }

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2019/compact.js

[obscurejavascript]

Get Object Property Paths Safely In JavaScript

Getting object property paths can be tricky on complex objects, because just one property being empty will trigger an error. For example, when getting page menu data from an API:

function getPageMenu() { return [ { title: 'Dashboard', location: { fullUrl: 'https://my-website.com/dashboard/user1', shortUrl: 'https://goo.gl/929okH' } }, { title: 'Logout', // No location since it redirects to a login page } ] } function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { // Error here console.log(page.location.fullUrl); } } printAllPageLinks();

There will be an error with the console.log above. Normally, these links would be used in a UI, but this is just for example purposes. To avoid this, the && syntax can be used:

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, page.location && page.location.fullUrl); } }

This is ok, but it is verbose and will look confusing to anyone not very familiar with Javascript as this syntax does not appear in any other very popular languages (that I am aware of). Instead, a get function can be used from Lodash (there are similar alternatives in many other utility libraries):

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, _.get(page, 'location.fullUrl')); } }

The processing will be slower due to the interpretation of the string properties, but that is the only drawback. For the most part this level of efficiency will not matter. Since the implentation for the above is complex (e.g. it should support arrays too), I will not be showing a simple example like usual.

Finally, there is a JavaScript feature proposal called Optional Chaining in the works for language syntax support. Just keep in mind it is early in the process being stage 1 and may never actually make it into the language:

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, page.?location.?fullUrl); } }

Github Location https://github.com/Jacob-Friesen/obscurejs/blob/master/2018/getValue.js

[obscurejavascript]

Generic Size Finding in JavaScript

Find the size of various objects in JavaScript often involves unique syntax for each type which makes all of that harder to remember and code more complex:

const _ = require('lodash'); const cars = [ { id: 'miata', hp: 155 }, { id: '4c', hp: 237 }, { id: 'elice', hp: 217 } ]; const uniqueCars = new Set(); uniqueCars.add(cars[0].id); uniqueCars.add(cars[1].id); uniqueCars.add(cars[2].id); uniqueCars.add(cars[0].id); uniqueCars.add(cars[1].id); console.log('Custom size:'); console.log(cars.length); // 3 console.log(Object.keys(cars[0]).length); // 2 console.log(cars[0].id.length); // 5 console.log(uniqueCars.size); // 3

A size function can be used to alleviate this. Here is an example using Lodash's function:

console.log(_.size(cars)); // 3 console.log(_.size(cars[0])); // 2 console.log(_.size(cars[0].id)); // 5 console.log(_.size(uniqueCars)); // 3 console.log(_.size(carsById)); // 2

Note that Lodash does not handle ArrayBuffer or DataView for size:

const buffer = new ArrayBuffer(8); // Get 4 bytes from the start const view = new DataView(buffer, 0, 4); console.log(_.size(buffer)); // 0 console.log(_.size(view)); // 0

Anyways, here is how it is done with custom code (This one supports ArrayBuffer):

function size(value) { if (typeof value === 'string') { return value.length; } // Note that the typeof null is object if (typeof value === 'object' && value !== null) { if ('size' in value) { return value.size; } if ('length' in value) { return value.length; } if ('byteLength' in value) { return value.byteLength; } return Object.keys(value).length; } return 0; }

Github Location https://github.com/Jacob-Friesen/obscurejs/blob/master/2018/size.js