OBJECT in JAVASCRIPT

Photo by Luca Bravo on Unsplash

What the hell is an Object?

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

How to initialize the object

// 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

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

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

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create styled-components library

Angular 13 Starter with ESLint, Material, Transloco, Jest, TestCafe, Docker & Prettier 🚀

Dude, where’s my data? (VAO’s in WebGL)

Why you should stay away from Angular CLI

Creating Illusions in p5.js -Dynamic Kanizsa Illusion -Part 4

VS Code Extensions That Will Improve your Productivity

Animate everything in ReactNative with single line of code!

Passing data from Parent to Child Components and Vice Versa with React

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

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

More from Medium

Promises in JavaScript

Javascript: Polyfill Vs Transpiling

JavaScript Closure

JavaScript Destructuring