What are your thoughts on changing a function argument within the function itself?

Question

What are your thoughts on changing a function argument within the function itself?

Recently, my coding style came under scrutiny for the following snippet:

export const myFunction = (myArgument: TypeOfObject[]) => {
  if (!myArgument) {
    myArgument = [];
  }
  // do something with myArgument
}

In TypeScript, it seems that myFunction receives a pointer called myArgument by value. If this pointer is pointing to undefined, I simply reassign it to an empty array. Otherwise, it remains unchanged. Therefore, neither the object pointed to nor the pointer itself are being altered within the caller's context.

This approach has been criticized as poor form, with the suggestion of an alternative method:

export const myFunction = (myArgument: TypeOfObject[]) => {
  let myArgumentSecond: TypeOfObject[];
  if (!myArgument) {
    myArgumentSecond = [];
  } else {
    myArgumentSecond = [...myArgument];
  }

  // do something with myArgumentSecond (instead of with myArgument)
}

What are your thoughts on this? Do you believe the second version is truly superior?

Despite being in TypeScript, I consider this a broader programming question and fail to grasp the issue with the initial implementation.

typescript

Answer 1

Answer №1

// In a TypeScript project, default argument values are recommended for clarity.

export const myFunction1 = (myArgument: TypeOfObject[] = []) => {
  // Perform operations with myArgument
  myArgument
  // ^? (parameter) myArgument: TypeOfObject[]
}
// It's important to specify whether the function can accept non-array arguments.

export const myFunction2 = (myArgument?: TypeOfObject[] | null | undefined) => {
  myArgument ??= [];
  myArgument
  // ^? (parameter) myArgument: TypeOfObject[]
}

// When using type casting in TypeScript, consider assigning the result to another variable.
export const myFunction3 = (a: number | string) => {
  a = Number(a) % 3 as 0 | 1 | 2
  ;; a
  // ^? (parameter) a: number
  let b = Number(a) % 3 as 0 | 1 | 2
  //  ^? let b: 0 | 1 | 2
}

interface TypeOfObject {};

If you want to restrict argument assignment, refer to the no-param-reassign rule in ESLint documentation. Follow the guidance of your linter regarding modifying arguments within functions.

Answer 2

// In a TypeScript project, default argument values are recommended for clarity.

export const myFunction1 = (myArgument: TypeOfObject[] = []) => {
  // Perform operations with myArgument
  myArgument
  // ^? (parameter) myArgument: TypeOfObject[]
}
// It's important to specify whether the function can accept non-array arguments.

export const myFunction2 = (myArgument?: TypeOfObject[] | null | undefined) => {
  myArgument ??= [];
  myArgument
  // ^? (parameter) myArgument: TypeOfObject[]
}

// When using type casting in TypeScript, consider assigning the result to another variable.
export const myFunction3 = (a: number | string) => {
  a = Number(a) % 3 as 0 | 1 | 2
  ;; a
  // ^? (parameter) a: number
  let b = Number(a) % 3 as 0 | 1 | 2
  //  ^? let b: 0 | 1 | 2
}

interface TypeOfObject {};

If you want to restrict argument assignment, refer to the no-param-reassign rule in ESLint documentation. Follow the guidance of your linter regarding modifying arguments within functions.

Answer 3

Answer №2

In my perspective, the main distinction between your implementation and the proposed solution lies in the fact that you guarantee not to alter the argument. Essentially, whatever argument is passed to the function will remain unchanged (although modifications can still be made to items within the array). The superiority of one approach over the other is subject to debate and the underlying intention. For instance:

function sortInplace(x) { // Indicates a desire to mutate
  x.sort()
}

function sortNotInplace(x) {
  return [...x].sort()
}

a = [4,3,2,1]

sortInplace(a) // mutates 'a', making this function impure

console.log(a) // [1,2,3,4]

b = [4,3,2,1]
c = sortNotInplace(b) // duplicates 'b', sorts the duplicate, and returns the sorted copy, thus maintaining purity

console.log(b) // [4,3,2,1]
console.log(c) // [1,2,3,4]

It is preferable to have functions that are deemed "pure", indicating they do not modify anything externally, as opposed to "impure" functions which can lead to elusive bugs.

The downside of aiming for purity is typically a reduction in runtime performance since more copying is often required. However, in many scenarios, the performance impact can be minimal. The provided code will generate an entirely new array. If the initial array is sizable, the computer must allocate resources to create a new large array, leading to potential inefficiencies.

These thoughts are solely my own and may not align with all readers:

I find your initial snippet acceptable (it aligns with my preference), with the crucial aspect being awareness of whether the input is being mutated or not, and appropriately signaling if mutation is intended, or adjusting the function if non-mutation is desired. It is also important to take into account any agreed-upon coding style among colleagues. If the suggested code reflects the consensus among peers, adhering to it would be advisable (particularly within a software development team context). The suggested code explicitly communicates that there will be no alterations to the input array (though in cases of small and easily understandable functions, this might be apparent regardless).

Answer 4

In my perspective, the main distinction between your implementation and the proposed solution lies in the fact that you guarantee not to alter the argument. Essentially, whatever argument is passed to the function will remain unchanged (although modifications can still be made to items within the array). The superiority of one approach over the other is subject to debate and the underlying intention. For instance:

function sortInplace(x) { // Indicates a desire to mutate
  x.sort()
}

function sortNotInplace(x) {
  return [...x].sort()
}

a = [4,3,2,1]

sortInplace(a) // mutates 'a', making this function impure

console.log(a) // [1,2,3,4]

b = [4,3,2,1]
c = sortNotInplace(b) // duplicates 'b', sorts the duplicate, and returns the sorted copy, thus maintaining purity

console.log(b) // [4,3,2,1]
console.log(c) // [1,2,3,4]

It is preferable to have functions that are deemed "pure", indicating they do not modify anything externally, as opposed to "impure" functions which can lead to elusive bugs.

The downside of aiming for purity is typically a reduction in runtime performance since more copying is often required. However, in many scenarios, the performance impact can be minimal. The provided code will generate an entirely new array. If the initial array is sizable, the computer must allocate resources to create a new large array, leading to potential inefficiencies.

These thoughts are solely my own and may not align with all readers:

I find your initial snippet acceptable (it aligns with my preference), with the crucial aspect being awareness of whether the input is being mutated or not, and appropriately signaling if mutation is intended, or adjusting the function if non-mutation is desired. It is also important to take into account any agreed-upon coding style among colleagues. If the suggested code reflects the consensus among peers, adhering to it would be advisable (particularly within a software development team context). The suggested code explicitly communicates that there will be no alterations to the input array (though in cases of small and easily understandable functions, this might be apparent regardless).

What are your thoughts on changing a function argument within the function itself?

Answer №1

Answer №2

Similar questions

difficulty with closing nested Mat-dialogBoxes

How to configure mat-sort-header in Angular Material for mat-table

Cannot trigger event ascn.onchange does not exist as a function

How can I arrange a table in Angular by the value of a specific cell?

What steps can be taken to eliminate redundancy in this code and improve its efficiency?

Passing a click event to a reusable component in Angular 2 for enhanced functionality

Observables do not provide any results when used in a pipe with an image src

Angular - Clear the selection of <select><option> if I opt out of accepting the change

Tips on transferring a child Interface to a parent class

Instead of relying on Vue TypeScript, we are leveraging IntelliJ with TypeScript 5.0.3 to compile our Vue project

Refresh an array prior to subscribing in Angular 2

Creating a structure within a stencil web component

Exploring Blob functionality in TypeScript?

How can Karma unit tests with Jasmine in a TypeScript Node project accurately measure code coverage, even with external dependencies?

The correlation between subject matter and the workflow of resilience

Developing a universal SDK wrapper for Firebase services (Firestore, Cloud Storage, and additional functionalities)

Angular: Implementing a Dark and Light Mode Toggle with Bootstrap 4

Leveraging cloud functions on Firebase for maximum efficiency

Handling the onSelect Event in React Bootstrap Dropdown using TypeScript

Mapping a response object to a Type interface with multiple Type Interfaces in Angular 7: A step-by-step guide