Javascript Objects

What is Javascript Object?

Let's talk about a mobile and explain javascript object concept with this example.

As everybody knows, the mobile is one integrity, which has some properties.

Let's appoint the mobile Object.

That Object has the following properties.

Mobile.name

Mobile.model

Mobile.weight

Mobile.price

etc...

All mobiles have the same properties (fields), but their values are different.

So let's look at a mobile. Its description is

  • Mobile.name="Samsung"
  • Mobile.model="S5"
  • Mobile.weight="125gr"
  • Mobile.price="250$"
  • etc...

So let's explain what is Javascript Object .

Javascript Objects

Javascript Objects are variables, but that variables can contain many values and descriptions, what means that values.

We can declare a Javascript Object as a mobile and set in it some properties (which we show on the top)

Let's see how to do that

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>name: <span id="name"></span></li>
      <li>model: <span id="model"></span></li>
      <li>weight: <span id="weight"></span></li>
      <li>price: <span id="price"></span></li>
    </ul>
 
    <script>
       var Mobile = {name: "Samsung",model: "S5",weight: "125gr",price: "250$"};

       document.getElementById("name").innerHTML = Mobile.name;
       document.getElementById("model").innerHTML = Mobile.model;
       document.getElementById("weight").innerHTML = Mobile.weight;
       document.getElementById("price").innerHTML = Mobile.price;
    </script>
  </body>
</html>

As you see, we declared a Javascript Object which represents the mobile

In Javascript we can declare Objects with many ways.

Here are those ways.

var objectName = {...};
var objectName = new Object();
var objectName = new functionAsConstructor(...);

The function Object() is a function which creates an empty object and returns it. We have already shown, how you can do that and make your own constructor function to create objects. Check out

Javascript Objects fields

Javascript lets you create objects fields in 2 ways.

objectName.fieldName

objectName['fieldName']

Here is an example

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>name: <span id="name"></span></li>
      <li>model: <span id="model"></span></li>
      <li>weight: <span id="weight"></span></li>
      <li>price: <span id="price"></span></li>
    </ul>
 
    <script>
       var Mobile = {};
       Mobile.name = "Samsung";
       Mobile.model = "S5";
       Mobile['price'] = "250$";
       Mobile['weight'] = "125gr";
 
       document.getElementById("name").innerHTML = Mobile.name;
       document.getElementById("model").innerHTML = Mobile.model;
       document.getElementById("weight").innerHTML = Mobile.weight;
       document.getElementById("price").innerHTML = Mobile.price;
    </script>
  </body>
</html>

Javascript Objects methods

Javascript lets you have methods in Objects (as fields).

You can have methods in Objects like this

objectName.methodName = function(...){...}

Or

objectName['methodName'] = function(...){...}

After declaration, you can call that methods like this.

objectName.methodName(...)

Here is an example.

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>name: <span id="name"></span></li>
      <li>model: <span id="model"></span></li>
      <li>weight: <span id="weight"></span></li>
      <li>price: <span id="price"></span></li>
    </ul>
 
    <script>
       var Mobile = {};
       Mobile.name = "Samsung";
       Mobile.model = "S5";
       Mobile['price'] = "250$";
       Mobile['weight'] = "125gr";
       
       Mobile.getFieldValue = function(fieldName)
       {
           return this[fieldName];
       }
 
       document.getElementById("name").innerHTML = Mobile.getFieldValue('name');
       document.getElementById("model").innerHTML = Mobile.getFieldValue('model');
       document.getElementById("weight").innerHTML = Mobile.getFieldValue('weight');
       document.getElementById("price").innerHTML = Mobile.getFieldValue('price');
    </script>
  </body>
</html>

You can use some Javascript declared Objects

var x = new String(); var y = new Number(); var z = new Boolean();

var x = new String();
var y = new Number();
var z = new Boolean();