Understanding Javascript Properties and How They Relate to Objects
Feb 11, 2020 • 6 Minute Read
Introduction
JavaScript is an interpreted, object-oriented language that has two main data types: primitives and objects. This data within JavaScript is contained as fields (properties or variables) and code (procedures or methods). Properties and variables are similar in nature, but properties are specifically tied to objects while variables are not.
A property can be the defining aspect of an object or a variant of it that separates it from other similar objects. For instance, the object fruit has many variants in the form of types of fruit, such as strawberries or bananas; colors, including red or yellow; shapes, from round to oval; and sizes, from small to large. All of these variants allow an object to be defined specifically and recognized. They give it scope and meaning as a data type.
When describing objects and their purpose in JavaScript, one can look at the distinction between properties and methods. Property is the value stored in the hash key, while function is the method stored there. Properties define it, while methods allow it to do things. However, a method is really just a property that can be called through references to functions. A property can be either a value or a function, and the function is known as the method.
Another way to look at object properties is as keys of an array (the object). In order to access object properties, you will need to use either the dot or bracket notation within your code, which I go into below.
Dot Notation vs. Bracket Notation Syntax
These two different forms of notation allow you as a developer to identify properties objects contain within them and access them. Below is a comparison of how the syntax looks with each notation. I am using apple as the object and the property of green for its color.
Dot notation for accessing object properties with the object being constant:
ObjectName.property / / apple.green
Dot notation for accessing specific object properties (green) within object:
Access property
apple.green;
Bracket notation for accessing object property value with the object being constant:
Obj[‘green’]’ // ‘value’
Bracket notation for accessing object properties with a constant variable:
Access property with variable
ObjectName[“property”]
Apple[green]
Here is just a simple object without properties shown in both notations.
Dot:
obj.name; // “apple”
Bracket:
obj[‘name’]; // “apple”
When to Use Each Notation
If you compare the two basic object syntaxes, you may notice that this is the basic comparison: object.property vs. object[“property”]. Dot notation does not require the property or variable to be in parentheses after the dot on the left side of an equation or line, while bracket notation does. This is a slight difference at first glance.
The first example, showing dot notation, and the second, showing bracket notation, perform basically the same function. It is generally recommended to use the dot notation for simplicity and quickness. However, there are specific instances when one is more useful or preferred to the other. One of those times is when you are writing code using variables, properties, or identifiers.
Sometimes, the term identifier is also used in place of variable, but in reality an identifier identifies the variable, function, or property. It is a sequence of characters within the JavaScript code. When dealing with the actual variable as it is called or written down, in order for JavaScript to read identifiers written in dot notation, the syntax has to be valid, case sensitive, and written in the correct manner. Bracket notation, on the other hand, is more flexible.
In general, bracket notation is preferred when accessing variables and not just an object, as well as when dealing with invalid identifiers.
A Look at Methods
An object like fruit has a wide range of properties, including some of the previously mentioned examples of color and shape. It can also have various methods, such as its growing season and stoppage of growth. Thus, all fruit can have the same properties used to compare against one another, but with different values for methods associated with different fruits. They may also have the same method, but performed at different times of the year.
There is also a syntax or linguistic difference, however. Within JavaScript, if the value of an object is a primitive, then it is typically referred to as a property. Meanwhile, the value can be referred to as a method if it contains a function.
Here are examples of property values (obj=fruit): Fruit.name = orange Fruit.shape = oval Fruit.color = orange
Below are two function or method examples (obj=fruit): fruit.grows() fruit.collected()
Below is a script that acts as a function of the variable melon. The variable is not a property in this case for namesake (so it is not necessarily tied to object or a property). Since a function, showAlert(), is shown, many JavaScript coders will refer to it as a method and not a property within the confined of the object’s value.
<script>
function showAlert() {
var melon = "tastes good";
alert (myText);
}
</script>
The above function will display a text dialog box that pops up on the screen saying “tastes good” to the variable melon. A method vs. a property or primitive was calculated to display the text dialog box or change the text itself from what it was previously.
Keep in mind that a variable is not a property as it does not have to be associated with an object as value, and objects themselves can actually be variables.
Below, let's assign a variety of values (primitives or properties) to the object banana:
Var banana = {type:”fruit”,” kind:”edible”, color: “yellow”};
As you see, the code deals with a variable var, but it is also an object with various properties associated with it, such as color.
Conclusion
Properties and variables have an important place in JavaScript. Properties are tied to one of two main data types within JavaScript, and this data type is objects. The other data type is primitives. Methods also exist that can be tied to objects, and they contain functions.