Why can’t I add properties to a string object in javascript?

by

There are 8 language types in JavaScript:

  • 7 primitive types: Undefined, Null, Boolean, Number, BigInt, String, and Symbol
  • 1 non-primitive type: Object

Values of the primitive types are called primitive values and they cannot have properties.
Values of the Object non-primitive type are called objects an they can have properties.

When you try to assign a property named 'bar' to a variable foo, like so:

foo.bar="abc";

then the result will depend on the type of the value of foo:

(a) if the value of foo is of the type Undefined or Null, then an error will be thrown,

(b) if the value of foo is of the type Object, then a named property 'bar' will be defined on the object foo (if necessary), and its value will be set to 'abc',

(c) if the value of foo is of any other type, then a TypeError will be thrown in strict mode: “can’t assign to property "bar" on foo: not an object”. In loose mode, the above assignment operation will be a no op. In either case, the variable foo will not be changed in any way.

So, as you can see, assigning properties to variables only makes sense if those variables are objects. If that is not the case, then the assignment will either do nothing at all, or even throw an error.

In your case, the variable test contains a value of the type String, so this:

test.test = "test inner";

does nothing at all.

However, since ES5 introduced accessor properties, there is an exception to what I’ve said above. Accessor properties allow us to define functions which are invoked whenever the property is either retrieved or set.

For instance:

var str="";
str.prop;

Here str is a variable holding a String value. Therefore, accessing a property of that variable should be a no-op (str.prop merely returns undefined). This is true with one exception: if String.prototype contains a accessor property 'prop' with a defined getter, then that getter will be invoked.

So, if this is defined:

Object.defineProperty( String.prototype, 'prop', {
    get: function () {
        // this function is the getter
    }
});

then this

str.prop;

will invoke that getter function. This also works in strict mode.

Live demo: http://jsfiddle.net/fmNgu/

However, I don’t think that adding accessor properties to the built-in prototypes would be a good practice.

More Related Contents:

  1. Include another HTML file in a HTML file
  2. What is the ‘new’ keyword in JavaScript?
  3. Why does my http://localhost CORS origin not work?
  4. How to write denormalized data in Firebase
  5. How to set a cookie for another domain
  6. Add directives from directive in AngularJS
  7. How can I check if a scrollbar is visible?
  8. Upload file with Ajax XMLHttpRequest
  9. Javascript date regex DD/MM/YYYY
  10. jQuery checkbox change and click event
  11. Handlebars/Mustache – Is there a built in way to loop through the properties of an object?
  12. How to convert a string of numbers to an array of numbers?
  13. $(document).ready shorthand
  14. How do I get the Back Button to work with an AngularJS ui-router state machine?
  15. Add/remove HTML inside div using JavaScript
  16. JavaScript: A BackSlash as part of the string
  17. React Hooks – What’s happening under the hood?
  18. Unable to preventDefault inside passive event listener
  19. When/why to prefix variables with “$” when using jQuery? [duplicate]
  20. JQuery Ajax post parameters sometimes not sent on IE
  21. D3 fill shape with image using pattern
  22. What is ‘define’ used for in JavaScript (aside from the obvious)?
  23. Determine if ajax call failed due to insecure response or connection refused
  24. svg / d3.js rounded corners on one side of a rectangle
  25. Get value of a custom attribute
  26. Are equal timeouts executed in order in Javascript?
  27. Spying on a constructor using Jasmine
  28. How do I dump JavaScript vars in IE8?
  29. How does recursive algorithm work for Towers of Hanoi?
  30. Chrome userscript error: “Unsafe JavaScript attempt to access frame”

Leave a Comment