OBJECT in JAVASCRIPT

Javascript is originally designed in a rudimentary way, used to validate on the client-side.

Photo by Luca Bravo on Unsplash

If you follow the career of a web developer, you must work every day with js. Js itself is bad, but it comes with countless beneficial libraries/frameworks (jQuery, AngularJS, …); thanks to NodeJS, it even encroaches on the back-end.

In the first lesson, I will introduce the most basic knowledge in JavaScript: object.

What the hell is an Object?

Anyone who has studied Object-Oriented Programming knows about Class and Object concepts. However, there are no Classes but only Objects in JavaScript, so that it won't be obvious for some.
In OOP languages ​​such as C ++, Java, C #, … It can be roughly understood that Class is a framework, and an Object is an object created based on that framework. Js has no class; we can instantiate an object without defining its class; it is possible to understand that all objects have a common class.

We can understand an object collecting data fields (properties) and functions (methods). As shown below, the Student object has 2 fields, firstName, and lastName, and has the function showName

var person = {
  firstName: 'John',
  lastName: 'Wick',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

Object in JS

How to initialize the object

In some other languages, to initialize objects, we use the keyword new + class name. However, because in JavaScript, there is no class concept, we can create objects in one of two ways. Object literal initialization is more commonly used.

// Way 1: Object literal
// Declare all fields and functions
var person = {
   firstName: 'Hoang',
   lastName: 'Pham',
   showName: function () {
     console.log (this.firstName + '' + this.lastName);
   }
};

// Way 2: Object constructor
var psn = new Object ();
psn.firstName = 'Hoang';
psn.lastName = 'Pham';
psn.showName = function () {
     console.log (this.firstName + '' + this.lastName);
   };

For simple applications, we can temporarily use these two ways. However, with some more complex problems, if you use an object literally every time you initialize the object, your code will be long and duplicated (you must declare properties and methods every time). To solve this problem, people use a pattern called the Constructor pattern. A function will act as a constructor to initialize the object (This way is like declaring a class in other languages).

function Person (firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.showName = function () {
      console.log (this.firstName + '' + this.lastName);
   };
}

// When you want to create an object person, just call the constructor
var psn1 = new Person ('John', 'Wick');
var psn2 = new Person ('Peter', 'Thief');

Another commonly used way is to use prototype (I will talk more about prototype in the following articles), but I see most people use Constructor pattern more.

function Person () {}

Person.prototype.firstName = 'Hoang';
Person.prototype.lastName = 'Pham';
Person.prototype.showName = function () {
      console.log (this.firstName + '' + this.lastName);
};

// The created object will have the fields firstName, lastName
// and function showName
var psn1 = new Person ();
console.log (psn1.firstName); // John
psn1.showName; // John Wick

What you can do with objects

1. Access an object field/function

To access an object’s field/function, we can use a sign. (dot notation) and [] (bracket notation). Dot notation is more commonly used, but bracket notation can do a lot better.

var person = {
   firstName: 'Hoang',
   lastName: 'Pham',
   50: 'Hi', // The property has a numeric name, no dotNotation can be used
   showName: function () {
     console.log (this.firstName + '' + this.lastName);
   }
};

console.log (person.firstName); // John
console.log (person ['firstName']); // John

console.log (person.50); // 
console.log (person ['50 ']); //

console.log (person.showName ()); // John Wick
console.log (person ['showName'] ()); // John Wick

To traverse all fields of an object, we need to use the simple function.

var person = {
  firstName: 'John',
  lastName: 'Wick',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

for(var prop in person) {
  console.log(prop); // firstName, lastName, showName
}

2. Add / Delete a field/function of the object

With static typing languages like C #, Java, an object is instantiated based on class, so they always have fixed fields and functions. However, because JavaScript is a dynamic typing language, it is easy to add/delete fields in code.

var person = {
   firstName: 'Hoang',
   lastName: 'Pham',
   showName: function () {
     console.log (this.firstName + '' + this.lastName);
   }
};

delete person.lastName; // Delete lastName field
person.lName = 'Just adding'; // Add field lName

console.log (person.lastName); // undefined
console.log (person.lName); // Just adding

3. Serialize and deserialize

To communicate with the server, JavaScript often submits data as pair-value (via a form) or JSON. Therefore, javascript supports converting an object to JSON string and vice versa

var person = {
   firstName: 'Hoang',
   lastName: 'Pham',
   showName: function () {
     console.log (this.firstName + '' + this.lastName);
   }
};

// Serialize will lose the method, only keep the properties
JSON.stringify (person); // '{"firstName": "John", "lastName": "Wick"}'

var jsonString = '{"firstName": "John", "lastName": "Wick"}';
var psn = JSON.parse (jsonString); // Convert string to object
console.log (psn.firstName); // John
console.log (psn.lastName); // Wick

Through this article, you have an overview of objects in JavaScript.