DONATE  
MENU
PHP
AJAX
JSON
JAVASCRIPT
MYSQL
CSS
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 » Introduction » JavaScript Objects
Share Tweet WhatsApp

JavaScript Objects

An object is similar to an array. This means it can also hold multiple values.
var Person = {name:"Orji James", height:1.74};
An object is a value or variable that contains multiple values that can be accessed using a named index. Unlike arrays, objects are usually used to group values that are related in one way or the other. For example, the JavaScript Math object, which contains just values that help in carrying out mathematical operations easily or you can create an object named "Book" which contains details about a book. Arrays & Objects The major difference between arrays and objects is that numbers (index numbers) are used in accessing the values of arrays while names (named index) are used to access the values of an object. A named index is a name specified for every value of an object by which they can be access. In the example above, the named index, name will access the value "Orji James" while the height will access the value "1.74". In some programming languages, their associative arrays are equivalent to JavaScript objects. Associative arrays are arrays that can be access using a name associated with each value but JavaScript do not support associative arrays instead it has objects. Objects' Properties & Methods The values in an object are mainly divided into two: properties and methods. A property is any value other than a function. It may be a number, string, boolean, array or another object.
var Person = {name:"Orji James", height:1.74};
A method on the other hand is a function that can be executed when it is accessed.
var person = {walk: function(){
alert("Person is walking...");
},
sit: function(){
alert("Person just sat down...");
}
}
Creating Objects Objects can be created explicitly,
var Person = {name:"Orji James", height:1.74};
Or implicitly/using the Object() prototype,
var Person = new Object();
Person.name = "Orji James";
Person.height = 1.74;
And better still, using an object constructor function,
function Person(){
this.name = "Orji James";
this.height = 1.74;
} //constructor function

var person1 = new Person(); //object
The easiet way to create an object is the explicit method.
var Person = {name:"Orji James", height:1.74};
It does same thing as using the implicit or Object prototype method. The object constructor function method enables us define a prototype(blueprint) that can be used in creating many other objects using the new keyword. For example, if we define a prototype called "Book", we can then use that prototype in creating various books e.g "Things Fall Apart", "Sugar Girl", "Cinderella" and just any other book. Accessing Objects' Properties & Methods To access any property or method of an object, we use the property or method name alongside the object name as shown below,
objectName.propertyName; //Access Property
objectName.methodName(); //Access Method
OR
objectName['propertyName']; //Access Property
objectName['methodName'](); //Access Method
Static Properties & Methods After defining a prototype that can be used in creating new objects, you must thereafter create an object(s) from that prototype using the new keyword. This enables us to have the properties and methods of the prototype on the newly created object.
function Person(){
this.name = "Orji James";
this.height = 1.74;
}

var person1 = new Person();
person1.height; //1.74
Static properties and methods are those properties and methods of a prototype that can be access without creating an object of the prototype or class. For example,
var num = Number.MAX_VALUE; //MAX_VALUE is a static property of the Number prototype that can be access without creating an object of the Number prototype using the new keyword.
var milliseconds = Date.now(); //now() is a static method of the Date prototype that can be access without creating an object of the Date prototype using the new keyword.
String.prototype;
String.constructor;
Therefore, whenever we use a property or method of an object prototype without creating an object from it, it means that property or method is a static one. You will learn more on object creation, static properties and methods in later chapters. Object's typeof() Using the typeof() operator on an object will return object. Therefore, to test if a value is an object or not, use the typeof() operator on the value.
<script>
var x = {num1: 1, num2: 2, callNum: function(){}};
alert(typeof(x));
</script>

Copy PRACTICE IT

You will learn much more about objects in subsequent tutorials. SUMMARY
  1. Objects are like arrays as they can hold multiple values.
  2. Unlike arrays, we access objects using named index.
  3. Objects contain properties and methods.
  4. Properties are the individual values of whatever data type in an object.
  5. Methods are functions which when called on an object carry out an action.
  6. The typeof operator when used on an object will return object.
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