覆盖函数参数值是一种好习惯吗？

Question

In JavaScript consider I am trying to append a new value and return it.

I have below example regarding overriding parameter value

The below function receives a string value as param and overriding the param with new value and returning it.

 function test(value) { value = value + "hi"; return value; } console.log(test("Hello"));

The below function receives a string value as param. I would like to append a new value and return it. So I assigned value to a local variable and then appended strong to a new variable and returning it.

 function test(value) { let temp = value; temp = value + "hi"; return temp; } console.log(test("Hello"));

I am calling it and passing value

  test(“Hello”);

Which one is recommended from above?

Answer 1

It's purely a matter of style. Some people think you should leave parameter values alone, others think it's fine to change them.¹

From a practical perspective, it doesn't cause any harm. That is, there is no hidden side-effect to doing so. In particular, since JavaScript is purely pass-by-value, reassigning the parameter can't have any effect on whatever argument was used to fill in that parameter:

 function test(value) { value = value + "hi"; return value; } let a = "let's say "; let b = test(a); console.log(b); // "let's say hi" console.log(a === b); // false, `a` was not modified 

Your version with temp can be simpler, though:

function test(value) {
    let temp = value + "hi";
    return temp;
}

(or even

function test(value) {
    return value + "hi";
}

but I figure it's highly simplified for the question.)

---

¹ (I happen to be in the latter camp, but that's neither here nor there.)

Answer 2

Yes, this is not at all wrong and is often done by many programmers across many languages. It is a common practice.

You can use it in cases where you want to use the parameter value inside the function but after making certain modifications to it.

For example, I might want to add two numbers using a function add(a, b) where a and b can be strings or integers or floats .

But just to be sure about it, I can define the add function in the following way:

function add(a,b) {
 a = parseFloat(a);
 b = parseFloat(b);
 return a + b;
}

and this is perfectly fine. This way I can be always sure that there will be no exceptions thrown or in case parameters were passed as strings , it doesn't returns 12 (if I said add(1,2) ) when really it should have been 3 .

By making parameter overriding a common practice and incorporating it into your coding style, you spare the browser from creating or defining new variables just to modify those variable values. This might not mean much in small applications, but in large scale heavy applications, it might make a noticeable difference especially on low end devices.

Answer 3

The short answer is: it's only a matter of style.

However, this isn't always right. When passing objects, they will be passed by reference, meaning that every change you'll make to the parameter will affect the original object:

 const obj = {originalValue: true}; function modifyObject(input) { input.originalValue = false; // The change happens here return input; // So it will take place regardless of this line } console.log('before:', obj); modifyObject(obj); // See? we don't even retrieve the return value console.log('after:', obj); 

Answer 4

If we were talking about Java, then creating a new variable would be good practice. As there is something called the Garbage Collector that collects unused variables, etc. and discards them. So keeping a link to the original variable wouldn't allow the collector to discard the variable. (I read this somewhere, but some people said to me it doesn't really work this way, so read more about this online if you want)

In JavaScript, however, it doesn't really matter. It depends on you. Your style. It also depends on the situation as it can be useful sometimes. But really it doesn't really matter. Do as you like.

If you want to simplify it you can do as @T.JCrowder said:

 function test(value){
   return value+ “hi”;
 } 

That's about it.

Answer 5

Using ES6 Template literals

function test(value){
return `${value} hi`;
}