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...

Object Properties

AI & DATA SCIENCE // properties

Properties are the key-value pairs of an object. Accessed with dot notation (obj.key) or bracket notation (obj['key']).

Syntax

const obj = { name: 'Alice', age: 30 };
console.log(obj.name);      // dot notation
console.log(obj['age']);    // bracket notation

Deep Dive Course

Properties have a **name** (string or Symbol) and a **value** (any type). Access them with **dot notation** (for valid identifiers) or **bracket notation** (for dynamic keys or special chars). Use `in` operator or `hasOwnProperty` to check existence. `delete` removes properties.

1Understanding Object Properties

Properties have a name (string or Symbol) and a value (any type). Access them with dot notation (for valid identifiers) or bracket notation (for dynamic keys or special chars). Use in operator or hasOwnProperty to check existence. delete removes properties.

💡

Bracket notation allows dynamic keys: obj[variableName]. Dot notation is cleaner but only works for valid identifier names.

editor.html

const car = { make: 'Toyota', model: 'Camry', year: 2022 };

// Dot notation
console.log(car.make); // Toyota

// Bracket notation (dynamic key)
const prop = 'model';
console.log(car[prop]); // Camry

// Check existence
console.log('year' in car);          // true
console.log(car.hasOwnProperty('model')); // true

localhost:3000

2Practical Example

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

editor.html

// Add, modify, delete properties
const user = { name: 'Alice' };
user.email = 'alice@example.com';  // add
user.name = 'Alice Smith';         // modify
delete user.email;                 // delete
console.log(user);

localhost:3000

3Best Practices

Follow these guidelines when working with Object Properties:

1. Use dot notation by default

2. Use bracket notation for dynamic keys

3. Check property existence with 'key in obj' or obj.hasOwnProperty(key)

⚠️

Tip: Bracket notation allows dynamic keys: obj[variableName]. Dot notation is cleaner but only works for valid identifier names.

editor.html

const car = { make: 'Toyota', model: 'Camry', year: 2022 };

// Dot notation
console.log(car.make); // Toyota

// Bracket notation (dynamic key)
const prop = 'model';
console.log(car[prop]); // Camry

// Check existence
console.log('year' in car);          // true
console.log(car.hasOwnProperty('model')); // true

localhost:3000

Examples

Example 01Basic Usage

const car = { make: 'Toyota', model: 'Camry', year: 2022 };

// Dot notation
console.log(car.make); // Toyota

// Bracket notation (dynamic key)
const prop = 'model';
console.log(car[prop]); // Camry

// Check existence
console.log('year' in car);          // true
console.log(car.hasOwnProperty('model')); // true

Example 02Advanced Example

// Add, modify, delete properties
const user = { name: 'Alice' };
user.email = 'alice@example.com';  // add
user.name = 'Alice Smith';         // modify
delete user.email;                 // delete
console.log(user);

Best Practices

Use dot notation by default
Use bracket notation for dynamic keys
Check property existence with 'key in obj' or obj.hasOwnProperty(key)

Interview Question

What is the difference between 'key in obj' and 'obj.hasOwnProperty(key)'?▼

Hint: Inherited vs own properties.

'key in obj' checks both own properties AND inherited properties through the prototype chain. 'obj.hasOwnProperty(key)' checks ONLY the object's own properties. Always prefer hasOwnProperty (or Object.hasOwn in ES2022) when checking if an object itself has a property.

Exercises

MediumPractice using Object Properties in a real scenario.

View Solution

const car = { make: 'Toyota', model: 'Camry', year: 2022 };

// Dot notation
console.log(car.make); // Toyota

// Bracket notation (dynamic key)
const prop = 'model';
console.log(car[prop]); // Camry

// Check existence
console.log('year' in car);          // true
console.log(car.hasOwnProperty('model')); // true

Frequently Asked Questions

What is the difference between 'key in obj' and 'obj.hasOwnProperty(key)'?▼

Related Functions

Object-CreatingMethodsPrototypesDestructuring