JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Objects
JavaScript variables are containers for data values.
This code is used to assigns a simple value (Fiat) to a variable named car.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2
<p id=”demo”></p>
<script>
// Create and display a variable:
let car = “Fiat”;
document.getElementById(“demo”).innerHTML = car;
</script>
</body>
</html>
Output
JavaScript Variables
fiat
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=”demo”></p>
<script>
// Create an object:
const car = {type:”Fiat”, model:”500″, color:”white”};
// Display some data from the object:
document.getElementById(“demo”).innerHTML = “The car type is ” + car.type;
</script>
</body>
</html>
Output
JavaScript Objects
The car type is Fiat
Object Definition
Defining a JavaScript object that has an object literal:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=”demo”></p>
<script>
// Create an object:
const person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};
// Display some data from the object:
document.getElementById(“demo”).innerHTML =
person.firstName + ” is ” + person.age + ” years old.”;
</script>
</body>
</html>
Output
JavaScript Objects
John is 50 years old.
Spaces and line breaks are not considered important. An object definition helps in span multiple lines.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName: “Doe”,
age: 50,
eyeColor: “blue”
};
// Display some data from the object:
document.getElementById(“demo”).innerHTML =
person.firstName + ” is ” + person.age + ” years old.”;
</script>
</body>
</html>
Output
JavaScript Objects
John is 50 years old.
Accessing Object Properties
Accessing the object properties in two ways:
objectName.propertyName
or
objectName[“propertyName”]
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>There are two different ways to access an object property.</p>
<p>You can use person.property or person[“property”].</p>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName : “Doe”,
id : 5566
};
// Display some data from the object:
document.getElementById(“demo”).innerHTML =
person.firstName + ” ” + person.lastName;
</script>
</body>
</html>
Output
JavaScript Objects
There are two different ways to access an object property.
You can use person.property or person["property"].
John Doe
Object Methods
Objects can also have methods.
Methods are actions that are used on objects.
Methods are stored in properties in the form of function definitions.
Example
const person = {
firstName: “John”,
lastName : “Doe”,
id: 5566,
fullName : function() {
return this.firstName + ” ” + this.lastName;
}};
In the example above, this indicates to the person object.
I.E. this.firstName refers to the firstName property of this.
I.E. this.firstName refers to the firstName property of person.
What is this?
In JavaScript, the this keyword indicates to an object.
Which object depends on how this is being invoked (used or called).
The this keyword points to different objects depending on how it is used:
The this Keyword
In a function definition, this points to the “owner” of the function.
In the above example, this is the person object that “owns” the fullName function.
In other words, this.firstName means the firstName property of this object.
Accessing Object Methods
Accessing an object method with the following syntax:
objectName.methodName()
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName: “Doe”,
id: 5566,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
};
// Display data from the object:
document.getElementById(“demo”).innerHTML = person.fullName();
</script>
</body>
</html>
Output
JavaScript Objects
An object method is a function definition, stored as a property value.
John Doe
If a method without the () parentheses is accessed, it will return the function definition
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>If you access an object method without (), it will return the function definition:</p>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName : “Doe”,
id : 5566,
fullName : function() {
return this.firstName + ” ” + this.lastName;
}
};
// Display data from the object:
document.getElementById(“demo”).innerHTML = person.fullName;
</script>
</body>
</html>
Output
JavaScript Objects
If you access an object method without (), it will return the function definition:
function() { return this.firstName + " " + this.lastName; }
Do Not Declare Strings, Numbers, and Booleans as Objects!
When a JavaScript variable is defined with the keyword “new”, the variable is created as an object:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Avoid String, Number, and Boolean objects as they complicate the code and result in slowing down execution speed.