JavaScript uses a simple object model. An object is a collection of properties, where a property is an name-value
pair. The value of a property can also be a function; in this case, the property is called a method. Objects can be
compared to objects from everyday life (e.g., a cup has color, weight, material ...). JavaScript objects also have
properties that define their characteristics. In addition to predefined (built-in) objects in the browser, we can
also create our own – how, we will see in this tutorial. An object can be created with an object literal
(initializer) or with a constructor function and the new operator. Object literals are the most common
and clearest way.
Objects in JavaScript are collections of properties (name-value pairs). The most common way to create an object is
using an object literal ({}). Properties are accessed with a dot (obj.property) or brackets
(obj["property"]), which also allows dynamic naming.
The Object object offers numerous static methods for manipulation: keys(),
values() and entries() for inspecting properties, assign() for copying,
freeze() and seal() for protection, and is() for comparing values.
The table below shows all major ways to create, access, modify and protect objects, including methods of the
Object object and conversions to JSON. For each element, the description, syntax and concrete code
example are provided.
| Name | Description | Syntax | Example |
|---|---|---|---|
| Object Literal | Most common way to create an object. | const obj = { prop: "value" }; |
const person = { name: "Ana", age: 25 }; |
| Constructor (new) | Create an object using a constructor. | const obj = new Object(); |
const obj = new Object(); obj.name = "Ana"; |
| Custom Constructor | Create an object using a custom constructor function. | function Name() { ... } const obj = new Name(); |
function Person(n) { this.name = n; } const p = new Person("Ana"); |
| Object.create() | Create a new object with a specific prototype. | Object.create(prototype); |
const newObj = Object.create(person); |
| [.] (Dot) | Access property by name (if name is a valid identifier). | obj.property |
console.log(person.name); |
| [] (Brackets) | Access property with a string (useful for dynamic names or names with spaces). | obj["property"] |
console.log(person["name"]); |
| Dynamic Name | Dynamically specifying property name during creation. | { [expression]: "value" } |
const key = "name"; const obj = { [key]: "Ana" }; |
| Adding | Adding a new property to an existing object. | obj.property = value; |
person.surname = "Novak"; |
| Deleting | Removing a property from an object. | delete obj.property; |
delete person.age; |
| Checking Existence | Check if an object has a specific property. | "property" in obj or obj.hasOwnProperty("property") |
console.log("name" in person); // true |
| Object.keys() | Returns an array of all own property names (keys). | Object.keys(obj) |
Object.keys(person); // ["name", "age"] |
| Object.values() | Returns an array of all own property values. | Object.values(obj) |
Object.values(person); // ["Ana", 25] |
| Object.entries() | Returns an array of [key, value] pairs. | Object.entries(obj) |
Object.entries(person); // [["name", "Ana"], ["age", 25]] |
| Object.assign() | Copies properties from one or more sources to a target object. | Object.assign(target, source1, source2) |
Object.assign(person, { city: "LJ" }); |
| Object.freeze() | Freezes the object (properties cannot be added, deleted or modified). | Object.freeze(obj) |
Object.freeze(person); person.name = "Borut"; // will not work |
| Object.seal() | Seals the object (properties cannot be added or deleted, but can be modified). | Object.seal(obj) |
Object.seal(person); |
| Object.is() | Checks if two values are equal (stricter than `==`). | Object.is(val1, val2) |
Object.is(0, -0); // false |
| Object.hasOwn() | Checks if an object has a specific property (newer method). | Object.hasOwn(obj, "property") |
Object.hasOwn(person, "name"); // true |
| __proto__ | Access the object's prototype (less recommended, use `Object.getPrototypeOf`). | obj.__proto__ |
console.log(person.__proto__); |
| prototype | Property of a constructor that defines the prototype for all objects created with this constructor. | Constructor.prototype |
Person.prototype.greet = function() { ... }; |
| Object.getPrototypeOf() | Returns the prototype of an object. | Object.getPrototypeOf(obj) |
Object.getPrototypeOf(person); |
| Object.setPrototypeOf() | Sets the prototype of an object. | Object.setPrototypeOf(obj, prototype) |
Object.setPrototypeOf(person, newPrototype); |
| JSON.stringify() | Converts an object to a JSON string. | JSON.stringify(obj) |
JSON.stringify(person); // "{"name":"Ana","age":25}" |
| JSON.parse() | Converts a JSON string to an object. | JSON.parse(string) |
JSON.parse('{"name":"Ana"}'); // {name: "Ana"} |
| toString() | Returns a string representing the object (default "[object Object]"). | obj.toString() |
person.toString(); // "[object Object]" |
