DONATE  
MENU
AJAX
JSON
HTML
JAVASCRIPT

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 » JavaScript Objects
Share Tweet WhatsApp

JavaScript Objects

A JavaScript object is similar to an array but it may interest you to know that even arrays are also objects. JavaScript objects are like our real life objects. For example, a radio. A radio is an object. It possesses various properties and methods. Properties such as color, name and others. Methods such as play, pause and a whole lot others. The properties possess values e.g a radio whose color is black. The methods are not values but rather functions that carry out a particular action on the radio when called e.g play to start playing a song. The combination of these properties and methods makes up every radio. To understand objects, see them just the way you see arrays meaning objects can hold multiple values but such values are not accessed using an index number but rather a named index. A named index is the name given to a value or function in an object by which the value can be access. Objects' values are arranged in name:value pairs, we thereafter use each name to obtain each individual values. In some programming languages like PHP, an object is same thing as an associative array meaning associating a name by which an array value can be access. Components of Objects Generally, objects are used in grouping similar items that actions can be performed upon together e.g dates. They usually comprise of: PROPERTIES: These are the various values contained in an object which may be numbers, strings, boolean, arrays, objects e.g the length of an array in the array object. METHODS: These are functions definitions contained in an object which when called upon perform whatever action they were defined for pertaining the object e.g the push() of the array object which adds a value to an array. ARRAYS AS OBJECTS Let's examine arrays as objects as this may afford us the opportunity to have a basic understanding of the concept. JavaScript arrays are objects. They have properties such as the length which when used with any array will return the length or number of values in the array. The array object also have as one of its methods the sort() method which when called on any array will sort the values of such an array in either ascending or descending order. Therefore, creating objects allows us to group values together and also define methods that can work with those values or the object in general. So, you also can create objects. For example, an object named product which can have properties like product_id, product_name, product_description, product_price and methods like changePrice() to change the price of a product and getInfo() to get all information regarding the product. EXAMPLE
<script>
    
var product = {
//VALUE_NAME : VALUE
"product_id":"17839FHG" /*A property */,
"product_name": "Stack T - Shirt" /*A property */,
"product_price": 350 /*A property */,
"product_desc": "A T - shirt for stackbeginners." /*A property */,
"getInfo": function (){
return  [this.product_id, this.product_name, this.product_desc, this.product_price];
} /*A method*/,
"changePrice": function (new_price){
this.product_price = new_price;
} /*A method*/
};


alert(typeof(product));
</script>

Copy PRACTICE IT

Above is an example of a JavaScript object. You will learn more on creating and accessing objects in subsequent pages. SUMMARY
  1. Objects are a special kind of data type that contain multiple values just like arrays.
  2. Arrays are also objects.
  3. Objects' values are not accessed using an index number.
  4. Object values are arrange in name:value pairs.
  5. The name is then used in accessing the value
  6. The values of an object are mainly divided into two namely properties and methods.
  7. Properties are values such as numbers, strings, booleans, arrays and other objects.
  8. Methods are functions that can be called on objects. They are mainly defined and called methods because they are to perform operations on or with the values of that object. For example, sorting the values of an array object, getting all information of an object named "product" and etcetera.
  9. Creating objects allow us to assign to one variable various values that are related with methods to perform numerous actions on the values.
Take a short quiz on JavaScript Objects.
Ask a question or tell us if JavaScript 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