0

I came across this example in a MDN doc, for example:

class Search1 {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}

If I pull up node, and run just the line included as part of the object literal, it doesn't work:

> Symbol.search
Symbol(Symbol.search)  
> [Symbol.search]
[ Symbol(Symbol.search) ]
> [Symbol.search]('somthing')
TypeError: [Symbol.search] is not a function

I think I've also seen this syntax in a few other places, like e.g. in the react docs:

handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
}

Is this just a use of destructuring syntax? It doesn't seem like it.

Brian Peterson
  • 2,800
  • 6
  • 29
  • 36
  • Related: https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal. But note this is asking how to use this feature. My question was more "What is this?" – Brian Peterson May 11 '19 at 03:54
  • 1
    `var foo = {}; foo[event.target.id] = event.target.value; this.setState(foo);` – epascarello May 11 '19 at 04:03

3 Answers3

2

brackets are used when you have variable as key and not a plain string.

const obj = {
    "someId": 'abc',
};

const e = {
    target: {
        id: "someId"
    }
};

console.log(obj[e.target.id]);

Apart from above mentioned, it is also used to access the numeric keys (Just like array) and when key is computed. See - https://javascript.info/object#square-brackets

random
  • 7,756
  • 3
  • 19
  • 25
1

Turns out, that's just part of the spec.

enter image description here It looks a bit like array de-structuring, but it's not.

In the case of [event.target.id], you're assigning the value that event.target.id points to be a key in the object passed to setState(). If you tried to do this without the brackets ([]), it would not work, not how you expect anyway.

In the case of [Symbol.search](string), here you're using the Symbol.search symbol (see symbols) as a key which is dynamically evaluated immediately to its actual, unique value. The dynamic evaluation is allowed because this value becomes the key in an object literal definition. The value which the key points to is a function being defined here, which takes string as its first and only parameter, and operates on that. This is a hook for allowing an object to define how it behaves when used as a parameter, in this case to the .search() function. See here.

Brian Peterson
  • 2,800
  • 6
  • 29
  • 36
1

Thanks for @randomSoul's answer, for completing it I might say that braces also make you to have a string key with spaces like below:

const myOBJ = {
  'my key': 'my assigned String Value'
}

Then you can call that key value pair with this braces syntax like:

console.log(myOBJ['my key'])

This is rarely used in JavaScript, but the main purpose of using braces for getting the value from object literal is for getting dynamically computed keys of object. Like that you have an object that each key is represented user id, and you based on that you want to decide to get the specific user id that you got from your url params or somewhere else then you would be able to get user data like below:

console.log(lastFiveUserData[myUserId].age)
halfer
  • 19,824
  • 17
  • 99
  • 186
amdev
  • 6,703
  • 6
  • 42
  • 64
  • 2
    rarely used? bracket notation is rarely used?? – epascarello May 11 '19 at 04:15
  • 1
    As well as when the key is `numeric` , because accessing something like `obj.0` is invalid. Just like an array. – random May 11 '19 at 04:15
  • @epascarello i told its rarely used because most of data shapes that comes from database or generated has some keys that it not has any space in it (lets be hopefull and say Mostly :)) – amdev May 11 '19 at 04:20