Javascript Tutorial: Objects Example

by Didin J. on Aug 20, 2019 Javascript Tutorial: Objects Example

A basic example of Javascript Objects example used by almost every Javascript application or embedded Javascript

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.

Jumps to the examples:

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:

  1. string
  2. number
  3. boolean
  4. null
  5. 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.

Javascript Objects - Properties Example

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
  }
};

or

var objectName = {
  method1(params) {
    // ...do something
  }
  method2(params) {
    // ...do something
  }
};

or

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.

Javascript Objects - Methods Example

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

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks!

Loading…