An object is a flexible type of data in which we can store a collection of properties consisting of pairs of keys and values, and methods are functions stored in the object. We can access the value of a property by calling the object and referencing its key. Here's an example of an object, created using the object literal definition, and how we access the cardHeight property using dot notation:

card =  
    cardHeight: 10
    cardWidth: 10
    cardColor: 222222
   
print card.cardHeight

With the print function, we get the value of the cardHeight property by the print console.

>> 10

Functions stored in objects are called methods, and they can get parameters when called.

For example, we can create a function inside the card object that prints its properties values, and call it as we need it:

card =
    cardHeight: 10
    cardWidth: 10
    cardColor: 222222
    printCardDetails: (x) ->
            i = 0
            while i < x
                print "Height:  " + this.cardHeight + ", Width: " + this.cardWidth + ", Color: " + this.cardColor
                i++

card.printCardDetails 3

As a result, we will see the string generated by the printCardDetails method in the print console as many times as we define it with the x parameter, thrice in this case. As you can see, we have used the word this to access the values stored in the object where the method is executed.

>> "Height: 10, Width: 10, Color: 222222"
>> "Height: 10, Width: 10, Color: 222222"
>> "Height: 10, Width: 10, Color: 222222"

Understanding the concept of properties and methods will help you understand how Framer has been built. In Framer, you will use objects to build your prototypes, so keep this concept in mind when reading the following pages of the chapter. You can find further information in the CoffeeScript documentation.