Objects in JavaScript
- Tram Ho
Article purpose
- Syntax for declaring objects
- Using Objects in JavaScript
Content
In real life, everything is an object. For example: cars, motorcycles, guitars, computers….
A car has properties like weight and color, and methods like start and stop.
All cars have the same attributes, but the attribute values differ between cars.
All vehicles have the same methods, but the methods are performed at different times.
Define an object
Objects are also variables. But objects can hold multiple values. Eg:
1 2 | <span class="token keyword">var</span> car <span class="token operator">=</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">"Fiat"</span><span class="token punctuation">,</span> model<span class="token operator">:</span> <span class="token string">"500"</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token string">"white"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Values are written as pairs name: value (property names and values separated by a colon).
Object Properties
Pairs name: value in JavaScript objects are called properties. Eg:
1 2 3 4 5 6 7 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> eyeColor<span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
Then the properties would be:
| Properties | Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 21 |
| eyeColor | black |
Access object properties
There are 2 ways to access object properties
- Way 1:
objectName.propertyName - Way 2:
objectName["propertyName"]
Eg:
1 2 | person<span class="token punctuation">.</span>lastName<span class="token punctuation">;</span> |
1 2 | person<span class="token punctuation">[</span><span class="token string">"lastName"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
Object method
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions. Eg:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span> firstName<span class="token operator">:</span> <span class="token string">"John"</span><span class="token punctuation">,</span> lastName<span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span> id<span class="token operator">:</span> <span class="token number">5566</span><span class="token punctuation">,</span> <span class="token function-variable function">fullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>firstName <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>lastName<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| Properties | Values |
|---|---|
| firstName | Nguyễn |
| lastName | Thiên |
| age | 21 |
| eyeColor | black |
| fullName | function() {return this.firstName + ” ” + this.lastName;} |
Key word this.
- In the function definition, this refers to the object that owns the function.
- In the above example object person possess function fullName.
- In other words,
this.firstNamemeans attributefirstNameof this object.
Method access
We can also access a function via a method:
1 2 | objectName<span class="token punctuation">.</span><span class="token function">methodName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Eg:
1 2 | name <span class="token operator">=</span> person<span class="token punctuation">.</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
If you access a method without brackets (), it will return the function definition. Eg:
1 2 | name <span class="token operator">=</span> person<span class="token punctuation">.</span>fullName<span class="token punctuation">;</span> |
Do not declare strings, numbers and Boolean as objects!
When a JavaScript variable is declared with the keyword new, this variable will be created as an object
1 2 3 4 | <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo x như một đối tượng String</span> <span class="token keyword">var</span> y <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo y như một đối tượng Number</span> <span class="token keyword">var</span> z <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Boolean</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Khai báo z như một đối tượng Boolean</span> |
They complicate our code and slow down execution.