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

7 steps for building a REST API with Node, Express, MongoDB

A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)

My JavaScript Tech Interview Prep Notes, Part 1: Concepts

Create & Deploy a Serverless React App to S3 & CloudFront on AWS

Create Your Own Markdown Editor With React

An arrow made of paperclips

Crack The CSS Flexbox

Accessing Redux from Components In React & React Native

Concrete

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

The Difference between Var, Let and Const | JavaScript 01.

Learn Javascript

JavaScript:- Arrays

Introduction to JavaScript

JavaScript Destructuring