Tips on setting a singular optional parameter value while invoking a function

Question

Tips on setting a singular optional parameter value while invoking a function

Here is a sample function definition:

function myFunc(
  id: string,
  optionalParamOne?: number,
  optionalParamTwo?: string
) {
  console.log(optionalParamTwo);
}

If I want to call this function and only provide the id and optionalParamTwo, without needing to specify optionalParamOne, how can I achieve that?

One approach could be:

myFunc('abc', null, 'dog')

However, if there are multiple optional parameters in the function signature, providing a value for each one may not be ideal.

Check out a demo here

javascript typescript

Answer 1

Answer №1

In order to provide a value for a higher-indexed parameter, you must first provide some value (even if it's undefined) for every ordered parameter.

One common approach to reduce boilerplate when invoking functions with uninteresting parameters is to use currying:

TS Playground

function myFunc (
  id: string,
  optionalParamOne?: number,
  optionalParamTwo?: string
) {
  console.log(optionalParamTwo);
}

// Define a function that expands parameters:
const myParams = (id: string, optionalParamTwo?: string) => [id, undefined, optionalParamTwo] as const;
//                                                               ^^^^^^^^^
// Include undefined for the parameters you don't want to consider when calling the function

myFunc(...myParams('abc', 'dog')); // displays "dog"

// Alternatively, curry the function:
const myFuncWithFewerParams = (
  id: string,
  optionalParamTwo?: string,
) => myFunc(id, undefined, optionalParamTwo);

myFuncWithFewerParams('abc', 'cat'); // shows "cat"

To learn more about sliced tuples in the type system for addressing partial parameters, refer to this answer.

Answer 2

In order to provide a value for a higher-indexed parameter, you must first provide some value (even if it's undefined) for every ordered parameter.

One common approach to reduce boilerplate when invoking functions with uninteresting parameters is to use currying:

TS Playground

function myFunc (
  id: string,
  optionalParamOne?: number,
  optionalParamTwo?: string
) {
  console.log(optionalParamTwo);
}

// Define a function that expands parameters:
const myParams = (id: string, optionalParamTwo?: string) => [id, undefined, optionalParamTwo] as const;
//                                                               ^^^^^^^^^
// Include undefined for the parameters you don't want to consider when calling the function

myFunc(...myParams('abc', 'dog')); // displays "dog"

// Alternatively, curry the function:
const myFuncWithFewerParams = (
  id: string,
  optionalParamTwo?: string,
) => myFunc(id, undefined, optionalParamTwo);

myFuncWithFewerParams('abc', 'cat'); // shows "cat"

To learn more about sliced tuples in the type system for addressing partial parameters, refer to this answer.

Answer 3

Answer №2

To achieve the desired outcome, you can create a wrapper function without altering the original function. By introducing destructuring assignment in the wrapper function, you can pass in only the necessary parameters like this:

function myFunc(
  id: string,
  optionalParamOne?: number,
  optionalParamTwo?: string
) {
  console.log(optionalParamTwo);
}

interface MyFuncParams {
  optionalParamOne?: number,
  optionalParamTwo?: string
}

function myFuncWrapper(id: string, { optionalParamOne, optionalParamTwo }: MyFuncParams = {}) {
  myFunc(id, optionalParamOne, optionalParamTwo);
}

myFuncWrapper('abc', { optionalParamTwo: 'dog' });

Answer 4

To achieve the desired outcome, you can create a wrapper function without altering the original function. By introducing destructuring assignment in the wrapper function, you can pass in only the necessary parameters like this:

function myFunc(
  id: string,
  optionalParamOne?: number,
  optionalParamTwo?: string
) {
  console.log(optionalParamTwo);
}

interface MyFuncParams {
  optionalParamOne?: number,
  optionalParamTwo?: string
}

function myFuncWrapper(id: string, { optionalParamOne, optionalParamTwo }: MyFuncParams = {}) {
  myFunc(id, optionalParamOne, optionalParamTwo);
}

myFuncWrapper('abc', { optionalParamTwo: 'dog' });

Tips on setting a singular optional parameter value while invoking a function

Answer №1

Answer №2

Similar questions

Can you explain the purpose of this script? Is it considered harmful?

How come the array's length is not appearing on the browser screen?

Function in Node.js/JavaScript that generates a new path by taking into account the original filepath, basepath, and desired destination path

Is there a way to generate a modal list of values by utilizing bootstrap and angular, while incorporating spring boot as the backend technology?

FadeOut Television static on Canvas after a period of inactivity

Transferring a boolean model value to a JavaScript function triggers a reference to the onchange function

Error thrown by loader.js at line 582 of internal/modules/cjs/loader.js

If a specific class is identified, add a border to the div when clicked using JavaScript

Node.js MySQL REST API query fails to execute

Is it possible to load Javascript using AJAX with jQuery?

Module error caused by Typescript path inconsistency

Employ various iterations of the leaflet library

Overabundance of Recursive Calls in Node.js Project Dependencies

Exploring React JS Subdomains

Is there a way to temporarily halt a jQuery animation for 2 seconds before automatically resuming it, without relying on mouse-over or mouse-out triggers?

The dimensions of the image are determined by its orientation

Exploring the process of transferring a jQuery array from a Rails controller to a PostgreSQL array column

Maintain selected dropdown option after page reload

The deployment on Heroku is encountering issues due to TypeScript errors related to the MUI package

Performing a function inside a JSON structure