DEV Community

Hiding details in JavaScript classes with symbols

Oliver Mensah on October 30, 2017

Classes are now supported in JavaScript(ES6 feature). One key important of classes is bundling methods and data together for specific objects. Henc...

Read full post

JavaScript Joel • Nov 3 '17

Symbol only changes the property key it does not add any privacy.

The first example is equivalent to this:

// here the key is type 'string'
p['s_firstname'] = 'Nana';

The 2nd example is equivalent to this:

// here the key is type 'Symbol'
p[s_firstname] = 'Nana';

Using the symbol will still allow you to set the firstname.

let s_firstname  = Symbol();

class Person {
    constructor(firstName) {
        this[s_firstname] = firstName;
    }

    log() {
        console.log('I am', this[s_firstname]);
    }

}

let p = new Person("Oliver")
p.log(); // I am Oliver
p[s_firstname] = "Nana";
p.log()// I am Nana

JavaScript Joel • Nov 3 '17

Alternatively, you can also achieve privacy by switching from using a Class to using a closure.

// firstname cannot be modified!
const person = (firstName) => ({
  log: () => console.log('I am', firstName)
})

let p = person("Oliver")
p.log(); // I am Oliver

Oliver Mensah • Nov 4 '17

I am concerned about the classical way of preventing outside modification of class properties. I have been finding means to do that until I tried using symbols. In my approach, it works and that is why I wanted to share with others but I did not know that they modified using another approach as you have stated. I like how you have outlined the process. But can you help in the classical way of hiding details in JavaScript?

JavaScript Joel • Nov 6 '17 • Edited

I am not a fan of classes in JavaScript. As a matter of fact, I never create code with classes. I have found that functions will serve the same purpose. I prefer using the revealing module pattern over JavaScript classes.

Here's an example:

const createPerson = (firstName) => {
  var s_firstname = firstName

  const log = () =>
    console.log('I am', s_firstname)
  const setName = firstName =>
    (s_firstname = firstName)

  return {
    log,
    setName
  }
}

const me = createPerson('unknown')
me.setName('Joel')
me.log()

I added a setName function to demonstrate how to set the private var s_firstname.

Oliver Mensah • Nov 6 '17

That's cool

Oliver Mensah • Nov 4 '17

Okay. Thanks for the feedback

JavaScript Joel • Nov 3 '17

You can also enumerate property-symbols with this command:

Object.getOwnPropertySymbols(p)

So if you do not know the symbol, you can still set the property using code like this:

let p = new Person("Oliver")
// set first property-symbol to 'Nana'
p[Object.getOwnPropertySymbols(p)[0]] = 'Nana'
p.log() // I am Nana

Oliver Mensah • Nov 4 '17

Well noted.

Er Galvão Abbott • Nov 4 '17

"Encapsulation is used to hide the values or state of a structured data object inside a class, preventing unauthorized parties' direct access to them."

You're basing your argument on the wrong premises:

It's a common misconception that encapsulation is about "hiding" something. It isn't.
Symbols aren't about that.

Yes, encapsulation is - among other things - used to prevent direct access to a property or method, but this has nothing to do with "authorization" (another common misconception).

Oliver Mensah • Nov 4 '17 • Edited

The whole idea here is to hide the details in a class so they cannot be changed outside class. It is obvious that using the approach I propose, they cannot be changed outside the class, however,@joelnet , outlined means that they can be accessed outside the class and then modified, which refutes the article.

Er Galvão Abbott • Nov 4 '17

I'm sorry this will seem like nitpicking, but I believe concepts are truly important: every property, unless static (which I don't believe JS has, but I might be wrong), is always being accessed "outside the class", since they are being accessed in an object, and not the class itself.

My goal is not the final result you wish (protecting the properties), but just to set OO straight.

Sammy Israwi is absolutely correct: the way to do it in OO is through what we call visibility (setting a property or method as public, protected or private), which seems to be in ES' future.

Oliver Mensah • Nov 4 '17

No worries. I appreciate the way, we are tackling the flaws though. That is a good way of critiquing an article.

Oliver Mensah • Nov 4 '17

Thanks for the feedback too.

Joe Gaudet • Nov 4 '17

Cool concept, I didn't know symbols had made their way into JS. Shame you have to explicitly invoke them with a constructor and there isn't some sugar like in ruby / scala

:a_symbol

WRT to data hiding encapsulation, not sure if you've seen the draft spec for private properties / methods. The syntax is ugly, but nice to finally get it in.

github.com/hemanth/es-next#orthogo...

Marios Antonoudiou • Nov 4 '17 • Edited

Here is my two cents when it comes to private members.

const Person = function(firstName) {
    const privateFirstName = firstName  // This is "private"

    this.log = () => console.log(`Hi! I am ${privateFirstName}`)   // This is "public"
}

const m = new Person('Marios')
m.log()

But then again, this is just a personal preference.

Sammy Israwi • Nov 2 '17

Fantastic! I didn't know about Symbols before.

But why not use Private Fields? (which has been merged into the Class Fields proposal).

It's not yet implemented, but it is on Stage 3 so hopefully, it will be coming soon!

Oliver Mensah • Nov 2 '17 • Edited

Most often _ is prefixed before the properties to signify private properties but they can still be modified outside the class.

Thanks for the feedback and I will look into Private Fields

Er Galvão Abbott • Nov 4 '17

That's because prefixing something with an underscore is a convention and not a language feature. In order to truly protect object properties you need visibility, as pointed by Sammy and explained in my latest reply to my own comment.

If the language doesn't have visibility features any method you use to try and protect the properties will simply be an ugly jerry-rig (that includes the prefix).