REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Creating Objects

AI & DATA SCIENCE // object-creating

Objects are key-value stores. Created with object literals {}, Object.create(), or constructor functions/classes.

Syntax

const obj = { key: 'value', num: 42 };
const obj2 = Object.create(proto);
const obj3 = new MyClass();

Deep Dive Course

Objects in JavaScript are collections of **key-value pairs** (properties). The most common way is the **object literal** `{}`. **Object.create()** allows setting the prototype directly. **Classes** and **constructor functions** create objects with shared prototype methods.

1Understanding Creating Objects

Objects in JavaScript are collections of key-value pairs (properties). The most common way is the object literal {}. Object.create() allows setting the prototype directly. Classes and constructor functions create objects with shared prototype methods.

💡

Use object literals {} for simple data. Use classes when you need multiple instances with shared methods.

editor.html

// Object literal
const person = {
  name: 'Alice',
  age: 30,
  greet() { return `Hi, I'm ${this.name}`; }
};
console.log(person.greet()); // Hi, I'm Alice

// Shorthand properties
const name = 'Bob', age = 25;
const bob = { name, age }; // { name: 'Bob', age: 25 }

localhost:3000

2Practical Example

Here is a real-world application of Creating Objects showing how it is used in production JavaScript code.

editor.html

// Object.assign to merge objects
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const config = Object.assign({}, defaults, userPrefs);
console.log(config);

localhost:3000

3Best Practices

Follow these guidelines when working with Creating Objects:

1. Use shorthand property names: { name } instead of { name: name }

2. Use computed property names: { [key]: value }

3. Prefer Object.freeze() for immutable configuration objects

⚠️

Tip: Use object literals {} for simple data. Use classes when you need multiple instances with shared methods.

editor.html

// Object literal
const person = {
  name: 'Alice',
  age: 30,
  greet() { return `Hi, I'm ${this.name}`; }
};
console.log(person.greet()); // Hi, I'm Alice

// Shorthand properties
const name = 'Bob', age = 25;
const bob = { name, age }; // { name: 'Bob', age: 25 }

localhost:3000

Examples

Example 01Basic Usage

// Object literal
const person = {
  name: 'Alice',
  age: 30,
  greet() { return `Hi, I'm ${this.name}`; }
};
console.log(person.greet()); // Hi, I'm Alice

// Shorthand properties
const name = 'Bob', age = 25;
const bob = { name, age }; // { name: 'Bob', age: 25 }

Example 02Advanced Example

// Object.assign to merge objects
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const config = Object.assign({}, defaults, userPrefs);
console.log(config);

Best Practices

Use shorthand property names: { name } instead of { name: name }
Use computed property names: { [key]: value }
Prefer Object.freeze() for immutable configuration objects

Interview Question

What is the difference between Object.create() and {}?▼

Hint: Prototype chain control.

Object literal {} creates an object whose prototype is Object.prototype. Object.create(proto) creates an object with a SPECIFIC prototype — or Object.create(null) creates an object with NO prototype (useful for pure hash maps without inherited properties like hasOwnProperty).

Exercises

MediumPractice using Creating Objects in a real scenario.

View Solution

// Object literal
const person = {
  name: 'Alice',
  age: 30,
  greet() { return `Hi, I'm ${this.name}`; }
};
console.log(person.greet()); // Hi, I'm Alice

// Shorthand properties
const name = 'Bob', age = 25;
const bob = { name, age }; // { name: 'Bob', age: 25 }

Frequently Asked Questions

What is the difference between Object.create() and {}?▼

Related Functions

PropertiesMethodsConstructorsClassesPrototypes