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

MUI: The value you have chosen for the select component is outside the acceptable range - `[object Object]`

Creating methods that are shared, privileged, and publicly accessible: A guide

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

Contrasting VSCode Live Server and Node Live Server

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

Is there a method to automatically eliminate all unnecessary properties in an Angular project?

What is the process of exporting a module that has been imported in ES6?

Toggle the visibility of items based on the user's login status

MUI Autocomplete fails to refresh the chosen value when its onChange function modifies the state

Mastering the art of redirection in Node.js

By utilizing the HTML element ID to retrieve the input value, it is possible that the object in Typescript may be null

Obtaining a value from an input field in Vue.js

When attempting to change an image using JavaScript, the image fails to load

Identifying the moment when attention shifts away from an element

Reorganize array of objects in JavaScript

Cassandra encountered a TypeError stating that the "value" argument is exceeding the bounds

"Return to the top" feature that seamlessly integrates with jQuery's pop-up functionality

The function you are trying to access does not exist in this.props

Steps to establish a connection with a remote MYSQL database using the actual IP address in Node.js

What is the most efficient way to clear the input field in Angularjs when the backspace or delete keys are pressed?