Difference between Ember.get() and this.get()

by

Welcome to Ember 😉

Every object that extends Ember Observable mixin supports the get() method (among others).

When you call this.get(), the this must refer to such an object (Route, Controller, Component, your own class that extends Ember.Object and so on). Calling get() on plain object would cause a failure. Let me show the difference:

const emberObjectInstance = Ember.Object.create({
 name: 'Bala'
});

emberObjectInstance.get('name'); // returns 'Bala'

const plainObject = { name: 'Bala'};
plainObject.get('name'); // causes a failure since get() is not a function

However, using Ember.get() successes in both cases:

Ember.get(emberObjectInstance, 'name'); // returns 'Bala'
Ember.get(plainObject, 'name');         // returns 'Bala', too

which can be also written with imports as follows

import { get } from '@ember/object';

get(emberObjectInstance, 'name'); // returns 'Bala'
get(plainObject, 'name');         // returns 'Bala', too

Note: not to forget, calling either of get() makes computed property get computed (in the most common cases, I don’t want to dive deep now – lazy computation, volatile extensions etc), but for the sake of understanding the difference, we can work with plain values.

From own experience, I am using Ember.get() everywhere I know a plain object might be the object whose property I need to retrieve. A nice example is setupController() hook into which I may pass plain object from my unit tests to test setupController()‘s functionality.

// some route:
setupController(controller, model){
    this._super(...arguments);

    const name = Ember.get(model, 'name'); // ***

    controller.set('isNamePresentOnSetup', Ember.isPresent(name));
}

// in my unit tests I can use plain object:
...
const modelMock = { name: 'Bala' }; // plain object is enough because I use Ember.get instead of model.get() (see ***)?
const controllerMock = Ember.Object.create(); // has to be Ember.Object since I use controller.set() within setupController()

subject.setupController(controllerMock, modelMock);
assert.ok(controllerMock.get('isNamePresentOnSetup'), "property 'isNamePresentOnSetup' set up correctly if model name is present");
...

I could also user Ember.set(controller, 'isNamePresentOnSetup', Ember.isPresent(name)) and then pass plain controller mock into setupController(), too.

I think this is a good start since you are new in Ember and I am sure Ember gurus would have much more to add.
Relevant Ember docs:

https://guides.emberjs.com/v2.9.0/object-model/

https://guides.emberjs.com/v2.9.0/object-model/computed-properties/

https://guides.emberjs.com/v2.9.0/object-model/reopening-classes-and-instances/

UPDATE:
Using get() with chained paths works different than working with POJOs.
For example in objectInstance.get('a.b.c') if b is undefined the return value is undefined. Converting this to objectInstance.a.b.c when b is undefined would instead raise an exception.

More Related Contents:

  1. Ember-data embedded records current state?
  2. How to use multiple models with a single route in EmberJS / Ember Data?
  3. Ember component send action to route
  4. Using Ember.js, how do I run some JS after a view is rendered?
  5. Get current route name in Ember
  6. Handling errors with the (now default) Ember Data JSON-API adapter
  7. Hashbang URLs using Ember.js
  8. emberjs – how to mark active menu item using router infrastructure
  9. Ember pagination full example
  10. infinite scroll with ember.js (lazy loading)
  11. How can an observer find out the before and after values of the observed property in Ember.js?
  12. Client-side Javascript app – url routing with no hash tag
  13. Is it possible to load a Handlebars template via Ajax?
  14. What is the purpose of the Ember.Container
  15. How to fire an event to Ember from another framework
  16. How to use third party npm packages with ember cli app
  17. Right way to do navigation with Ember
  18. Positional index in Ember.js collections iteration
  19. How can I execute array of promises in sequential order?
  20. CRUD blueprint overriding in sails.js
  21. How do you create a custom adapter for ember.js?
  22. Token Authentication vs. Cookies
  23. How to make embedded hasMany relationships work with ember data
  24. Separate REST JSON API server and client? [closed]
  25. Ember transition & rendering complete event
  26. Ember without Ember Data
  27. Ember.js and RequireJS
  28. how can I invoke an ember component dynamically via a variable?
  29. Rendering resolved promise value in Ember handlebars template
  30. How to observe all object property changes?

Leave a Comment