Access attributes in component

NOTE: To access an attribute in a component, use expressions as {! v.<Attribute Name>}.
----------------------------------------------------------------------------------------------------------------------

<aura:component >
    <!--Basic types-->
    <aura:attribute name="ItemName" type="String" default="Bag"/>
    <aura:attribute name="SerialNumber" type="Long" default="1"/>
    <aura:attribute name="Quantity" type="Integer" default="2"/>
    <aura:attribute name="Price" type="Decimal" default="blue"/>
    <aura:attribute name="PurchaseDate" type="Date" default="2018-11-9"/>
    <aura:attribute name="Dispatched" type="Boolean" default="true"/>
    <aura:attribute name="Color" type="String" default="blue"/>
   
    <!--Collection types-->
    <aura:attribute name="ColorArray" type="String[]" default="['red', 'green', 'blue']"/>
    <aura:attribute name="ColorList" type="List" default="['red', 'green', 'blue']"/>
    <aura:attribute name="ColorMap" type="Map" default="{a: 'red', b: 'green', c: 'blue'}"/>
    <aura:attribute name="ColorSet" type="Set" default="['red', 'green', 'blue','red']"/>
   
    <!--Object types-->
    <aura:attribute name="PersonObject" type="Object" default="{'name': 'John', 'age': '25'}"/>
   
    <a><b>My component</b></a>
   
    <h1>This is a test component</h1>
    <p>Your component code goes here.</p>
    <p>
<!--Using collection Types-->
    <strong>Array values</strong>
        <aura:iteration items="{! v.ColorArray}" var="color">
        <div>{! color} </div>
        </aura:iteration>
       
        <strong>List values</strong>
        <aura:iteration items="{! v.ColorList}" var="color">
        <div>{! color} </div>
        </aura:iteration>
       
        <strong>Map values</strong>
       
        <div>{! v.ColorMap.a} </div>
        <div>{! v.ColorMap.b} </div>
        <div>{! v.ColorMap.c} </div>
       
        <strong>Set values</strong>
        <aura:iteration items="{! v.ColorSet}" var="color" indexVar="index">
        <div>{! color} </div>
        </aura:iteration>
    </p>

</aura:component>




Note: To access an attribute in a controller and helper, use expressions as {v.<Attribute Name>}:
=======================================================================

({
doInit : function(component, event, helper) {
//javascript to initialize the component
var color = component.get("v.Color");
        var Price = component.get("v.Price");
        console.log('color is ',color);
        console.log('Price is ',Price);
}

})

Note: When we using the attribute in Component, we must use the exclamatory sign. But when we access the attribute in Controller and Helper, we do not use exclamatory sign.

OUTPUT