Lodash propertyOf with an Array of Keys Explained

This article explains how the _.propertyOf method in the Lodash JavaScript library functions when handling an array of keys. It details how the returned path resolver processes key arrays for deep property navigation, why this approach protects against property name parsing issues, and how it handles both object hierarchies and indexed arrays.

Understanding _.propertyOf

The _.propertyOf method is a higher-order function that operates as the inverse of _.property. Instead of taking a property path and returning a function that reads that path from any object, _.propertyOf(object) takes an object and returns a function that accepts a path to read from that specific object.

const user = { name: 'Alex', age: 28 };
const getFromUser = _.propertyOf(user);

getFromUser('name'); // returns 'Alex'

Passing an Array of Keys as the Path

When you pass an array of keys to the function returned by _.propertyOf, Lodash interprets each array element as a sequential step down a nested object hierarchy.

Rather than accessing a shallow property, Lodash performs deep property resolution:

const state = {
  data: {
    users: [
      { id: 1, profile: { username: 'dev_user' } }
    ]
  }
};

const getState = _.propertyOf(state);

// Passing an array of keys and indices
const username = getState(['data', 'users', 0, 'profile', 'username']);
console.log(username); // Outputs: 'dev_user'

Each element in the array represents an exact property identifier or array index. If any key in the path does not exist, the function gracefully returns undefined instead of throwing a TypeError.

Why Use an Array of Keys Instead of a String Path?

While _.propertyOf also accepts dot-notation strings (such as 'data.users[0].profile'), using an array of keys provides two primary advantages:

1. Handling Keys with Dots or Special Characters: If an object key contains literal dot characters, string notation mistakenly treats them as path separators. Passing an array of keys treats each string element as a literal key.

   const config = {
     'api.endpoint.url': 'https://api.example.com'
   };
   
   const getConfig = _.propertyOf(config);
   
   // String path fails because it looks for config.api.endpoint.url
   getConfig('api.endpoint.url'); // returns undefined
   
   // Array path preserves the literal dot in the key name
   getConfig(['api.endpoint.url']); // returns 'https://api.example.com'

2. Avoiding Path Parsing Overhead: String paths must be parsed by Lodash into individual segments before traversing the target object. Supplying an array directly bypasses the string-to-path parsing step.

Passing an Array Directly into _.propertyOf

If an array of elements is passed directly as the argument to _.propertyOf(array), the returned function accesses items from that array using index keys:

const colors = ['red', 'green', 'blue'];
const getColor = _.propertyOf(colors);

getColor(1); // returns 'green'
getColor([2]); // returns 'blue'

When an array of keys is supplied as the path argument, _.propertyOf acts as a safe, nested property accessor that walks through object levels sequentially without risking runtime errors from missing parent keys.