12

Can any one please explain difference between component.getReference vs component.get and $A.getReference vs $A.get. I have been through some blogs and code that guide through the basics.

I am new to lightning experience and components.

17

get returns an immediate value that you want to use right now, while getReference returns a value that will be updated in real time.

For example, if you want to fire an event, you use get, because you'll be using it now, but if you want to register an event handler, you use getReference, because you'll be using the reference later.

Similarly, if you need to know the value of an attribute right now, use get, but if you need to have that value updated automatically as it changes, you use getReference to get notified of any changes to the value later.

$A simply refers to the global Aura library. It's used to get global events, attributes, and so on. component refers to the local component or application, and is used to refer to local attributes and events. If you're not sure, you simply need to ask yourself "Is the value I'm looking for registered with the current component?" If yes, use component, and if not, use $A.

If you're still not sure, check the documentation. Odds are, if the documentation refers to $A, you need to refer to $A, and if it refers to component, you need to as well.

Note that $A is a fixed value and will always exist anywhere in your code, including controllers, helpers, and renderers, while component is the simply the first parameter of some methods; if you want to choose a different name, like cmp, you're free to do so.

The documentation always refers to the first parameter of methods that accept a component as component for consistency, but there's nothing special about that name, and it's not some sort of magic or global variable.


This simple application demonstrates the difference between get and getReference:

<aura:application >
    <aura:attribute name="valueA" type="String" default="Hey, Jude" />
    <aura:attribute name="valueB" type="String" />
    <aura:attribute name="valueC" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <lightning:input name="reflect" value="{!v.valueA}" label="Current Value" />
    <lightning:input name="valuea" disabled="{!true}" value="{!v.valueA}" label="Value" />
    <lightning:input name="valueb" disabled="{!true}" value="{!v.valueB}" label="getReference" />
    <lightning:input name="valuec" disabled="{!true}" value="{!v.valueC}" label="get" />

</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.valueB", component.getReference("v.valueA"));
        component.set("v.valueC", component.get("v.valueA"));
    }
})

In this code, we link valueB to a reference to valueA, but we only copy the current value of valueA in to valueC. As the user starts typing, you'll see that valueB updates in real-time, but valueC does not. That's the difference between get and getReference as a practical use case. You'd also typically want to do so if you dynamically create components and want to be notified, and for dynamically assigned event handlers.

3
  • Great explanation.
    – Keith C
    May 2 '18 at 15:02
  • 2
    Is it going too far to say get is the equivalent of {# ... } and getReference is the equivalent of {! ... }?
    – Keith C
    May 2 '18 at 15:05
  • @KeithC That's the impression that I get as well, but the documentation isn't that explicit about it.
    – sfdcfox
    May 2 '18 at 15:46
2

Can't find anything explicit in the documentation, but I assume $A is a single instance of a component that is useful for getting global values such as labels or for providing utility methods. Where you are using a component instance reference, additional data related to that specific component is attached e.g. aura:attribute values.

On the get/getReference, from my naive reading of the the open source for Component.js and PropertyReferenceValue.js, the get immediately asks the value provider for a value whereas the getReference returns a wrapper that has an evaluate method so the asking of the value provider for a value can be deferred until later. I've listed some of the relevant documentation and method code below.

I assume this mechanism relates to the timing of the construction of the components, where the dynamically created components need to be able to get the values sometime after the create call has been made. But a deeper explanation requires someone more familiar with the design to answer.

As someone new to this technology, I suggest you just follow the examples for now. (In Eclipse plugin development there was an explicit "monkey see, monkey do" principle which said always start from a working code example because learning all the subtlety up-front would take way too long.)

get

/**
 * Returns the value referenced using property syntax.
 * For example, <code>cmp.get("v.attr")</code> returns the value of the attr aura:attribute.
 *
 * @param {String}
 *            key - The data key to look up on the Component.
 * @public
 * @platform
 * @export
 */
Component.prototype.get = function(key) {
    if(this.destroyed===1){
        return undefined;
    }
    key = $A.expressionService.normalize(key);
    var path = key.split('.');
    var root = path.shift();
    var valueProvider = this.getValueProvider(root, this);
    if (path.length) {
        if(!valueProvider){
            $A.assert(false, "Unable to get value for key '" + key + "'. No value provider was found for '" + root + "'.");
        }

        var value;
        if($A.util.isFunction(valueProvider.get)){
            value = valueProvider.get(path.join('.'),this);
        }else{
            value = $A.expressionService.resolve(path,valueProvider);
        }

        return value;
    } else {
        return valueProvider;
    }
};

getReference

/**
 * Returns a live reference to the value indicated using property syntax.
 * This is useful when you dynamically create a component.
 *
 * @example
 * $A.createComponent(
 *     "ui:button",
 *     {
 *         "aura:id": "findableAuraId",
 *         "label": "Press Me",
 *         "press": cmp.getReference("c.handlePress")
 *     },
 *     function(newButton){
 *         // Do something with the new button
 *     }
 * );
 *
 * @param {String}
 *            key - The data key for which to return a reference.
 * @return {PropertyReferenceValue}
 * @public
 * @platform
 * @export
 */
Component.prototype.getReference = function(key) {
    if(this.destroyed===1){
        return null;
    }
    key = $A.expressionService.normalize(key);
    var access=$A.clientService.currentAccess;
    var accessId=access&&access.getGlobalId();
    if(!this.references.hasOwnProperty(key)) {
        this.references[key] = {};
    }
    if(!this.references[key].hasOwnProperty(accessId)) {
        this.references[key][accessId] = new PropertyReferenceValue(key, this);
    }
    return this.references[key][accessId];
};
2

While you can get more details around specific APIs, but this is how I understand this. You can get more details on the documentation by appending the below URI to your instance.

/reference.app#reference?topic=api:$A

$A namespace APIs works at the framework level and is within the global scope, whereas component APIs has a local scope specific to a Lightning component. If you look at the documentation for $A, it states:

The $A namespace is the entry point for using the framework in JavaScript code.

Coming to your actual question around the specifics of the APIs that you have. The documentation for $A.getReference states:

Returns a live reference to the global value indicated using property syntax.

And $A.get:

Returns the value referenced using property syntax. Gets the value from the specified global value provider.

Now if you refer to the documentation for component level APIs, it's referenced when you create/refer to a component and thus its local to the component that is being created. The component.getReference states:

Returns a live reference to the value indicated using property syntax. This is useful when you dynamically create a component.

As for component.get, it looks up for value of an element specified within the local scope of the component.

Returns the value referenced using property syntax. For example, cmp.get("v.attr") returns the value of the attr aura:attribute.

The data key to look up on the Component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.