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.
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 📌💯❤️
