In JavaScript, there are multiple ways of getting to or allocate properties on an article. Every technique has its utilization cases and can be picked in light of the unique situation. Here is a far reaching check the various methodologies out:
Accessing Properties:
1. Dot Notation
const obj = { name: 'Alice', age: 30 };
console.log(obj.name); // Output: 'Alice'
console.log(obj.age); // Output: 30
const obj = {};
obj.name = 'Alice';
obj.age = 30;
console.log(obj); // Output: { name: 'Alice', age: 30 }
2. Bracket Notation
const obj = { 'first-name': 'Bob', age: 25 };
console.log(obj['first-name']); // Output: 'Bob' console.log(obj['age']); // Output: 25
const obj = {};
obj['first-name'] = 'Bob';
obj['age'] = 25;
console.log(obj); // Output: { 'first-name': 'Bob', age: 25 }
3. Using Variables as Keys
const obj = { name: 'Charlie' };
const key = 'name';
console.log(obj[key]); // Output: 'Charlie'
const obj = {};
const key = 'location';
obj[key] = 'New York';
console.log(obj); // Output: { location: 'New York' }
4. Computed Property Names (ES6)
const key = 'dynamicKey';
const obj = { [key]: 'dynamicValue' };
console.log(obj.dynamicKey); // Output: 'dynamicValue'
const key = 'dynamicKey';
const obj = {};
obj[key] = 'dynamicValue';
console.log(obj); // Output: { dynamicKey: 'dynamicValue' }
5. Object.defineProperty()
This method allows you to define a property with specific attributes, such as enumerable
, configurable
, and writable
.
Defining a Property:
const obj = {};
Object.defineProperty(obj, 'name', { value: 'David', writable: true, enumerable: true, configurable: true });
console.log(obj.name); // Output: 'David'
Updating a Property:
Object.defineProperty(obj, 'name', { value: 'Daniel' });
console.log(obj.name); // Output: 'Daniel'
6. Object.assign()
This method is used to copy properties from one or more source objects to a target object.
Assigning Properties from Another Object:
const target = {};
const source = { name: 'Emma', age: 28 };
Object.assign(target, source);
console.log(target); // Output: { name: 'Emma', age: 28 }
7. Spread Syntax (ES6)
The spread syntax can be used to copy properties from one object to another.
const source = { name: 'Frank', age: 32 };
const target = { ...source };
console.log(target); // Output: { name: 'Frank', age: 32 }
8. Object.keys(), Object.values(), and Object.entries()
These methods are used to interact with object properties in various ways.
const obj = { name: 'Grace', age: 29 }; console.log(Object.keys(obj)); // Output: ['name', 'age']
Getting Property Values:
console.log(Object.values(obj)); // Output: ['Grace', 29]
Getting Entries (Key-Value Pairs):
console.log(Object.entries(obj));
// Output: [['name', 'Grace'], ['age', 29]]
Summary
- Dot Notation: Ideal for accessing properties with valid identifier names.
- Bracket Notation: Useful for dynamic keys, special characters, or numeric keys.
- Computed Property Names: Allows dynamic property names during object creation.
Object.defineProperty()
: Provides control over property attributes.Object.assign()
: Copies properties from source objects to a target object.- Spread Syntax: Provides a concise way to copy or merge objects.
Object.keys()
,Object.values()
,Object.entries()
: Useful for retrieving keys, values, or entries from objects.