Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

ES6 Symbols, What They Are and How to Use Them

Clark Pan at Code 2015
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • References
  • Keypoints

With ES6 ratification coming in June this year, now would be a great time to look at some of the new language features. Symbols are a lesser talked about new language primitive that underpins some of the new metaprogramming capabilities of ES6. This talk will give you a brief overview of what they are, and how they might affect your code.

clark-pan.github.io/Symbols_WDYK

To understand symbols you need to go back to basics of how objects work… and not work!

The ways js handles objects and strings can create unintended effects (presso shows example with values being overridden).

Symbols are a new primitive type – ie. Calling typeof will return “symbol”.

Symbols protect the values they contain and require you to access them via the symbol.

Use cases?

Because symbols are unique, there is no risk of collision. This makes them useful for storing state within web components; and can be used to make private values – that is, avoid polluting your public API. It is much like using jQuery’s .data but simpler.

ES6 has also defined built-in symbols. They allow you to hook into language features being exposed in ES6:

  • for of loop (discrete from for in, doesn’t need to access index)
  • symbol.iterator
  • instanceof
  • more to come as the language evolves

Biggest use case is encapsulation without (ab)using closures. The people consuming your code don’t necessarily want to see everything, you don’t want everything in your public API. To hack this, we have been closures to make things psuedo-private. That has lots of side effects – hard to unit test, hard to debug, bad for code re-use, small performance penalty.

Symbols solve encapsulation nicely, letting you set a const and refer to it via symbol. (see slide for pattern)

Browser support – great except for IE 🙁 Useful in io.js or node with the –harmony flag

 

You may also be interested in

    Thumbnail for Getting Touchy Feely with the Mobile Web

    Getting Touchy Feely with the Mobile Web

    Thumbnail for Building a new Web Browser in 2019

    Building a new Web Browser in 2019

    Thumbnail for Getting Your Customers Hooked with Web Notifications

    Getting Your Customers Hooked with Web Notifications

    Thumbnail for A Unified Styling Language

    A Unified Styling Language

    Thumbnail for Rethinking JavaScript with Generator Functions

    Rethinking JavaScript with Generator Functions

    Thumbnail for Design Everything

    Design Everything

    Thumbnail for Grow & Sustain a Passionate Community

    Grow & Sustain a Passionate Community

    Thumbnail for Laziness in the Time of Responsive Design

    Laziness in the Time of Responsive Design

More presentations from Code 2015

    Thumbnail for Canvas Cold War

    Canvas Cold War

    Thumbnail for Crossing The Streams

    Crossing The Streams

    Thumbnail for Pop-up Accessibility

    Pop-up Accessibility

    Thumbnail for Getting Offline with the Service Worker

    Getting Offline with the Service Worker

    Thumbnail for Async Frontiers in JavaScript

    Async Frontiers in JavaScript

    Thumbnail for JavaScript Numbers Like You’ve Never Seen Them Before

    JavaScript Numbers Like You’ve Never Seen Them Before

    Thumbnail for Eliminate JavaScript Code Smells

    Eliminate JavaScript Code Smells

    Thumbnail for The State of the Animation

    The State of the Animation

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2023