I have an object like this:

layers = {a: false, b: false, c: false, d: false, e: false};
setLayer = (val) => {
   // set val to true and every other to false
}

I will call setLayer function on onClick event. Like this:

<a onClick={this.setLayer('c')}>hello</a>
// this will set layers like this: {a: false, b: false, c: true, d: 
false, e: false}
<a onClick={this.setLayer('b')}>hello world</a>
// this will set layers like this: {a: false, b: true, c: false, d: 
false, e: false}

I do not want to use for loop and check for each key in obj. Beacuse obj is adding more and more object in my code.

I have an object like this:

layers = {a: false, b: false, c: false, d: false, e: false};
setLayer = (val) => {
   // set val to true and every other to false
}

I will call setLayer function on onClick event. Like this:

<a onClick={this.setLayer('c')}>hello</a>
// this will set layers like this: {a: false, b: false, c: true, d: 
false, e: false}
<a onClick={this.setLayer('b')}>hello world</a>
// this will set layers like this: {a: false, b: true, c: false, d: 
false, e: false}

I do not want to use for loop and check for each key in obj. Beacuse obj is adding more and more object in my code.

• javascript
• reactjs
• object

• You must use a loop of some kind. Whether it's a for, for in, or any of those mentioned already in answers below. If you don't want a loop then you should just keep one variable like layerSet = 'b' that gets updated on click with the right value, then check this variable later in your logic. – Derpanel Commented Mar 13, 2018 at 12:38

5 Answers 5

Take a variable

var lastUpdatedKey;

setLayer = (val) => {
    lastUpdatedKey && (layers[lastUpdatedKey] = false);
    layers[val] = true;
    lastUpdatedKey = val;
}

i would suggest something likethis:

const initrnalValues = {a: false, b: false, c: false, d: false, e: false}
const layers = {a: false, b: false, c: false, d: false, e: false};

const setLayer = var => {
 Object.assign(layers, initrnalValues, {
    [val]: true
}
}

that's it, no loops of any kind

If you do not want to use a loop, you'll have to use a different implementation.

A very elegant solution is to use a Proxy in place of your layers object:

const layers = new Proxy({}, {
  get: function(obj, prop) {
    return prop === obj.__active__;
  },
  set: function(obj, prop, value) {
    if (!Object.getOwnPropertyDescriptor(obj, '__active__')) {
      Object.defineProperty(obj, '__active__', {
        value: null,
        writable: true,
        configurable: false,
        enumerable: false,
      });
    }

    obj[prop] = false;
    if (value === true) {
      obj.__active__ = prop;
    }
  }
});

layers.a = true;
layers.b = false;
layers.c = false;
console.log(layers);

layers.b = true;
console.log(layers);

layers.c = true;
console.log(layers);

Use Object.keys to iterate over the keys in the layers object. If the key is matching with 'val', set it to true

layers = {a: false, b: false, c: false, d: false, e: false};
setLayer = (val) => {
 Object.keys(layers).forEach(item => {
   item == val ? layers[item] = true: ''
 })
}

Object.keys(object).forEach(key => object[key] = false)
object[oneKeyNeedToBeTrue] = true;