<h3><strong>JavaScript access property</strong></h3>
<p>There are two ways to get the property from an object "dot notation" and "bracket notation".</p>
<h4><strong>dot notati</strong>on</h4>
<p>In the dot notation, we access the property of the object using the dot operator between the object name and property name. Although the concept of Object properties and their values resemble the identifier and values, but they are not becaue we can use a reserved keyword name for the object property name(not recommended) but not for the identifier. <strong>Syntax</strong></p>
<pre>
object.property_name //for data values
object.property_name() // for methods
</pre>
<p><strong>Example </strong></p>
<div>
<pre>
<script>
var man = {
name: "Rahul",
age: 20,
code: function(){return this.name.slice(0,3)+this.age}
}
//access using dot operator
document.write(man.name+ ", ");
document.write(man.age);
document.write("<br>");
document.write("Code: "+man.code());
</script></pre>
<strong>Output</strong>
<pre>
Rahul, 20
Code: Rah20</pre>
</div>
<p><strong>Behind the code</strong> In the above example the object <code>man</code> has 3 properties out of which <code>code</code> is the method, that returns a string value containing three letters from the name plus the age of the man object. The <code>this.name.slice(0,3)</code> statement will slice out the first 3 letters from the <code>this.name</code> property. We will discuss the slice() and other built-in methods of JavaScript string in the upcoming tutorials.</p>
<h4><strong>Bracket notation </strong></h4>
<p>Bracket notation is another way of accessing or getting the properties from an object. In this technique, we use the property name inside the bracket quoted with single or double inverted quotes. <strong>Syntax</strong></p>
<pre>
object.property_name //for data values
object["property_name"]() // for methods</pre>
<p><strong>Example</strong></p>
<div>
<pre>
<script>
var man = {
name: "Rahul",
age: 20,
code: function(){return this.name.slice(0,3)+this.age}
}
//access using square bracketsr
document.write(man["name"]+ ", "); //using double quote
document.write(man['age']); // using single quote
document.write("<br>");
document.write("Code: "+man['code']());
</script></pre>
<strong>Output</strong>
<pre>
Rahul, 20
Code: Rah20</pre>
<strong>Behind the code </strong> When we use the Square brackets to get the object's property we treat the property name as a string and put it in the square bracket after the object name.</div>
<p>We can either use the dot or square bracket notation to call get the property of an object but it always recommended to use dot notation when getting the object method.</p>
<div>
<h3>JavaScript Object</h3>
We can also set new properties or values to the JavaScript object. To set a new property we can either use the dot or square bracket notation with assignment operator (=). <strong>Syntax </strong>
<pre>
object.property_name = value; //using dot operator
object["property_name"] = value; // using square brackets</pre>
</div>
<p>While setting new property if the property name already exists, the value will be assigned to the already existed property name else it will create a new property. <strong>Example</strong></p>
<div>
<pre>
<script>
var man = {
name: "Rahul",
age: 40,
}
//set property
man.height ="6(ft)";
man.kids = 2;
console.log(man); //{name: "Rahul", age: 40, height: "6(ft)", kids: 2}
</script></pre>
</div>
<p>If we assigned a new value to the new property that does not exist in the object, it will create a new property with the assigned value. But if we assigned a new value to the already existing property, it will update the existing property value with the new value. <strong>Example 2</strong></p>
<div>
<pre>
<script>
var man = {
name: "Rahul",
age: 40,
}
//set property
man.age =20; //update the existing property
console.log(man); // {name: "Rahul", age: 20}
</script></pre>
</div>
<h2><strong>Summary</strong></h2>
<ul>
<li>There are two ways to access the properties from an object using dot notation and square bracket.</li>
<li>In the dot notation access, we access the property value using the dot operator between the object name and property name.</li>
<li>In the square bracket, we pass the property name as a string in the square bracket after the object name.</li>
<li>If assigned a value to a new object property it will create a new property in the object.</li>
<li>Else it will update the value for the already existing property.</li>
</ul>
<p><strong>People are also reading: </strong></p>
<ul>
<li><a href="https://www.techgeekbuzz.com/what-is-javascript-used-for/">
What is JavaScript used for
?</a></li>
<li><a href="https://www.techgeekbuzz.com/difference-between-
css-vs-javascript
/">CSS vs JavaScript</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-frameworks/">Best JavaScript Frameworks</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-for-loop/">For Loop in JavaScript</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-for-in-and-for-of-loop/">JavaScript for…..in and for….of loop</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-function-scope/">
Function Scope in JavaScript
</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-hoisting/">Hoisting in JavaScript</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-strings/">Strings in JavaScript</a></li>
<li><a href="https://www.techgeekbuzz.com/how-to-learn-javascript-quickly/">How to Learn JavaScript quickly?</a></li>
<li><a href="https://www.techgeekbuzz.com/javascript-cheat-sheet/">JavaScript Cheat Sheet</a></li>
</ul>