JavaScript Objects

In JavaScript, most values are objects or part of objects. Even variables declared in the global scope are properties of the window object. We’ll explore this and other aspects of JavaScript objects in this post.

First, lest start with what I before mentioned, ¿where belongs a variable that is created in global scope?

The object that represent the document is object document (DOM – document object model)

On the other hand, we have the BOM(Browser Object Model) and the GJO(Global Javascript object). This 3 object are build-in object and come with the browser.

Our variable belongs to GJO, we interact with DOM when we call document. GJO always exists.

Let’s go with the principal part of this post and what you want to know, how to declare objects, add properties and methods.

How to declare an Object

we have multiple forms to declare an object in JavaScript nowadays, and we are going to see all this forms.

Declaring objects using { }

Let’s make an object called car, that will have brand, doors and as methods startCar, shutdownCar

var car = {
	brand:"jaguar",
	doors :2,
	//ahora 2 metodos
	startCar:function(){
		alert("the car is turned on");
	},
	shutdownCar:function(){
		alert("the car is turned off");
	}
};

alert(car.brand);
alert(car.doors);
car.startCar();
car.shutdownCar();
//what happen if i do this?(of course it will give us undefined)
alert(car.direction);
car.direccion = "electric";
alert(car.direction);//we have added the property direction

This form of declaring the object is called literal notation, lets see the same object but declaring it in another way:

var car ={};
//we can add the properties and methods after declaring the object too 
car.brand ="jaguar";
car.shutdownCar = function(){
   alert("the car is turned off");
};

Declaring an object using a new Object()

Same example using new Object().

var car= new Object();
car.brand ="jaguar";
car.shutdownCar = function(){
   alert("the car is turned off");
};

Besides, when we use new Object() we are using a construction notation

Creating a constructor for an object

On JavaScript, we can create a constructor creating a function, how is this? let’s create again our car object.

function car(brand,doors){
   this.brand = brand;
   this.doors = doors;
   this.shutdownCar = function(){
      alert("the car is turned off");
   };
}
//we can create an object
var x1 = new car("Jaguar",4);
alert(x1.brand);//will return Jaguar

So we can create an object constructor creating a function and using the keyword this inside of it, and ¿what is this? Well, with this we are reference the object itself.

Declaration class

Since ES6 we can use the declaration class to make a class that we can instantiate with new.

Let’s check the sintaxis of this declaration:

class name [extends] {
  // Contenido de la clase
}

As you can see you can use inheritance with the keyword extends. This dont mean that you could not use inheritance before ES6 you can but is not so easy to understand.

A quick example:

class vehiculo {
	puertas = null;
	ruedas = 2;
	
	constructor(p,r){
		this.ruedas = r;
		this.puertas = p;
	}
	
	datos(){
		console.log(`el vehiculo tiene ${this.puertas} puertas y ${this.ruedas} ruedas`);
	}
}

var a = new vehiculo(6,5);
a.datos();

el vehiculo tiene 6 puertas y 5 ruedas

Using expression class

We can use the expression class too, like we use function expression we can do the same thing with classes.

var MyClass = class [className] [extends] {
  // class body
};

As example I will remake the vehiculo class.

var vehiculo = class {
	puertas = null;
	ruedas = 2;
	
	constructor(p,r){
		this.ruedas = r;
		this.puertas = p;
	}
	
	datos(){
		console.log(`el vehiculo tiene ${this.puertas} puertas y ${this.ruedas} ruedas`);
	}
}

var a = new vehiculo(6,5);
a.datos();

el vehiculo tiene 6 puertas y 5 ruedas