What does @@ (“at at”) mean in ES6 JavaScript?

by

@@ describes what’s called a well-known symbol. (Note that it isn’t actually valid syntax in JS.) According to the ES6/ES20151 specification:

Well-known symbols are built-in Symbol values that are explicitly referenced by algorithms of this specification. They are typically used as the keys of properties whose values serve as extension points of a specification algorithm. Unless otherwise specified, well-known symbols values are shared by all Code Realms (8.2).

Code Realms refer to different instances of a JavaScript environment. For example, the Code Realm of the root document would be different to that of JavaScript running in an <iframe>.

An example of where it matter what code realm an object comes from is when trying to use instanceof to determine whether an object is an array (hint: it won’t work if it’s from another frame). To avoid these kinds of issues from popping up with symbols, they are shared so that references to (say) @@toString will work no matter where the object came from.

Some of these are exposed directly through the Symbol constructor, for example, @@toPrimitive is exposed as Symbol.toPrimitive. That can be used to override the value produced when attempting to convert an object to a primitive value, for example:

let a = { [Symbol.toPrimitive]: () => 1 };
console.log(+a); // 1
console.log(a.valueOf()); // (the same object)
console.log(a.toString()); // "[object Object]"

In general, symbols are used to provide unique properties on an object which cannot collide with a random property name, for example:

let a = Symbol();
let foo = { [a]：　1　};
foo[a]; // 1

There is no way to access the value except by getting the symbol from somewhere (though you can get all symbols for an object by calling Object.getOwnPropertySymbols, so they cannot be used to implement private properties or methods).

1: See this es-discuss topic for some discussion about the different names.

More Related Contents:

  1. What’s the difference between using “let” and “var”?
  2. ECMAScript 6 arrow function that returns an object
  3. One-liner to take some properties from object in ES 6
  4. How to update nested state properties in React
  5. How to load external scripts dynamically in Angular?
  6. Curly Brackets in Arrow Functions
  7. How to destructure into dynamically named variables in ES6?
  8. Which browsers support import and export syntax for ECMAScript 6?
  9. ECMAScript 2015: const in for loops
  10. What is the difference between “let” and “var”?
  11. ES6: import module from URL
  12. Using Objects in For Of Loops
  13. How to clone a javascript ES6 class instance
  14. Spreading undefined in array vs object
  15. ECMAScript 6 class destructor
  16. React.createClass vs. ES6 arrow function
  17. Getting a list of statics on an ES6 class
  18. Are HTMLCollection and NodeList iterables?
  19. ES6 – Call static method within a class
  20. Are ES6 template literals faster than string concatenation?
  21. spread operator vs array.concat()
  22. Promises, pass additional parameters to then chain
  23. Javascript: Using `.includes` to find if an array of objects contains a specific object
  24. String interpolation on variable
  25. Why should forEach be preferred over regular iterators?
  26. require(‘babel/register’) doesn’t work
  27. functional way to iterate over range (ES6/7) [duplicate]
  28. ES6 module scope
  29. ECMA6 generators: yield promise
  30. ES6 – declare a prototype method on a class with an import statement

Leave a Comment