HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Functional way to have two toggles that turn each other off

Submitted by: @import:stackexchange-codereview··
0
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.
const

You 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 function

In 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.