Is it possible to assign default values to optional properties in JavaScript?

Question

Is it possible to assign default values to optional properties in JavaScript?

Here is an example to consider:

interface Parameters {
    label: string;
    quantity?: number;
}

const defaultSettings = {
    label: 'Example',
    quantity: 10,
};

function setup({ label, quantity }: Parameters = { ...defaultSettings }) {
    console.log('setup, label:', label);
    console.log('setup, quantity:', quantity);
    return;
}

setup();

setup({ label: "Test"});

Playground Link: Provided

The output is as follows:

[LOG]: "setup, label:",  "Example"
[LOG]: "setup, quantity:",  10
[LOG]: "setup, label:",  "Test"
[LOG]: "setup, quantity:",  undefined

Is there a way to specify a default value for the quantity attribute if not provided?

javascript typescript

Answer 1

Answer №1

To simplify the code by removing the outer Options and defaultOptions identifiers, you can consolidate all the logic within the argument list:

function revisedApproach({
    name = 'Alice',
    age = 21,
    fn = () => Promise.resolve()
}: {
    name?: string,
    age?: number,
    fn?: () => Promise<any>
} = {}) {
    console.log('revisedApproach, name:', name);
    console.log('revisedApproach, age:', age);
    console.log('revisedApproach, fn:', fn);
}

Answer 2

To simplify the code by removing the outer Options and defaultOptions identifiers, you can consolidate all the logic within the argument list:

function revisedApproach({
    name = 'Alice',
    age = 21,
    fn = () => Promise.resolve()
}: {
    name?: string,
    age?: number,
    fn?: () => Promise<any>
} = {}) {
    console.log('revisedApproach, name:', name);
    console.log('revisedApproach, age:', age);
    console.log('revisedApproach, fn:', fn);
}

Answer 3

Answer №2

If, for any reason, you are unable to utilize @CertainPerformance's solution, an alternative approach is to destructure after merging with defaults:

function newApproach(options?: Partial<Options>) {
    const {name, age, fn}: Options = {...defaultOptions, ...options};
    console.log('newApproach, name:', name);
    console.log('newApproach, age:', age);
    console.log('newApproach, fn:', fn);
}

Playground link

Answer 4

If, for any reason, you are unable to utilize @CertainPerformance's solution, an alternative approach is to destructure after merging with defaults:

function newApproach(options?: Partial<Options>) {
    const {name, age, fn}: Options = {...defaultOptions, ...options};
    console.log('newApproach, name:', name);
    console.log('newApproach, age:', age);
    console.log('newApproach, fn:', fn);
}

Playground link

Is it possible to assign default values to optional properties in JavaScript?

Answer №1

Answer №2

Similar questions

Tips for triggering useEffect just once when various dependencies are updated simultaneously

Executing a Long Press in JavaScript

Tips for effectively managing the timeout of server-side AJAX calls1. Maxim

Having trouble sending a JSON object from Typescript to a Web API endpoint via POST request

Checking to see if a string meets the criteria of being a valid ARGB value

Obtaining data objects with Angular 2 from JSON

Returning to the initial state after clicking on an element within a repeated set in AngularJS?

What is the best way to combine two calls into a single condition check in React using Typescript?

Update the CSS dynamically using JavaScript or AngularJS

Choosing multiple images using JavaScript/jQuery

The AngularJS ng-if directive functions on a variable will only function on the

In case of an API error with the Nuxt fetch method, ensure that the entire site responds with a 404

What could be causing the error in Angular Universal Server Side Rendering after deployment on Firebase Hosting?

What is the method for adding an event listener in AngularJS within an ng-repeat iteration?

Accurately locate all ChildComponents throughout the entire Component hierarchy

When merging interfaces and classes, Typescript does not verify property initialization

Showing nested arrays in API data using Angular

Exploring TypeScript: Implementing a runtime data mapping in place of an interface

Using Node-twitter within the Express framework

An issue arises when attempting to integrate ajax with colorbox