ā¤ Like
šŸ”– Save
šŸ”— Share
@thedevspaceio
@thedevspaceio

JavaScript Objects Cheatsheet

@thedevspaceio

šŸ§± JavaScript Objects Cheatsheet

Objects are the foundation of data organization in JavaScript. They store collections of key-value pairs and provide methods for manipulation and access.

This cheatsheet provides a quick reference of the fundamental concepts such as object creation, property iteration, copying and merging, property descriptors, immutability helpers, property checking methods, and so on.

āœ… Object methods and operations āœ… Creating objects āœ… Accessing properties āœ… Iterating objects āœ… Copying and merging āœ… Property descriptors āœ… Immutability helpers āœ… Checking properties āœ… Prototypes

#javascript #objects #objectkeys #objectentries #spread #prototype #freeze #seal #descriptors #webdev

Object methods and operations

MethodDescription
Object.keys()Returns an array of own enumerable property names.
Object.values()Returns an array of own enumerable property values.
Object.entries()Returns an array of [key, value] pairs.
Object.fromEntries()Creates an object from [key, value] pairs.
Object.assign()Copies properties from source objects to a target.
Object.create()Creates a new object with a specified prototype.
Object.defineProperty()Defines or modifies a property with a descriptor.
Object.defineProperties()Defines or modifies multiple properties.
Object.getOwnPropertyDescriptor()Returns the descriptor for a property.
Object.getOwnPropertyNames()Returns all own property names.
Object.getOwnPropertySymbols()Returns all own symbol properties.
Object.freeze()Prevents modifications to an object.
Object.seal()Prevents adding/removing properties.
Object.preventExtensions()Prevents adding new properties.
Object.isFrozen()Checks if an object is frozen.
Object.isSealed()Checks if an object is sealed.
Object.isExtensible()Checks if new properties can be added.
Object.hasOwn()Checks if a property is an own property.
Object.getPrototypeOf()Returns the prototype of an object.
Object.setPrototypeOf()Sets the prototype of an object.
Object.is()Compares two values, including NaN and -0.

Creating objects

Object literal

js
const user = {
  name: "Alice",
  age: 30,
};

Object.create()

Creates an object with a specified prototype.

js
const proto = {
  greet() {
    return "hello";
  },
};
const obj = Object.create(proto);
obj.greet(); // "hello"
 
const dict = Object.create(null); // no prototype

Accessing properties

Dot and bracket notation

js
const o = { a: 1, "b-key": 2 };
o.a; // 1
o["b-key"]; // 2

Computed property names

js
const key = "name";
const user = { [key]: "Alice" };
user.name; // "Alice"

Iterating objects

Object.keys()

Returns an array of property names.

js
const o = { a: 1, b: 2 };
Object.keys(o); // ["a", "b"]

Object.values()

Returns an array of property values.

js
Object.values(o); // [1, 2]

Object.entries()

Returns an array of [key, value] pairs.

js
Object.entries(o); // [["a", 1], ["b", 2]]

Object.fromEntries()

Creates an object from [key, value] pairs.

js
const entries = [
  ["a", 1],
  ["b", 2],
];
Object.fromEntries(entries); // { a: 1, b: 2 }

Copying and merging

Spread syntax

js
const o = { a: 1, b: 2 };
const copy = { ...o, c: 3 }; // { a: 1, b: 2, c: 3 }

Object.assign()

Copies properties from source objects to a target.

js
const target = { a: 1 };
Object.assign(target, { b: 2 }, { c: 3 });
// target is { a: 1, b: 2, c: 3 }

Property descriptors

Object.defineProperty()

Defines or modifies a property with a descriptor.

js
const obj = {};
Object.defineProperty(obj, "name", {
  value: "Alice",
  writable: false,
  enumerable: true,
  configurable: false,
});
obj.name = "Bob"; // ignored in strict mode

Object.getOwnPropertyDescriptor()

Returns the descriptor for a property.

js
Object.getOwnPropertyDescriptor(obj, "name");
// { value: "Alice", writable: false, enumerable: true, configurable: false }

Immutability helpers

Object.freeze()

Prevents adding, removing, or changing properties. Shallow freeze.

js
const o = { a: 1 };
Object.freeze(o);
o.a = 2; // ignored in strict mode

Object.seal()

Prevents adding or removing properties, but values can still be changed.

js
const o = { a: 1 };
Object.seal(o);
o.a = 2; // works
o.b = 3; // ignored

Object.preventExtensions()

Prevents adding new properties.

js
const o = { a: 1 };
Object.preventExtensions(o);
o.b = 2; // ignored

Checking properties

Object.hasOwn()

Checks if a property is an own property (not inherited).

js
const o = { a: 1 };
Object.hasOwn(o, "a"); // true
Object.hasOwn(o, "toString"); // false

in operator

Checks if a property exists anywhere in the prototype chain.

js
const user = { name: "Alice" };
 
"name" in user; // true (own property)
"toString" in user; // true (inherited from Object.prototype)
"age" in user; // false
 
// Compare with Object.hasOwn()
Object.hasOwn(user, "name"); // true
Object.hasOwn(user, "toString"); // false

Use in when you want to check inherited properties, and Object.hasOwn() when you only want own properties.

Prototypes

Object.getPrototypeOf()

Returns the prototype of an object.

js
const obj = {};
Object.getPrototypeOf(obj) === Object.prototype; // true
 
const arr = [];
Object.getPrototypeOf(arr) === Array.prototype; // true

Object.setPrototypeOf()

Changes the prototype of an object. Use carefully because it can hurt performance.

js
const animal = {
  speak() {
    return "sound";
  },
};
const dog = { breed: "lab" };
 
Object.setPrototypeOf(dog, animal);
dog.speak(); // "sound"
Object.getPrototypeOf(dog) === animal; // true

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io