Methods to assign and retrieve values in a JavaScript object

Introduction

There are four ways in which keys and values can be assigned to an object.

1. Dot notation
2. Square bracket notation
3. Object.defineProperty() method
4. Object.defineProperties() method

Dot notation

Dot notation is a straightforward and commonly used method to access object properties in JavaScript. You can create and assign properties to an object using dot notation. This approach allows you to define properties dynamically after the object has been created.

let objectName = {};  // "object literal" syntax
objectName.someKey = someValue; // set property and value

const value = objectName.someKey; // retrive value

pros

Readability:

Easy to read and understand.

Example: person.name is simpler to interpret than person['name'].

Ease of Use:

Simple syntax that’s quick to write.

Static Property Names:

Ideal for accessing properties with valid identifiers (letters, digits, underscores, and $).

Cons

Limited to Valid Identifiers:

Fails when property names have special characters, spaces, or are dynamic.

Example: person.first-name will throw an error; use person["first-name"] instead.

Cannot Use Variables:

Example: If the property name is stored in a variable, you cannot use it with dot notation.

Square bracket notation

Square bracket notation allows accessing or manipulating object properties dynamically using strings or variables. Square brackets are more flexible than dot notation because they can use any property name or variable. However, they are a bit harder to write.

Pros

Dynamic Property Access:

Allows property names to be variables or expressions.

Example: obj[propName] is flexible when propName is a variable.

Special Characters and Spaces:

Works with property names containing special characters, spaces, or reserved keywords.

Example: obj["first-name"] or obj["class"].

Flexible in Iteration:

Useful when looping through properties in objects.

Cons

Less Readable:

Harder to read compared to dot notation, especially for nested properties.

Prone to Typos:

Mistakes in property names might not be caught during development (e.g., obj["naem"]).

Verbose:

Requires more typing and the use of quotes for string keys.

Object.defineProperty() method

The Object.defineProperty() method defines a new property to an object or updates an existing one, and then returns the object.

const user = {};

Object.defineProperty(user,  'firstName', {
  value: 'John',
  writable: true, // `false` is default
});

console.log('First name', user.firstName);

Object.defineProperties() method

The Object.defineProperties() method defines new or modifies existing properties directly on an object, returning the object.

const user = {};

Object.defineProperty(user, {
  'firstName': {
    value: 'John',
  },
  'lastName': {
    value: 'Kennady',
  },
});

console.log('First name', user.firstName);
console.log('Last name', user.lastName);