Javascript Objects Tutorial Example

Originally published at https://www.djamware.com

A basic example of Javascript Objects example used by almost every Javascript application or embedded Javascript. Javascript basically is object-oriented programming language just like another programming language. Globally, the object built by a collection of properties or variables or fields that has key and value separated by ":". In real life example, a chair is an object, because it has color, height, width, foot, etc that called properties which every property have its own values.

Every Javascript object's properties have their own types. The type can be other objects or primitive type what do not have properties or method. the primitive types in Javascript are:

string
number
boolean
null
undefined

Javascript primitive values are immutable which means they are unchangeable. Objects in Javascript also can describe as variable or object can contain many variables inside it.

Javascript Objects Properties

A property of an object can describe as the variables attached to the objects. The property of an object can declare with simple dot notation.

objectName.properyName

Be careful to declare an object name, like in Java or other languages, the Javascript name declaration is case sensitive alphabet and numeric.

Now, let's see the example below. We will create an object with the name chair and have properties width (number type), height (number type), color (string type), and model (string type).

var chair = new Object();
chair.width = 200;
chair.height = 400;
chair.color = "black";
chair.type = "wooden";

Another way to describe an object in Javascript, you can see below example.

var chair = { width: 200, height: 400, color: 'black', model: 'wooden' };

If you print this object variable to the browser console as below full example.

<html>
 <head>
  <title>Javascript Objects</title>
 </head>
 <body>
  <script>
   // var chair = new Object();
   // chair.width = 200;
   // chair.height = 400;
   // chair.color = 'black';
   // chair.model = 'wooden';
   var chair = new Object({ width: 200, height: 400, color: ‘black’, model: ‘wooden’ });

   console.log(chair);

  </script>

 </body>

</html>

You will see the output like below.

If the property does not have an initial value, then you will see “undefined” in the console.

chair.model;

console.log(chair.model);

The other way to describe the Javascript properties is using bracket “[]” notation. You can see the example below.

var chair = new Object();

chair[‘width’] = 200;

chair[‘height’] = 400;

chair[‘color’] = ‘black’;

chair[‘model’] = ‘wooden’;

Javascript Objects Method

A method is a function associated with an object or a property that act as a function for the object. Methods are defined as the way normal functions are defined, except that they have to be assigned as the property of an object. Below is the Javascript method structure.

var objectName = {

 method1: function(params) {

  // …do something

 }

 method2: function(params) {

  // …do something

 }

};

var objectName = {

 method1(params) {

  // …do something

 }

 method2(params) {

  // …do something

 }

};

var objectName.method1 = {

 // …do something

}

Here’s an example including the properties attached to the object.

var car = new Object({

 engine: ‘2000cc’, // property

 brand: ‘Chevrolet’, // property

 model: ‘Aveo’,   // property

 color: ‘Silver’,  // property

 price: 12999,   // property

 startEngine: function(gear) { // Object method 1

  console.log('Engine starting with gear position ’ + gear); // Method body

 },

 stopEngine: function(gear) { // Object method 2

  console.log('Engine stopped with gear position ’ + gear); // Method body

 }

});
car.startEngine(1);

car.stopEngine(4);

Below the declaration of the object is method calls. You also can change the property value of that object.

That it’s, a basic Javascript object. You can get the full source code from our GitHub.

Thanks for reading ❤

If you liked this post, please do share/like it with all of your programming buddies!

Javascript Objects Tutorial Example

Javascript Objects Properties

Javascript Objects Method

Further reading about JavaScript