In C/C++ I know we had pointers to objects and arrays, so they could be passed into function parameters without the need to clone said objects and arrays. In Javascript there's no such option, so we just use the object variable.
Is this good practise?
function setWhite(obj){
obj.color = "white";
}
var shirt = {
color: "red",
size: "L"
}
setWhite(shirt);
console.log(shirt);
Yes. In javascript, objects are passed by reference. So, if you change the value of an object within the function, it changes it back outside of the function.
If you did something like this, though, it wouldn't be the case:
function setWhite(obj){
obj = {
color: "white",
size: "M"
}
}
var shirt = {
color: "red",
size: "L"
}
setWhite(shirt);
console.log(shirt); // shirt will remain red / L
Note the difference is that I'm reassigning obj inside the setWhite() method, so the original obj is lost to that function.
This is an important concept to understand, since it can have disturbing and unintended consequences if you let it slip your mind, accidentally changing the value on objects that you didn't want to change, just temporarily manipulate the data for some other purpose. It's especially important to keep in mind when you start working with async functions. Async functions happen in the background, and you have to specify when to 'await' for them. If you call an async function expecting it to change your objects values, but don't await it, your object might not have the updated values yet when you go to use them later in the code that calls the async function.
Similarly, if you call an async function, but don't await it, and later change the object that was passed in, by the time the async function goes to use the values from that object, they could be different than you intended when you called it.
obj = ... inside setWhite(), it forgets the old reference, and creates a reference to that new object. The old shirt still exists, though, since the variable outside of the function is still holding the reference. But, when you assign within the function, the outside variable isn't affected. You have to assign to the properties of an object to change them.{}s, add a line for setWhite: () => { this.color = "white"; }. Then you can call shirt.setWhite() if you wanted to change it white. You could also do something like add the property setColor: (newColor) => { this.color = newColor }, then call shirt.setColor('white');
But is it ok to do this?it doesn't throw an error, so the answer is "yes".Is it good practise?it depends. A lot of times mutating an object leads to unnecessary complexity. Then agian, a lot of times it's fine to do it as it simplifies things. So clearly...there is no clear answer to this.