CodeSnacks

Dynamically creating and accessing properties on objects in JS

January 22, 2020

Today we’ll learn how to dynamically create and access properties on JS objects.

There are two ways to set and access properties on objects:

  • the do notation
  • the bracket notation

Let’s see these in action:

// create an empty object
const pastry = {}

// set a name property on the object using the dot notation
pastry.name = "waffle"

// set a deliciousness property on the object using the bracket notation
pastry["deliciousness"] = 11

// you can also use both notations to access properties again
console.log(pastry.deliciousness) // 11
console.log(pastry["name"]) // waffle

But how would we dynamically set and read these properties? Let’s say we would have the name of the property in a variable?

An example could be a get or a set method in which you can pass an object and a property. The set would of course also take a value.

Let’s see these functions:

function get(obj, prop) {
  // return prop on obj
}

function set(obj, prop, value) {
  // set value for prop on obj
}

// create an empty object
const pastry = {};

// use set
set(pastry, "name", "waffle")

// use get
console.log(get(pastry, "name")

So how would it work? We can use the bracket notation to dynamically set and get properties.

function get(obj, prop) {
  // return prop on obj
  return obj[prop]
}

function set(obj, prop, value) {
  // set value for prop on obj
  obj[prop] = value
}

// create an empty object
const pastry = {};

// use set
set(pastry, "name", "waffle")

// use get
console.log(get(pastry, "name")) // waffle

Interested in more content like this? Subscribe to my weekly Newsletter!