Which is Better JavaScript Object Property Access Libraries?
dot-prop vs lodash.get vs object-path vs open-props
1 Year
dot-proplodash.getobject-pathopen-propsSimilar Packages:
What's JavaScript Object Property Access Libraries?

These libraries facilitate the access and manipulation of nested object properties in JavaScript. They provide various utilities to safely retrieve, set, and manipulate properties within complex objects, which is particularly useful in scenarios where object structures are dynamic or deeply nested. Each library has its unique features and design principles, making them suitable for different use cases in web development.

NPM Package Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
dot-prop18,732,65281216.9 kB85 months agoMIT
lodash.get12,401,09659,686-1088 years agoMIT
object-path1,836,2411,059-343 years agoMIT
open-props19,5804,7001.01 MB90a month agoMIT
Feature Comparison: dot-prop vs lodash.get vs object-path vs open-props

Accessing Nested Properties

  • dot-prop: dot-prop allows you to easily access and set nested properties using a simple dot notation. It provides a clean and intuitive API for getting and setting values without the need for verbose code, making it ideal for quick property access.
  • lodash.get: lodash.get provides a powerful way to access nested properties with the ability to specify default values if the path does not exist. This feature enhances safety and reduces the risk of runtime errors, especially in complex data structures.
  • object-path: object-path offers advanced capabilities for accessing nested properties, including support for array indices and dynamic path construction. It allows for more complex queries and manipulations, making it suitable for intricate object structures.
  • open-props: open-props does not directly deal with object property access but instead focuses on CSS properties and design tokens, providing a way to manage and utilize design variables in a structured manner.

Performance

  • dot-prop: dot-prop is designed to be lightweight and efficient, making it a great choice for performance-sensitive applications. Its minimalistic approach ensures that it does not introduce significant overhead when accessing properties.
  • lodash.get: lodash.get is optimized for performance as part of the Lodash library, which is known for its efficiency. However, it may be slightly heavier than dot-prop due to its additional features and functionalities.
  • object-path: object-path is also optimized for performance, but its advanced features may introduce some overhead compared to simpler libraries. It is still efficient for most use cases, especially when dealing with complex nested structures.
  • open-props: open-props is not focused on performance in the context of object property access, as it is primarily a utility for managing CSS properties and design tokens.

Error Handling

  • dot-prop: dot-prop does not inherently provide error handling for non-existent paths; attempting to access a non-existent property will return undefined. This simplicity can be an advantage in scenarios where explicit error handling is not required.
  • lodash.get: lodash.get includes built-in error handling by allowing you to specify default values, which can prevent runtime errors when accessing properties that may not exist. This feature is particularly useful in dynamic applications.
  • object-path: object-path offers robust error handling capabilities, including the ability to return default values and handle array indices gracefully. This makes it a strong choice for applications where data integrity is critical.
  • open-props: open-props does not apply to error handling in the context of object property access, as it focuses on CSS properties and design tokens.

Use Cases

  • dot-prop: dot-prop is best suited for simple applications where quick access to nested properties is needed without additional overhead. It's ideal for lightweight projects or scripts that require minimal dependencies.
  • lodash.get: lodash.get is perfect for larger applications that already utilize Lodash and require a comprehensive solution for property access with additional utility functions. It fits well in complex data manipulation scenarios.
  • object-path: object-path is ideal for applications that deal with deeply nested objects and require advanced features like path manipulation. It's particularly useful in data-heavy applications where object structures can vary significantly.
  • open-props: open-props is tailored for design systems and theming in web applications, making it suitable for projects focused on UI consistency and design token management.

Learning Curve

  • dot-prop: dot-prop has a very low learning curve due to its simple API and straightforward functionality. Developers can quickly grasp how to use it for basic property access and manipulation.
  • lodash.get: lodash.get may require a bit more time to learn due to its integration within the larger Lodash library. However, its extensive documentation and community support make it accessible for developers familiar with Lodash.
  • object-path: object-path has a moderate learning curve, especially for developers who need to utilize its advanced features. Understanding its syntax for path manipulation may take some time but is manageable with practice.
  • open-props: open-props has a different focus and may require understanding CSS custom properties and design tokens, which could present a learning curve for developers primarily focused on JavaScript object manipulation.
How to Choose: dot-prop vs lodash.get vs object-path vs open-props
  • dot-prop: Choose dot-prop if you need a lightweight and straightforward solution for getting and setting nested properties using dot notation. It's ideal for simple use cases where performance is critical and you want minimal overhead.
  • lodash.get: Select lodash.get if you are already using Lodash in your project or need a robust utility with extensive functionality. It provides additional features like default values and is part of a larger suite of utilities, making it a good choice for complex applications.
  • object-path: Opt for object-path if you require advanced features like path manipulation and support for array indices. It's particularly useful when dealing with deeply nested objects and you need a more expressive syntax for property access.
  • open-props: Use open-props if you are looking for a utility that focuses on CSS custom properties and design tokens. It is not directly comparable to the others in terms of object property access, but it provides a unique approach to managing design systems and theming in web applications.
README for dot-prop

dot-prop

Get, set, or delete a property from a nested object using a dot path

Install

npm install dot-prop

Usage

import {getProperty, setProperty, hasProperty, deleteProperty} from 'dot-prop';

// Getter
getProperty({foo: {bar: 'unicorn'}}, 'foo.bar');
//=> 'unicorn'

getProperty({foo: {bar: 'a'}}, 'foo.notDefined.deep');
//=> undefined

getProperty({foo: {bar: 'a'}}, 'foo.notDefined.deep', 'default value');
//=> 'default value'

getProperty({foo: {'dot.dot': 'unicorn'}}, 'foo.dot\\.dot');
//=> 'unicorn'

getProperty({foo: [{bar: 'unicorn'}]}, 'foo[0].bar');
//=> 'unicorn'

// Setter
const object = {foo: {bar: 'a'}};
setProperty(object, 'foo.bar', 'b');
console.log(object);
//=> {foo: {bar: 'b'}}

const foo = setProperty({}, 'foo.bar', 'c');
console.log(foo);
//=> {foo: {bar: 'c'}}

setProperty(object, 'foo.baz', 'x');
console.log(object);
//=> {foo: {bar: 'b', baz: 'x'}}

setProperty(object, 'foo.biz[0]', 'a');
console.log(object);
//=> {foo: {bar: 'b', baz: 'x', biz: ['a']}}

// Has
hasProperty({foo: {bar: 'unicorn'}}, 'foo.bar');
//=> true

// Deleter
const object = {foo: {bar: 'a'}};
deleteProperty(object, 'foo.bar');
console.log(object);
//=> {foo: {}}

object.foo.bar = {x: 'y', y: 'x'};
deleteProperty(object, 'foo.bar.x');
console.log(object);
//=> {foo: {bar: {y: 'x'}}}

API

getProperty(object, path, defaultValue?)

Get the value of the property at the given path.

Returns the value if any.

setProperty(object, path, value)

Set the property at the given path to the given value.

Returns the object.

hasProperty(object, path)

Check whether the property at the given path exists.

Returns a boolean.

deleteProperty(object, path)

Delete the property at the given path.

Returns a boolean of whether the property existed before being deleted.

escapePath(path)

Escape special characters in a path. Useful for sanitizing user input.

import {getProperty, escapePath} from 'dot-prop';

const object = {
	foo: {
		bar: '👸🏻 You found me Mario!',
	},
	'foo.bar' : '🍄 The princess is in another castle!',
};
const escapedPath = escapePath('foo.bar');

console.log(getProperty(object, escapedPath));
//=> '🍄 The princess is in another castle!'

deepKeys(object)

Returns an array of every path. Non-empty plain objects and arrays are deeply recursed and are not themselves included.

This can be useful to help flatten an object for an API that only accepts key-value pairs or for a tagged template literal.

import {getProperty, deepKeys} from 'dot-prop';

const user = {
	name: {
		first: 'Richie',
		last: 'Bendall',
	},
	activeTasks: [],
	currentProject: null
};

for (const property of deepKeys(user)) {
	console.log(`${property}: ${getProperty(user, property)}`);
	//=> name.first: Richie
	//=> name.last: Bendall
	//=> activeTasks: []
	//=> currentProject: null
}

Sparse arrays are supported. In general, avoid using sparse arrays.

object

Type: object | array

Object or array to get, set, or delete the path value.

You are allowed to pass in undefined as the object to the get and has functions.

path

Type: string

Path of the property in the object, using . to separate each nested key.

Use \\. if you have a . in the key.

The following path components are invalid and results in undefined being returned: __proto__, prototype, constructor.

value

Type: unknown

Value to set at path.

defaultValue

Type: unknown

Default value.