Tips for dynamically modifying a property of an object in JavaScript/TypeScript

Question

Tips for dynamically modifying a property of an object in JavaScript/TypeScript

Looking for a way to dynamically update any field in an object? I have a method that aims to do just that. Whether it's the name, age, weight, or eye color of the object, I want to be able to pass in any field and have it updated accordingly.

Currently, I'm using the spread operator but encountering issues when trying to update a single field. There's an error stating that the fieldName doesn't exist within myObject. Is there a way to achieve this without resorting to a lengthy switch statement to check each field against the passed-in fieldName?

If you have any suggestions or ideas on how to accomplish this dynamically, I would greatly appreciate it. Thank you!

let myObject = {
    name: 'John',
    lastName: 'Smith',
    age: 26,
    weight: 200,
    eyeColor: 'blue',
    hairColor: 'blonde'
};

const handleUpdate = (fieldName: string, fieldValue: string | number) => {
    if (fieldName in myObject) {
        myObject = {...myObject, fieldName: fieldValue};
    }
}

handleUpdate('name', 'Jack'); // Hoping for this call to change the name from 'John' to 'Jack'

javascript typescript

Answer 1

Answer №1

Simply put, what you're seeking is:

{...myObject, [fieldName]: fieldValue}

To achieve this in a more generalized and type-safe manner, you can create a function like so:

function updateProperty<TObject, Key extends keyof TObject>(obj: TObject, key: Key, value: TObject[Key]) {
    return {...obj, [key]: value};
}

You can then use it as demonstrated below:

const sampleObject = { a: 1, b: "apple" };
const updatedObject = updateProperty(sampleObject, "b", "hello friends")

Interactive Example Here

Answer 2

Simply put, what you're seeking is:

{...myObject, [fieldName]: fieldValue}

To achieve this in a more generalized and type-safe manner, you can create a function like so:

function updateProperty<TObject, Key extends keyof TObject>(obj: TObject, key: Key, value: TObject[Key]) {
    return {...obj, [key]: value};
}

You can then use it as demonstrated below:

const sampleObject = { a: 1, b: "apple" };
const updatedObject = updateProperty(sampleObject, "b", "hello friends")

Interactive Example Here

Answer 3

Answer №2

If you want to access object properties using bracket notation in JavaScript, you can do it like this:

myObj[key] = value

Using bracket notation allows you to update the object directly, maintaining references to the original object. However, if you create a new object by spreading the original one like myObj = {...myObj}, each time you will get a completely new object instead.

Answer 4

If you want to access object properties using bracket notation in JavaScript, you can do it like this:

myObj[key] = value

Using bracket notation allows you to update the object directly, maintaining references to the original object. However, if you create a new object by spreading the original one like myObj = {...myObj}, each time you will get a completely new object instead.

Tips for dynamically modifying a property of an object in JavaScript/TypeScript

Answer №1

Answer №2

Similar questions

Simulate a failed axios get request resulting in an undefined response

Tips for sending a variable to the onclick function within an HTML element

Having trouble locating the 'tsc-watch' module due to the missing 'typescript/bin/tsc' when running the TypeScript compiler

Is Express capable of serving static files from a hidden folder with dot file?

Is it better to load AngularJS partials at the start instead of waiting until they are needed in Django?

Utilizing PhP and AJAX for seamless form uploads without the need to refresh the page

What steps should I take to fix the 'no-undef error in my React application where 'Component' is not defined?

Is it possible to set up TypeScript npm packages to be installed in their original TypeScript format rather than JavaScript for the purpose of examining the source code?

Set up a listener to detect changes in fullscreen mode for the specified host

Is there a way to retrieve the text of a clicked button with execute_script?

Issue with setting .mtl properties in a custom shader in three.js

What is the best method for incorporating success icons into my website with vue.js?

Fetching image files from Angular JS in a servlet

Preventing file visibility in Three.js resource directory

JQuery class for swapping elements upon scrolling

Error message stating 'is not recognized' caused by Angular SharedModule

Extract targeted content from a webpage

"Adding an express route after your app has already started listening - a step-by-step guide

Fixing Null Pointer Exception when Posting Form Data using Jersey MultiFormData in JavaScript

Utilize strings as object keys in JavaScript