Changing the reference of a js function's argument
Lately I write react-redux apps and as a react developer I write pure, functional and predictable code. Even though I do like the experience I've got a doubt whether my code is still handsome or not.
So I have a tree in my state and I need to update a bunch of nodes in the tree. Let's say the tree's API provides a pure method pureUpdate(path, newNode, tree) => newTree
which return new tree with the node updated. In ths case my reducer method might look like
function updateNodes(tree, updateRules) {
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
tree = pureUpdate(path, node, tree);
});
return tree;
}
But I'm not sure if it's the best could be done.
The first thing which looks nasty is tree = pureUpdate(path, node, tree);
. It looks like mutating a parameter, which is discouraged, but I am just reassigning
the reference, ain't I? It's explained here in the second part of the answer. But although this trick might be ok, in this discussion said that such code might be unoptimized and reassigning parameters might cause performance issues (more info with examples). The simplest fix occured to me is to use an extra variable which will be a clone of the tree.
function updateNodes(tree, updateRules) {
let newTree = someCloneFunc(tree);
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
newTree = pureUpdate(path, node, newTree);
});
return newTree;
}
The question is if I don't miss anything and my code is still pure, handsome and will not cause any issues.
javascript redux functional-programming
add a comment |
Lately I write react-redux apps and as a react developer I write pure, functional and predictable code. Even though I do like the experience I've got a doubt whether my code is still handsome or not.
So I have a tree in my state and I need to update a bunch of nodes in the tree. Let's say the tree's API provides a pure method pureUpdate(path, newNode, tree) => newTree
which return new tree with the node updated. In ths case my reducer method might look like
function updateNodes(tree, updateRules) {
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
tree = pureUpdate(path, node, tree);
});
return tree;
}
But I'm not sure if it's the best could be done.
The first thing which looks nasty is tree = pureUpdate(path, node, tree);
. It looks like mutating a parameter, which is discouraged, but I am just reassigning
the reference, ain't I? It's explained here in the second part of the answer. But although this trick might be ok, in this discussion said that such code might be unoptimized and reassigning parameters might cause performance issues (more info with examples). The simplest fix occured to me is to use an extra variable which will be a clone of the tree.
function updateNodes(tree, updateRules) {
let newTree = someCloneFunc(tree);
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
newTree = pureUpdate(path, node, newTree);
});
return newTree;
}
The question is if I don't miss anything and my code is still pure, handsome and will not cause any issues.
javascript redux functional-programming
2
If you want to do purely functional programming, never useforEach
.
– Bergi
Nov 19 '18 at 19:46
add a comment |
Lately I write react-redux apps and as a react developer I write pure, functional and predictable code. Even though I do like the experience I've got a doubt whether my code is still handsome or not.
So I have a tree in my state and I need to update a bunch of nodes in the tree. Let's say the tree's API provides a pure method pureUpdate(path, newNode, tree) => newTree
which return new tree with the node updated. In ths case my reducer method might look like
function updateNodes(tree, updateRules) {
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
tree = pureUpdate(path, node, tree);
});
return tree;
}
But I'm not sure if it's the best could be done.
The first thing which looks nasty is tree = pureUpdate(path, node, tree);
. It looks like mutating a parameter, which is discouraged, but I am just reassigning
the reference, ain't I? It's explained here in the second part of the answer. But although this trick might be ok, in this discussion said that such code might be unoptimized and reassigning parameters might cause performance issues (more info with examples). The simplest fix occured to me is to use an extra variable which will be a clone of the tree.
function updateNodes(tree, updateRules) {
let newTree = someCloneFunc(tree);
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
newTree = pureUpdate(path, node, newTree);
});
return newTree;
}
The question is if I don't miss anything and my code is still pure, handsome and will not cause any issues.
javascript redux functional-programming
Lately I write react-redux apps and as a react developer I write pure, functional and predictable code. Even though I do like the experience I've got a doubt whether my code is still handsome or not.
So I have a tree in my state and I need to update a bunch of nodes in the tree. Let's say the tree's API provides a pure method pureUpdate(path, newNode, tree) => newTree
which return new tree with the node updated. In ths case my reducer method might look like
function updateNodes(tree, updateRules) {
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
tree = pureUpdate(path, node, tree);
});
return tree;
}
But I'm not sure if it's the best could be done.
The first thing which looks nasty is tree = pureUpdate(path, node, tree);
. It looks like mutating a parameter, which is discouraged, but I am just reassigning
the reference, ain't I? It's explained here in the second part of the answer. But although this trick might be ok, in this discussion said that such code might be unoptimized and reassigning parameters might cause performance issues (more info with examples). The simplest fix occured to me is to use an extra variable which will be a clone of the tree.
function updateNodes(tree, updateRules) {
let newTree = someCloneFunc(tree);
updateRules.forEach(updateRule => {
const { path, node } = updateRule;
newTree = pureUpdate(path, node, newTree);
});
return newTree;
}
The question is if I don't miss anything and my code is still pure, handsome and will not cause any issues.
javascript redux functional-programming
javascript redux functional-programming
edited Nov 19 '18 at 14:41
MTCoster
3,27122040
3,27122040
asked Nov 19 '18 at 12:12
user3272018user3272018
64841330
64841330
2
If you want to do purely functional programming, never useforEach
.
– Bergi
Nov 19 '18 at 19:46
add a comment |
2
If you want to do purely functional programming, never useforEach
.
– Bergi
Nov 19 '18 at 19:46
2
2
If you want to do purely functional programming, never use
forEach
.– Bergi
Nov 19 '18 at 19:46
If you want to do purely functional programming, never use
forEach
.– Bergi
Nov 19 '18 at 19:46
add a comment |
1 Answer
1
active
oldest
votes
If you're at all concerned about performance, I would not clone tree
just to avoid reassigning a parameter.
While you can use forEach
here and reassign the parameter, reduce
is the correct functional abstraction for your use case, and it's generally a better and more useful abstraction than forEach
since it can (and should) be used purely, whereas forEach
is always about side effects.
A solution based on reduce
makes the question of whether or not to clone and or reassign a function parameter completely moot, as well.
Here's a working reduce
solution - no parameter reassignment, no forEach
side effects and no reason to clone tree
:
const updateNodes = (tree, updateRules) =>
updateRules.reduce(
(acc, { path, node }) => pureUpdate(path, node, acc),
tree // initialize acc (the accumulator)
)
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374396%2fchanging-the-reference-of-a-js-functions-argument%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you're at all concerned about performance, I would not clone tree
just to avoid reassigning a parameter.
While you can use forEach
here and reassign the parameter, reduce
is the correct functional abstraction for your use case, and it's generally a better and more useful abstraction than forEach
since it can (and should) be used purely, whereas forEach
is always about side effects.
A solution based on reduce
makes the question of whether or not to clone and or reassign a function parameter completely moot, as well.
Here's a working reduce
solution - no parameter reassignment, no forEach
side effects and no reason to clone tree
:
const updateNodes = (tree, updateRules) =>
updateRules.reduce(
(acc, { path, node }) => pureUpdate(path, node, acc),
tree // initialize acc (the accumulator)
)
add a comment |
If you're at all concerned about performance, I would not clone tree
just to avoid reassigning a parameter.
While you can use forEach
here and reassign the parameter, reduce
is the correct functional abstraction for your use case, and it's generally a better and more useful abstraction than forEach
since it can (and should) be used purely, whereas forEach
is always about side effects.
A solution based on reduce
makes the question of whether or not to clone and or reassign a function parameter completely moot, as well.
Here's a working reduce
solution - no parameter reassignment, no forEach
side effects and no reason to clone tree
:
const updateNodes = (tree, updateRules) =>
updateRules.reduce(
(acc, { path, node }) => pureUpdate(path, node, acc),
tree // initialize acc (the accumulator)
)
add a comment |
If you're at all concerned about performance, I would not clone tree
just to avoid reassigning a parameter.
While you can use forEach
here and reassign the parameter, reduce
is the correct functional abstraction for your use case, and it's generally a better and more useful abstraction than forEach
since it can (and should) be used purely, whereas forEach
is always about side effects.
A solution based on reduce
makes the question of whether or not to clone and or reassign a function parameter completely moot, as well.
Here's a working reduce
solution - no parameter reassignment, no forEach
side effects and no reason to clone tree
:
const updateNodes = (tree, updateRules) =>
updateRules.reduce(
(acc, { path, node }) => pureUpdate(path, node, acc),
tree // initialize acc (the accumulator)
)
If you're at all concerned about performance, I would not clone tree
just to avoid reassigning a parameter.
While you can use forEach
here and reassign the parameter, reduce
is the correct functional abstraction for your use case, and it's generally a better and more useful abstraction than forEach
since it can (and should) be used purely, whereas forEach
is always about side effects.
A solution based on reduce
makes the question of whether or not to clone and or reassign a function parameter completely moot, as well.
Here's a working reduce
solution - no parameter reassignment, no forEach
side effects and no reason to clone tree
:
const updateNodes = (tree, updateRules) =>
updateRules.reduce(
(acc, { path, node }) => pureUpdate(path, node, acc),
tree // initialize acc (the accumulator)
)
edited Nov 19 '18 at 19:22
answered Nov 19 '18 at 17:58
TexTex
1,6031527
1,6031527
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374396%2fchanging-the-reference-of-a-js-functions-argument%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
If you want to do purely functional programming, never use
forEach
.– Bergi
Nov 19 '18 at 19:46