DONATE  
MENU
AJAX
JAVASCRIPT
JSON
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Objects » Accessing Objects
Share Tweet WhatsApp

Accessing Objects

In this page, you will learn how to access the various properties and methods of an object in JavaScript. Unlike arrays, objects' properties and methods can be accessed using a named index or better still, index name. A named index is the name specify for a particular object's property or method during creation. With the named index, you can access any property and method of an object just as shown below, ACCESSING OBJECT'S PROPERTIES Object properties can be access in two ways. The popular way involves writing the name of the property after the object name while separating both with a dot (.).
objectName.propertyName;
The second way of accessing object properties involves having the name of the property in bracket ([ ]) just after the name of the object.
objectName['propertyName'];
ACCESSING OBJECT'S METHODS We can also access object methods just the way we access object properties. The difference should be placing parentheses (()) in front of the method name else the method definition is returned.
objectName.methodName();
objectName['methodName']();
EXAMPLES
<script>    
var product = {
product_id:"17839FHG",
product_name: "Stack T - Shirt",
product_price: 350,
product_desc: "A T - shirt for stackbeginners.",
getInfo: function (){
return  [this.product_id, this.product_name, this.product_desc, this.product_price];
},
changePrice: function (new_price){
this.product_price = new_price;
}
};


alert(product.product_name+" initial cost was "+product.product_price); //Using properties of the object in an expression
product.changePrice(670); //Using a method of the object
alert("The price is now "+product.product_price); //Using properties of the object in an expression
</script>

Copy PRACTICE IT

The above can also be written as,
<script>    
var product = {
product_id:"17839FHG",
product_name: "Stack T - Shirt",
product_price: 350,
product_desc: "A T - shirt for stackbeginners.",
getInfo: function (){
return  [this.product_id, this.product_name, this.product_desc, this.product_price];
},
changePrice: function (new_price){
this.product_price = new_price;
}
};


alert(product['product_name']+" initial cost was "+product['product_price']); //Using properties of the object in an expression
product['changePrice'](670); //Using a method of the object
alert("The price is now "+product['product_price']); //Using properties of the object in an expression
</script>

Copy PRACTICE IT

SUMMARY
  1. The properties and methods of an object can be access using their index names.
  2. An index name is a name given to a particular object property or method during creation.
  3. To access an object property, you can either join the object name and the property name together using a dot (.) or have the property name inside a bracket([ ]) in front of the object name.
  4. Same applies to accessing an object method. But addition, we need to have parentheses (()) in front of it for the method to execute or its definition is returned.
Take a short quiz on Accessing Objects.
Ask a question or tell us if Accessing Objects is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode