JavaScript Basis—Objects.

In real life, a car is an object. A car has properties like weight and color, and methods like start and stop.

All cars have the same properties, but the property values differ from car to car.

All cars have the same methods, but the methods are performed at different times.

JavaScript Object

JavaScript objects are containers for named values called properties or methods.

JavaScript variables are containers for data values. Objects are variables too, but they can contain many values.

Think of an object as a list of values that are written as name: value pairs, with the names and the values separated by colons.

Example:

var person = { name: “John”, age: 25, FavColor: “Blue”, height: 150; }

These values are called Properties.

Object Properties

The name:values pairs in JavaScript objects are called properties.

Accessing Object Properties

You can access object properties in two ways.

objectName.propertyName
//or
objectName[’propertyName’]

This example demonstrate how to access the age of our person object.👇

var person = { name: “John” , age: 25 , favColor: “blue”; }

var x = person.age;

var y = person[age];

Object is one of the core concepts in JavaScript

Object Constructor

In the previous lesson, we created an object using the object literal (or initializer) syntax. This allows you to create only a single object.

Sometimes, we need to set an "object type" that can be used to create a number of objects of a single type.

The standard way to create an "object type" is to use an object constructor function.

function person(name, age, height) { this.name = name;

this.age = age;

this.height = height;

}

The above function (person) is an object constructor, which takes parameters and assigns them to the object properties.

Objects Methods

Objects can also have methods.

Methods are actions that can be performed on objects.

Methods are functions that are stored as object properties.

Methods are stored in properties as function definitions.

Use the following syntax to access an object method:

methodName = function() { code lines }

Access an object method using the following syntax:

objectName.methodName

An object method is a property that contains Methods Definition.

As you already know, document.write() outputs data. The write() function is actually a method of the document object.

document.write(“This is some text”);

Method Is a function, belonging to an object. It can be referenced using the this keyword.

The this keyword is used as a reference to the current object, meaning that you can access the objects properties and methods using it.



Defining methods is done inside the constructor function.

For example:

function person(name, age) {

this.name = name;

this.age = age;

this.changeName = function (name) {

this.name = name;

}

}



var p = new person("David", 21);

p.changeName("John");

//Now p.name equals to "John"

In the example above, we have defined a method named changeName for our person, which is a function, that takes a parameter name and assigns it to the name property of the object.

this.name refers to the name property of the object.

In a function definition, this refers to the “owner” of the function.

The this keyword refers to the current object.

Note that this is not a variable. It is a keyword, and its value cannot be changed.

You can also define the function outside of the constructor function and associate it with the object.

function person(name, age) {

this.name= name;

this.age = age;

this.yearOfBirth = bornYear;

}

function bornYear() {

return 2016 - this.age;

}

As you can see, we have assigned the object’s yearOfBirth property to the bornYear function.

The this keyword is used to access the age property of the object, which is going to call the method.

it’s not necessary to write the function’s parentheses when assigning it to an object.

Call The Methods As Usual

function person(name, age) {

this.name= name;

this.age = age;

this.yearOfBirth = bornYear;

}

function bornYear() {

return 2016 - this.age;

}



var p = new person("A", 22);

document.write(p.yearOfBirth());

// Outputs 1994

Call the method by the property name you specified in the constructor function, rather than the function name.

Do Not Declar String, Numbers and Boolean as Objects 📌

Once you have an object constructor, you can use the new keyword to create new objects of the same type

When a JavaScript variable is declared with the keyword "new", the variable is created as an object:

var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object

Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.

Note: As object properties are similar to variables, methods are similar to Functions.

JavaScript Objects

These are Just the basis of JavaScript objects. With the knowledge of this, you should be able to understand more about the different JavaScript objects.

Please if you learnt something from this article, please do well to applaud and follow me. Thanks for reading. Happy coding!!❤️

Remember: It won’t work unless you try it 📌💯❤️

A front-end web developer || A lover of Mathematics || A computer science student.