Javascript can't access private properties

Asked
Active3 hr before
Viewed126 times

9 Answers

accessjavascript
90%

I have the following code and I don't understand why I can't access the private properties when I redeclare the get method., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,Javascript does not have private properties. If I understand your question correctly, from your 2nd scrip tag, you want to access the "cfg" object declared in your first script tag.,Well, you just said it, cannot access private properties. Variables defined within the IIFE aren't accessible from functions defined outside.

Let's use a made-up language as an example. In this language, like in javascript, functions define scope. Lets take a look at an example code:

var global_var

function b {
   var bb
}

function a {
   var aa
   b();
}

a() gets called, create a new stack frame. Allocate space for local variables on the stack:

The stack: ┌────────┐│var aa│ < ──a 's stack frame╞════════╡┆┆ < ──caller 's stack frame

a() calls b(), create a new stack frame. Allocate space for local variables on the stack:

The stack: ┌────────┐│var bb│ < ──b 's stack frame╞════════╡│
var aa│╞════════╡┆┆

In most programming languages, and this includes javascript, a function only has access to its own stack frame. Thus a() cannot access local variables in b() and neither can any other function or code in global scope access variables in a(). The only exception are variables in global scope. From an implementation point of view this is achieved by allocating global variables in an area of memory that does not belong to the stack. This is generally called the heap. So to complete the picture the memory at this point looks like this:

The stack: The heap: ┌────────┐┌────────────┐│var bb││ global_var│╞════════╡│││
var aa│└────────────┘╞════════╡┆┆

Now b() completes and returns, it's stack frame is removed from the stack:

The stack: The heap: ┌────────┐┌────────────┐│var aa││ global_var│╞════════╡││┆┆└────────────┘

Now let's look at an example code of a language with closures:

function b {
   var bb
   return function {
      var cc
   }
}

function a {
   var aa
   return b()
}

Now let's see what happens if we do this:

var c = a()

First function a() is called which in turn calls b(). Stack frames are created and pushed onto the stack:

The stack: ┌────────┐│var bb│╞════════╡│
var aa│╞════════╡│
var c│┆┆

Function b() returns, so it's stack frame is popped off the stack. But, function b() returns an anonymous function which captures bb in a closure. So we pop off the stack frame but don't delete it from memory (until all references to it has been completely garbage collected):

The stack: somewhere in RAM: ┌────────┐┌╶╶╶╶╶╶╶╶╶┐│var aa│┆
var bb┆╞════════╡└╶╶╶╶╶╶╶╶╶┘│
var c│┆┆

a() now returns the function to c. So the stack frame of the call to b() gets linked to the variable c. Note that it's the stack frame that gets linked, not the scope. It's kind of like if you create objects from a class it's the objects that gets assigned to variables, not the class:

The stack: somewhere in RAM: ┌────────┐┌╶╶╶╶╶╶╶╶╶┐│var c╶╶├╶╶╶╶╶╶╶╶╶╶╶┆
var bb┆╞════════╡└╶╶╶╶╶╶╶╶╶┘┆┆

Now what happens when we call c()? A stack frame for c() is created as normal. But this time there is a difference:

The stack: ┌────────┬──────────┐│var cc
var bb│ < ────attached closure╞════════╤──────────┘│
var c│┆┆

What this means is that when you redefine c in the caller's scope like this:

var c = function {
   /* new function */ }

this happens:

                     somewhere in RAM: ┌╶╶╶╶╶╶╶╶╶┐┆var bb┆└╶╶╶╶╶╶╶╶╶┘
                     The stack: ┌────────┐┌╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶┐│var c╶╶├╶╶╶╶╶╶╶╶╶╶╶┆ /* new function */ ┆╞════════╡└╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶┘┆┆

Unfortunately javascript doesn't have private variables. So it's only possible to bind it as a public variable. The workaround's workaround to this problem is to use Perl convention to tell other programmers not to touch that object unless they're modifying the implementation itself. And that convention is to start a variable name with underscores:

// WARNING: Private!
a._cfg = {
   currency: 'GBP',
   exponent: 2
};
load more v
88%

Protected fields start with _. That’s a well-known convention, not enforced at the language level. Programmers should only access a field starting with _ from its class and classes inheriting from it.,Private fields are special.,Privates should start with #. They are only accessible from inside the class.,Private fields start with #. JavaScript makes sure we can only access those from inside the class.

class CoffeeMachine {
   waterAmount = 0; // the amount of water inside

   constructor(power) {
      this.power = power;
      alert(`Created a coffee-machine, power: ${power}`);
   }

}

// create the coffee machine
let coffeeMachine = new CoffeeMachine(100);

// add water
coffeeMachine.waterAmount = 200;
load more v
72%

Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself. , Public and private class fields article at the v8.dev site , Classes constructorextendsPrivate class featuresPublic class fieldsstatic ,Like public fields, private fields are added at construction time in a base class, or at the point where super() is invoked in a subclass.

class ClassWithPrivateField {
   #privateField;
}

class ClassWithPrivateMethod {
   #privateMethod() {
      return 'hello world';
   }
}

class ClassWithPrivateStaticField {
   static #PRIVATE_STATIC_FIELD;
}

class ClassWithPrivateStaticMethod {
   static #privateStaticMethod() {
      return 'hello world';
   }
}
load more v
65%

Hiding properties with closures,Object properties were traditionally left unprotected in JavaScript or hidden, captured in a closure. Symbols and WeakMaps provide another alternative.,Accessing properties of other instances,Person instances created using the function below will have properties stored directly in them.

Both Chrome (version 36) and Firefox (version 31) support WeakMaps. Chrome 36 supports Symbols but it’s necessary to enable Experimental JavaScript at chrome://flags/#enable-javascript-harmony. Firefox supports symbols from version 33.

function print(msg) {
   var li = document.createElement('LI');
   li.textContent = msg;
   output.appendChild(li);
}

function clear() {
   output.innerHTML = '';
}
clear();

Person instances created using the function below will have properties stored directly in them.

var Person = (function() {
   function Person(name) {
      this.name = name;
   }

   Person.prototype.getName = function() {
      return this.name;
   };

   return Person;
}());

var p = new Person('John');
print('Person 1 name: ' + p.getName());
delete p.name;
print('Person 1 name: ' + p.getName() + ' — modified outside.');

To isolate property from external modification one can use an inner closure that closes over the name variable. Douglas Crockford’s code conventions for JavaScript recommend this pattern when privacy is important discouraging naming properties with the underscore prefix to indicate privacy.

var Person = (function() {
   function Person(name) {
      this.getName = function() {
         return name;
      };
   }

   return Person;
}());

var p = new Person('John');
print('Person 2 name: ' + p.getName());
delete p.name;
print('Person 2 name: ' + p.getName() + ' stays private.');
  • ES6 Symbols
var Person = (function() {
   var nameSymbol = Symbol('name');

   function Person(name) {
      this[nameSymbol] = name;
   }

   Person.prototype.getName = function() {
      return this[nameSymbol];
   };

   return Person;
}());

var p = new Person('John');
print('Person 3 name: ' + p.getName());
delete p.name;
print('Person 3 name: ' + p.getName() + ' — stays private.');
print('Person 3 properties: ' + Object.getOwnPropertyNames(p));
  • ES6 Symbols
var sym1 = Symbol('a');
var sym2 = Symbol('b');
var sym3 = Symbol('a');

print('sym1 === sym1: ' + (sym1 === sym1));
print('sym1 === sym2: ' + (sym1 === sym2));
print('sym1 === sym3: ' + (sym1 === sym3));
  • ES6 WeakMaps
var Person = (function() {
   var private = new WeakMap();

   function Person(name) {
      var privateProperties = {
         name: name
      };
      private.set(this, privateProperties);
   }

   Person.prototype.getName = function() {
      return private.get(this).name;
   };

   return Person;
}());

var p = new Person('John');
print('Person 4 name: ' + p.getName());
delete p.name;
print('Person 4 name: ' + p.getName() + ' — stays private.');
print('Person 4 properties: ' + Object.getOwnPropertyNames(p));
  • ES6 WeakMaps
var Person = (function() {
   var private = new WeakMap();

   function Person(name) {
      var privateProperties = {
         name: name
      };
      private.set(this, privateProperties);
   }

   Person.prototype.compareTo = function(other) {
      var thisName = private.get(this).name;
      var otherName = private.get(other).name;
      return thisName.localeCompare(otherName);
   };

   Person.prototype.toString = function() {
      return private.get(this).name;
   };

   return Person;
}());

var people = [
   new Person('John'),
   new Person('Jane'),
   new Person('Jim')
];

people.sort(function(first, second) {
   return first.compareTo(second);
});

print('Sorted people: ' + people.join(', '));

The same example written in Java:

import java.util.Arrays;

class Person implements Comparable<Person> {
    private String name;

    public Person(String name) {
        this.name = name;
    }

    public int compareTo(Person other) {
        return this.name.compareTo(other.name);
    }

    public String toString() {
        return this.name;
    }
}

public class Main {
    public static final void main(String... args) {
        Person[] people = new Person[] {
            new Person("John"),
            new Person("Jane"),
            new Person("Jim")
        };

        Arrays.sort(people);

        System.out.print("Sorted people: " + Arrays.toString(people));
    }
}
load more v
75%

Even though this._id and User.prototype._destroy were intended to be private, this prefixing doesn’t stop anyone from accessing any of the properties as they are part of the User object.,You could also do this and declare the private property as undefined and then assign inside the constructor:, In this post you’ll learn how to remove properties from an object in JavaScript using destructuring and the ...rest syntax. ,This lack of feature led to emulating private properties and methods by using an underscore-prefix:

function User(name) {
   this._id = 'xyz';
   this.name = name;
}

User.prototype.getUserId = function() {
   return this._id;
}

User.prototype._destroy = function() {
   this._id = null;
};

const user = new User('Todd Motto');
user._id; // xyz
user.getUserId(); // xyz
user._destroy();
user.getUserId(); // null
load more v
40%

Compared to a Map, a WeakMap has a more limited feature set. Because it doesn’t provide any method to iterate over the collection, the only way to access a value is to use the reference that points to the value’s key.,There are three popular ways of creating private class properties in ES2015.,A safer way to make private members is to declare variables inside the class constructor instead of attaching them to the new instance being created:,Therefore, it’s no longer necessary to call super() to execute the constructor of the base class or put the code in the constructor function.

Using a leading underscore (_) is a common convention to show that a property is private. Although such a property isn’t really private, it’s generally adequate to signal to a programmer that the property shouldn’t be modified. Let’s look at an example:

class SmallRectangle {
   constructor() {
      this._width = 20;
      this._height = 10;
   }
   get dimension() {
      return {
         width: this._width,
         height: this._height
      };
   }
   increaseSize() {
      this._width++;
      this._height++;
   }
}
load more v
22%

Classes may extend from a base class. A derived class has all the properties and methods of its base class, and also define additional members.,Migrating from JavaScript,A derived class can also override a base class field or property. You can use the super. syntax to access base class methods. Note that because JavaScript classes are a simple lookup object, there is no notion of a “super field”.,TypeScript enforces that a derived class is always a subtype of its base class.

Here’s the most basic class - an empty one:

tsclass Point {}
load more v
60%

private - the property or method can ONLY be accessed within the class, protected - the property or method can be accessed within the class and by classes derived from that class, public - the property or method can be accessed from everywhere. This is default,There are three access modifiers:

load more v
48%

We don’t have Access Modifiers in JavaScript, and all properties of an object are public, which means you can read and modify them outside the object.,By default, JavaScript allows you to read and modify all the properties. But by using the Proxy objects, you can create private properties in an object.  ,But what if you have a requirement to create private properties?  Consider Product object as mentioned below,,I hope you like this quick lesson on making a JavaScript property private.  You can learn more about Proxy object in this video:

let Product = {

   id: '1',
   price: 200,
   title: 'Pencil'
}
console.log(Product.id);
load more v

Other "access-javascript" queries related to "Javascript can't access private properties"