Javascript Objects Tutorial Example

Javascript Objects Tutorial Example

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

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:

  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.

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.

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!

Follow us on Facebook | Twitter

Further reading about JavaScript

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

JavaScript Programming Tutorial - Full JavaScript Course for Beginners

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

JavaScript Basics Before You Learn React

Build a CMS with Laravel and Vue

Google’s Go Essentials For Node.js / JavaScript Developers

7 best JavaScript Design Patterns You Should Know

12 Concepts That Will Level Up Your JavaScript Skills

React vs Angular vs Vue.js by Example


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

For World Class Web Development Services in India visit RB Genie

Do you want excellent and world class web development services for your valuable projects? Contact **RB Genie **now, we have more than 8 years experienced team of web developers, which specializes in overall web design and website development...