Objects in Javascript

Objects in JavaScript are fundamental structures that represent entities with properties and behaviors.

An object is essentially a collection of key-value pairs, where the keys are called properties and the values can be data or functions (known as methods).

Objects allow you to model real-world things and their attributes in your code.

Creating Objects in JavaScript

There are several ways to create objects, each useful in different contexts:

1. Object Literal Syntax

The simplest and most common way to create an object is by enclosing key-value pairs in curly braces:

var person = { name: 'John', age: 25, height: 160 };

2. Constructor Function

You can define a constructor function to create multiple objects with the same structure:

function Person(name, age) { this.name = name; this.age = age; } var person1 = new Person('John', 25); var person2 = new Person('Jane', 30);

3. Using the Object Constructor

This syntax is less common but sometimes used:

var person = new Object({ name: 'John', age: 25, sayHello: function() { console.log('Hello'); } });

Accessing and Modifying Object Properties

You can access or set properties using the dot notation or bracket notation:

console.log(person.name); // John person.age = 26; // Update property console.log(person['height']); // 160 person['height'] = 165; // Update property

Object Methods and the this Keyword

Objects can hold methods, which are functions that belong to the object:

var person = { name: 'John', age: 25, sayHello: function() { console.log('Hello ' + this.name); } }; person.sayHello(); // Outputs: Hello John

Here, this refers to the current object, making it easy to access other properties within methods.

Example: Player Object with Force Property

Let's create a more interactive example with a player object that has a force property which can be increased and displayed:

var player = { force: 10, increaseForce: function() { this.force += 1; }, messageForce: function() { console.log("Force is " + this.force); } }; player.messageForce(); // Force is 10 player.increaseForce(); player.messageForce(); // Force is 11

Advanced Object Concepts (2025 Updates)

Object Destructuring

Easily unpack properties from objects into variables:

var { name, age } = person; console.log(name); // John console.log(age); // 25

Property Shorthand

When property names and variable names match, you can use shorthand in object literals:

var name = 'John'; var age = 25; var person = { name, age };

Computed Property Names

Create property names dynamically:

var propName = 'score'; var player = { [propName]: 100 }; console.log(player.score); // 100

Object.assign() and Spread Operator

To merge objects or clone them:

var defaults = { force: 10, level: 1 }; var player = { name: 'John' }; // Using Object.assign var newPlayer = Object.assign({}, defaults, player); // Using spread operator var newPlayer2 = { ...defaults, ...player };

Classes (ES6+)

Modern syntax for creating objects based on a blueprint:

class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log('Hello, my name is ' + this.name); } } let person1 = new Person('John', 25); person1.sayHello();

Prototypes and Inheritance

JavaScript objects have prototypes, allowing inheritance of properties and methods:

function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log('Hello ' + this.name); }; var person1 = new Person('John'); person1.sayHello();

Running JavaScript Objects with Node.js

You can execute JavaScript files containing object code outside the browser by using Node.js. In the following link we explain how to install node on your computer and its use.

For example, save the following in a file named test.js:

var person = { name: 'John', age: 25, sayHello: function() { console.log('Hello ' + this.name); } }; console.log(person.name); person.sayHello();

Run the file via terminal or command prompt with:

node test.js

This will output:

John Hello John