Menu Close

Articles

JavaScript: objects

JavaScript objects are composite variables that encapsulate multiple values. Each value is represented by a different element that has a name and is called “object property”. Objects can also contain properties of type: “function”. These kind of functions are called: “methods”.

Object Literal

Object literals are using a specific notation invented for JavaScript that is called: JSON = “Java Script Object Notation”. This notation is nice and slim so it was adopted by many other programming languages.

A simplified version of JSON has become standard for storing objects in text files or sending objects over the network. It is considered a light weight data representation format. It can not transport functions though.

Example:

In this example we declare an object: person that has several properties and one method. A method is a property of type function. The method name in this example is fullName.

Observe:

  • method body is enclosed in brackets {…} and belong to person object,
  • inside methods you can use keyword “this” to refer to current object.

Object Members

You can access object members in two ways:

  • objectName.propertyName

  • objectName[“propertyName”]

You access an object method with the following syntax:

  • objectName.methodName();

Inside methods you access properties of object using “this” keyword:

  • this.propertyName;
Alert: We can assign a function to a variable by mistake. Therefore do not forget to use parentheses () for a function call. Otherwise you can assign the function itself ! The empty parenthesis have the role to execute the function and are required even if there is no parameter for function.

example:

Empty Object

You can create an empty object using syntax:

Note: This is just a demo, in practice you should not use this method to create objects. The code looks messy and is considered bad practice.

Object Factory

An object factory is a normal function that create an object. This kind of function is no longer used in practice but in older JavaScript code. It is good to know about this so you can read older code:

Object Constructor

This is a special function that can produce an object, using keyword “new”. This function is more elegant than “object factory”. Does not have return, and is used only to create object instances. 

Example:

Fundamental Object

JavaScript has predefined objects. One of these is the “Fundamental Object“. There are two alternative methods to create objects using the fundamental object:

  • By using the fundamental constructor: new Object()
  • By reusing an existing object using method: Object.create()

Example:

Object prototype

Object.create() method can be used to create new object from an existing object. The new object is based on “object prototype”. An object prototype is automatically created when you create the object.

By reusing a prototype you inherit all its methods. This is how inheritance works in JavaScript. Therefore JavaScript is a Prototype Oriented Language. You can access the prototype using dot notation and you can extend the prototype with new functions and properties.

Example:

Modify prototype

The prototype of an object can be modified. You can add new functions and properties to a prototype using dot notation. When you do, all instances of the prototype will receive the new members.

Function Object

Every JavaScript function is actually a Function object. It can be created with alternative notation:

Note: The example above is only to prove a point. It is not used in practice. The point is: if a function is an object than it can have properties. It means you can create new properties for a function using dot notation.

Function properties

Having a property for a function is similar to a static variable. It can take values that are visible from outside the function and can be modified to modify the function behavior. 

Example:

Observe: You must use: function.property to define function properties. They are attached to function itself not to an object. You can not use this.property to define function properties. That is the difference. 

Define “class”

Is your head spinning yet? Sorry, this prototype theory prove to be difficult to grasp and sometimes insufficient. Therefore JavaScript try to evolve and has introduced new concept of “class”. This is an attempt to adopt Java style OOP. In fact a “class” is syntax sugar for constructor function. It can be used to create object instances using keyword: “new”.  

Syntax:

Example:

In this example you can see 2 classes. One is extending the other. This is how inheritance can be done using the new JavaScript notation. 

Notes:

  • Observe: area() it is in fact a pseudo property not a method!?
  • Classes are not supported yet for all browsers and JavaScript engines,
  • Class properties is a draft proposal not yet supported in all engines.

Object destructuring

You can use destructuring assignment with object literals. This is especially interesting when a function return multiple results that need to be assigned to different variables:

Example:

Note: Object deconstruction is very different than array deconstruction. It works by name not by position. In example above, attribute “b” is not captured into a variable and c = “test”.

Example:

Note: There is more to know about destructuring objects: MDN Destructuring

Read next: Decision