patternjavascriptMinor
Functional way to have two toggles that turn each other off
Viewed 0 times
turntoggleseachoffwaytwothatfunctionalotherhave
Problem
I have two sets of toggles that need to "uncheck" each other. This is my current solution which is working. Can it somehow get more functional/elegant?
let unscheduledLayerToggles = [unscheduledLayerToggle, unscheduledLayerToggleToolbar];
let availableLayerToggles = [availableLayerToggle, availableLayerToggleToolbar];
flipToggles(firstToggles, secondToggles)
flipToggles(secondToggles, firstToggles)
function flipToggles(firstToggles, secondToggles) {
firstToggles.forEach(function (toggle) {
on(toggle, "change", function () {
secondToggles.forEach(function(element) {
element.checked = false
})
})
})
}Solution
The logic itself is simple enough. I see that you are using ECMAScript 6, with it there are some things you could do to simplify the code and make it more robust.
You are using
In the same manner as you can use
Arrow functions
ES6 provides a great way to both shorten/simplify function declarations, as well as isolate their scope better: Arrow Functions.
The syntax is explained well on MDN like I provided. In the case of your
(mind the indentation, which is a personal preference of mine for 2 spaces indent instead of 4)
constYou are using
let for unscheduledLayerToggles and availableLayerToggles, which is fine, but in the case that you will not be reassigning different values/arrays to those names, you could simply use const instead of let. Note that this will not make the arrays immutable, so you can still manipulate their contents, it only disallows assigning something different to them.flipToggles functionIn the same manner as you can use
const to declare function (in the style of var foo = function () { ... }). It helps to make the intentions clear that the function will not change.Arrow functions
ES6 provides a great way to both shorten/simplify function declarations, as well as isolate their scope better: Arrow Functions.
The syntax is explained well on MDN like I provided. In the case of your
flipToggles function, we could write the code this way and eliminate all the unnecessary function() declarations.const unscheduledLayerToggles = [unscheduledLayerToggle, unscheduledLayerToggleToolbar];
const availableLayerToggles = [availableLayerToggle, availableLayerToggleToolbar];
flipToggles(firstToggles, secondToggles)
flipToggles(secondToggles, firstToggles)
const flipToggles = (firstToggles, secondToggles) => {
firstToggles.forEach(toggle => {
on(toggle, "change", () => {
secondToggles.forEach(element => {
element.checked = false
})
})
})
}(mind the indentation, which is a personal preference of mine for 2 spaces indent instead of 4)
Code Snippets
const unscheduledLayerToggles = [unscheduledLayerToggle, unscheduledLayerToggleToolbar];
const availableLayerToggles = [availableLayerToggle, availableLayerToggleToolbar];
flipToggles(firstToggles, secondToggles)
flipToggles(secondToggles, firstToggles)
const flipToggles = (firstToggles, secondToggles) => {
firstToggles.forEach(toggle => {
on(toggle, "change", () => {
secondToggles.forEach(element => {
element.checked = false
})
})
})
}Context
StackExchange Code Review Q#157108, answer score: 5
Revisions (0)
No revisions yet.