Master JS Objects: Terminology and Concepts
Objects are the central data structure in JavaScript. These are the terms every developer should know precisely, with no ambiguity.
Objects are the central data structure in JavaScript. The following are the terms every developer should know precisely, with no ambiguity.
Object literal
An object created directly using curly brace syntax. It is the most common way to define an object.
const car = { make: 'Toyota', year: 2021 };
Property
A key-value pair stored on an object. Properties describe the data an object holds.
Key
The name that identifies a property. Keys are strings or Symbols. When written as plain identifiers in an object literal, JavaScript treats them as strings.
Value
The data associated with a key. A value can be any type: string, number, boolean, array, function, or another object.
Method
A property whose value is a function. There is no structural difference between a property and a method.
const obj = {
greet() {
return 'hello';
}
};
this
Inside a method, this refers to the object that called the method. It gives a method access to the other properties of its own object.
const person = {
name: 'Alice',
greet() {
return 'Hello, ' + this.name;
}
};
Dot notation
The standard way to access a property when the key is a known, valid identifier.
person.name; // 'Alice'
Bracket notation
Used when the key is dynamic, stored in a variable, or not a valid identifier.
const key = 'name';
person[key]; // 'Alice'
Own property
A property defined directly on the object itself, not inherited from its prototype.
person.hasOwnProperty('name'); // true
Inherited property
A property accessed through the prototype chain rather than defined on the object directly. toString() is an example available on every plain object, inherited from Object.prototype.
Prototype
An internal reference every JavaScript object holds. When a property is not found on the object itself, JavaScript looks for it on the prototype. Every object created with object literal syntax has Object.prototype as its prototype.
const person = { name: 'Alice' };
// person does not define toString, but it is available
// because it exists on Object.prototype
console.log(person.toString()); // [object Object]
// Confirm the prototype
console.log(Object.getPrototypeOf(person) === Object.prototype); // true
Prototype chain
The sequence of prototypes JavaScript traverses when looking up a property. The chain ends at null. This is why methods like hasOwnProperty and toString are available on all objects without being explicitly defined.
const personPrototype = {
greet() {
return 'Hello, ' + this.name;
}
};
const alice = Object.create(personPrototype);
alice.name = 'Alice';
alice.greet(); // 'Hello, Alice'
// alice does not have greet as its own property
console.log(alice.hasOwnProperty('greet')); // false
// JavaScript found greet by going up the chain to personPrototype
console.log(Object.getPrototypeOf(alice) === personPrototype); // true
// The chain: alice --> personPrototype --> Object.prototype --> null
console.log(Object.getPrototypeOf(personPrototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null
The last line confirms where the chain ends. If a property is not found at any point in the chain, JavaScript returns undefined.
Constructor function
A function used with the new keyword to create objects of a shared structure. By convention, constructor function names are capitalised.
function Person(name) {
this.name = name;
}
const alice = new Person('Alice');
new keyword
Creates a new object, sets its prototype to the constructor’s prototype property, executes the constructor with this bound to the new object, and returns it.
Enumerable
A property attribute. A property is enumerable when its internal enumerable flag is true. Properties created through normal assignment are enumerable by default. Enumerable properties appear in for...in loops and Object.keys().
Getter
A function associated with a property that runs when the property is read. Defined with the get keyword.
const person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return this.firstName + ' ' + this.lastName;
}
};
person.fullName; // 'John Doe'
Setter
A function that runs when a property is assigned a value. Defined with the set keyword. A setter receives exactly one argument: the new value.
const obj = {
_name: '',
set name(value) {
this._name = value.trim();
}
};
Object.keys(), Object.values(), Object.entries()
Built-in methods that return arrays of an object’s own enumerable string-keyed properties.
const car = { make: 'Toyota', year: 2021 };
Object.keys(car); // ['make', 'year']
Object.values(car); // ['Toyota', 2021]
Object.entries(car); // [['make', 'Toyota'], ['year', 2021]]
Destructuring
A syntax for extracting properties from an object into individual variables.
const { make, year } = car;
console.log(make); // 'Toyota'
Shallow copy
A copy of an object where the top-level properties are duplicated but nested objects still share the same reference.
const copy = Object.assign({}, car);
// or
const copy = { ...car };
Modifying a nested object inside copy will affect the original if the value is a reference type.
What to Do Now
Run Object.getOwnPropertyDescriptor on any property of a plain object to inspect its full attribute set including value, writable, enumerable and configurable:
const car = { make: 'Toyota' };
console.log(Object.getOwnPropertyDescriptor(car, 'make'));
// { value: 'Toyota', writable: true, enumerable: true, configurable: true }
This is the internal structure behind every property in JavaScript.