In order to provide features like property bindings, computed properties, auto updating templates, and a lot more, Ember.js framework uses get and set methods, instead of accessing the properties directly, as shown above. These methods, apart from returning and setting the properties on the object, also register property changes in the object, and will trigger any listeners that are observing this property:

var emberObject = Ember.Object.create({
  firstName:"suchit",
  lastName: "puri"
});
console.log(emberObject.get('firstName')); //suchit
emberObject.set('firstName',"something");
console.log(emberObject.get('firstName')); //something

The set method also lets you chain your setters. You could do something like the following:

emberObject.set('firstName',"something").set('lastName',"anything").get("firstName");

Such chaining of method calls can be really handy in seeding/changing data, while writing the test cases for Ember.Object instances.

Sometimes, instead of just using plain properties, you might want to transform or aggregate the data present in them. Computed properties in Ember.js let you use your functions as properties, so that you can add the logic to transform the data present in other properties. You can use get method to get the computed property, like any other property. Let's take a look at the following example:

import Ember from 'ember';

export default Ember.Object.extend({
  firstName: "",
  lastName: "",
  fullName: function(){
    return this.get('firstName') + " " + this.get('lastName'),
  }.property('firstName','lastName')
});

Getting the user properties from app.js present in chapter-2/example5/app/app.js as follows:

import user from './user';

myUser = user.create({
  firstName: "suchit",
  lastName: "puri"
});
console.log(myUser.get('fullName')); //suchit puri

Here, as you can see, we have defined a user class. In this definition, we have defined a method fullName that returns the combination of your first name and last name. The only distinguishing factor about the fullName method is that we have explicitly made this function to act as a property, by appending the property at the end.

The property method makes a normal function act like an Ember.js object property. The arguments of the property method make the function dependent on other properties, which means that if any of the properties present in the arguments of the property method changes, the function recomputes its value.

Let's see that in the following example:

import Ember from 'ember';

export default Ember.Object.extend({
  firstName: "",
  lastName: "",
  fullName: function(){
    return this.get('firstName') + " " + this.get('lastName'),
  }.property('firstName','lastName')
});

Getting/setting the user properties from app.js is present in chapter-2/example5/app/app.js, as follows:

import user from './user';

myUser = user.create({
  firstName: "suchit",
  lastName: "puri"
});

console.log(myUser.get('fullName')); //suchit puri
myUser.set("firstName","Tony");
myUser.set("lastName","Stark");
console.log(myUser.get('fullName'));//Tony Stark

If, after fetching in the full name, we decide to change the first name and last name of our user object, we can do this by using the set function on our object. The next time we go to fetch the fullName, we will get the updated fullName of the user.

Let's take a look at the following example:

import Ember from 'ember';

export default Ember.Object.extend({
  firstName: "",
  lastName: "",
  fullName: function(){
    console.log("fullName computed property called");
    return this.get('firstName') + " " + this.get('lastName'),
  }.property('firstName','lastName')
});

import user from './user';

var myUser = user.create({
  firstName: "suchit",
  lastName: "puri"
});

console.log(myUser.get('fullName'));
myUser.set("firstName","Tony");
myUser.set("lastName","Stark");
console.log(myUser.get('fullName'));
console.log(myUser.get('fullName'));

//Output

//"fullName computed property called"
//"suchit puri"
//"fullName computed property called"
//"Tony Stark"
//"Tony Stark"

Let us have a look at the example:

The key thing to understand here is that you need to include all the dependent properties correctly, while creating your computed property. Failing to do so will mean that the computed property will not return the correct results and will be using stale cached values.

Let's see that by an example, the chapter-2/example7/:

import Ember from 'ember';

export default Ember.Object.extend({
  firstName: "",
  lastName: "",
  fullName: function(){
    console.log("fullName computed property called");
    return this.get('firstName') + " " + this.get('lastName'),
  }.property('lastName')
});

import user from './user';

var myUser = user.create({
  firstName: "suchit",
  lastName: "puri"
});

console.log(myUser.get('fullName'));
myUser.set("firstName","Tony");
console.log(myUser.get('fullName'));

//output
//"fullName computed property called"
//"suchit puri"
//"suchit puri"

Here, we have removed the firstName dependency from our computed property fullName. Now fullName depends only on the lastName. Doing this, the cache of computed property would only get invalidated, if the last name changes.

Let us get the fullName of the user. We can see in the output that it returns the correct result. It calls in the function fullName, which returns the correct full name of the user. Now, if we update the firstName of the user, and call the fullName computed property on the user, it will still return the earlier cached value suchit puri, since none of the dependent property of the computed property has changed. You can see that such small things can result in unexpected behavior in your application. So, as a rule of thumb, include all the properties a computed property uses as dependent properties.