OBJECT in JAVASCRIPT

Photo by Luca Bravo on Unsplash

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.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Beribey

Beribey

40 Followers

Always be nice to anybody who has access to my toothbrush.