Let’s Learn Ember – Computed Properties


Computed Property is one of the interesting feature that Ember provides which helps the users build a clean Javascript interface. As defined by Ember in its official website, a computed property lets you declare a function as a property. As we create a computed property as a function, whenever we call this property, Ember will automatically invoke this function and treat its return value as the value of the computed property.


In the example illustrated below, we have created a computed property called “fullName”, which depends upon the other two properties “firstName” and “lastName”.

In the above example, we have created a computed property “fullName” by injecting property method to the function so that this function will be declared as a property. The parameters “firstName” and “lastName” passed to this function (computed property) denote that the value of this property depends upon these two properties. Whenever we access this computed property “fullName”, this function will be called , which will in turn gets the properties ‘firstName’ and ‘lastName’ and returns the value.


One interesting feature to note here is that whenever there is any change to the properties that the computed properties depend upon, the value of the computed properties is dynamically updated upon their invocation. This is illustrated in the example below.

Example - Computed Properties

So, we observed that computed properties help to relieve the server load to some extent, as it does not generate the content based on the properties. The server need not render all the data as the data is manipulated and new content are created based on them. The usefulness of computed properties will be accentuated while using templates, which we will cover in later chapters.

So, in this post, I gave an overview on the computed properties, illustrated with an example.

In the upcoming post, we will look into Observers.

Till then, Happy Coding!! 🙂