DEV Community: nkumarm

Methods to assign and retrieve values in a JavaScript object

nkumarm — Sun, 01 Dec 2024 09:37:37 +0000

Introduction

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

Dot notation
Square bracket notation
Object.defineProperty() method
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);

Methods to create Objects in JavaScript

nkumarm — Sat, 12 Oct 2024 17:46:27 +0000

Introduction

There are quite few ways to create an Object in JavaScript.

Object literals
Object() constructor
Object.create()
Constructor function
ES6 Class

Object literals

Probably this is the fastest and easiest way to create an Object in JavaScript. This is also called as an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

Object values can be either primitive data type or other object.

Object() constructor

You can create an object using the built-in Object constructor.
If passed value is null or undefined or no value passed then it creates and return an empty object.
If the value is already an object, it returns the same value.

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same.

Object.create()

This method allows you to create a new object with a specific prototype. This approach enables the new object to inherit properties and methods from the prototype, facilitating inheritance-like behavior.

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John

Constructor function

Before ES6, this was a common method to create multiple similar objects. Constructor is nothing but a function and with the help of a new keyword you can able to create an object.

It's a good practice that capitalize the first character of a function name when you construct the object with the "new" keyword.

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland

ES6 Class

A more modern approach helps to create object just like other OOP programming languages using class with constructor function to initialize properties and methods.

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth

References: