JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Object Properties

A property is the association between a name (key) and value within an object, and it can contain any datatype.

A property generally refers to the characteristic of an object.

Properties can usually be changed, added, and deleted, but some are read only.

Accessing JavaScript Properties

There are two ways to access an object's properties:

  • Dot notation: .
  • Bracket notation: []

Let's revisit our original example object, user.

Run code
Run code

Both dot notation and bracket notation are used regularly. However, Dot notation is faster and more readable.

Adding New Properties

In order to add a new property to an object, you would assign a new value to a property with the assignment operator (=).

Assume that the user object already exists - you can then give it new properties:

Run code

Avoid using reserved words for property or method names.

Modifying Object Properties

An object's property can be modified by assigning a new value to an existing property.

Run code

Removing Object Properties

In order to remove a property from an object, we will utilize the delete keyword.

The delete is an operator that removes a property from an object.

The following example shows how to remove a property from an object:

Run code

The delete operator deletes both the value of the property and the property itself.

The delete operator should not be used on predefined JavaScript object properties. It can crash your application.

Looping Through Object Properties

JavaScript has loop that is specifically meant for iterating over the properties of an object.

for (variable in object) {
   statement to be executed

Here is a simplified version of our main object example, user:

Run code

Using bracket notation, we can retrieve the property value as a variable, in this case x:

Run code

The loop is not to be confused with the for...of loop, which is used exclusively on the Array object type.

Another useful enumeration method is the Object.keys() method, which will return an array of the object's properties.

Run code

This method allows us to work with the properties of an object as an array, so you can leverage all of the methods available to JavaScript arrays.

Property Attributes

All properties have a name. In addition they also have a value.

The value is one of the property's attributes.

Other attributes are: enumerable, configurable, and writable.

These attributes define how the property can be accessed (is it readable?, is it writable?)

In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable).