JavaScript Objects

Previous Next

Real Life Objects, Properties, And Methods

JavaScript provides the capability to create and manipulate real-life objects, properties, and methods within HTML, which can significantly enhance the interactivity and functionality of web pages. In this explanation, we'll cover how JavaScript can be used to represent real-life objects, define their properties and methods, and interact with them within an HTML document. We'll also provide practical examples to illustrate these concepts.

Understanding Objects, Properties, and Methods

In JavaScript, objects are collections of related data and functionalities. They are used to model real-life entities and can have properties (attributes) and methods (functions that perform actions).

Example Object: Car

Consider a real-life object "Car". A car has properties such as make, model, and year, and methods like start, drive, and stop.

Defining Objects in JavaScript

You can define objects using object literals or constructor functions.

Using Object Literals

An object literal is a straightforward way to create an object:

Integrating Objects with HTML

To integrate JavaScript objects with HTML, we can use event listeners and manipulate the DOM (Document Object Model).

Example: Car Object in HTML

Let's create a simple HTML interface to interact with our car object.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Object Example</title>
<script>
// Define the car object
var car = {
make: "Toyota",
model: "Corolla",
year: 2020,
start: function() {
document.getElementById("status").innerText = "Car started";
},
drive: function() {
document.getElementById("status").innerText = "Car is driving";
},
stop: function() {
document.getElementById("status").innerText = "Car stopped";
}
};

// Function to display car details
function displayCarDetails() {
document.getElementById("car-details").innerText =
"Make: " + car.make + ", Model: " + car.model + ", Year: " + car.year;
}
</script>
</head>
<body onload="displayCarDetails()">
<h1>Car Object Example</h1>
<div id="car-details"></div>
<button onclick="car.start()">Start</button>
<button onclick="car.drive()">Drive</button>
<button onclick="car.stop()">Stop</button>
<p id="status"></p>
</body>
</html>

Try it now

In this example, we define a car object with properties and methods. We then use these methods to update the HTML content dynamically. When the page loads, the car details are displayed, and buttons are provided to invoke the start, drive, and stop methods, updating the status paragraph accordingly.

Constructor Functions

Constructor functions allow us to create multiple instances of an object, each with their own properties.

Example: Car Constructor Function

// Constructor function for Car
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.start = function() {
console.log(this.make + " started");
};
this.drive = function() {
console.log(this.make + " is driving");
};
this.stop = function() {
console.log(this.make + " stopped");
};
}

// Create instances of Car
var car1 = new Car("Toyota", "Corolla", 2020);
var car2 = new Car("Honda", "Civic", 2019);

// Accessing properties and methods
console.log(car1.make); // Output: Toyota
car1.start(); // Output: Toyota started
console.log(car2.model); // Output: Civic
car2.drive(); // Output: Honda is driving

Integrating Constructor Function Objects with HTML

To demonstrate the use of constructor function objects within an HTML page, let's create an interface that allows users to create and interact with multiple car objects.

Example: Car Constructor in HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Constructor Example</title>
<script>
// Constructor function for Car
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.start = function() {
document.getElementById("status").innerText = this.make + " started";
};
this.drive = function() {
document.getElementById("status").innerText = this.make + " is driving";
};
this.stop = function() {
document.getElementById("status").innerText = this.make + " stopped";
};
}

// Array to hold car objects
var cars = [];

// Function to create a new car
function createCar() {
var make = document.getElementById("make").value;
var model = document.getElementById("model").value;
var year = document.getElementById("year").value;
var car = new Car(make, model, year);
cars.push(car);
displayCarList();
}

// Function to display the list of cars
function displayCarList() {
var carList = document.getElementById("car-list");
carList.innerHTML = "";
cars.forEach(function(car, index) {
var listItem = document.createElement("li");
listItem.innerText = car.make + " " + car.model + " (" + car.year + ")";
listItem.setAttribute("data-index", index);
listItem.onclick = function() {
var selectedIndex = this.getAttribute("data-index");
var selectedCar = cars[selectedIndex];
selectedCar.start();
};
carList.appendChild(listItem);
});
}
</script>
</head>
<body>
<h1>Car Constructor Example</h1>
<input type="text" id="make" placeholder="Make">
<input type="text" id="model" placeholder="Model">
<input type="number" id="year" placeholder="Year">
<button onclick="createCar()">Create Car</button>
<ul id="car-list"></ul>
<p id="status"></p>
</body>
</html>

Try it now

In this example, we use a constructor function to create Car objects. Users can enter car details and create multiple car objects, which are displayed in a list. Clicking on a car in the list invokes the start method for that specific car, updating the status paragraph.

Practice Excercise Practice now

JavaScript Objects

JavaScript objects are powerful tools that allow you to model real-world entities and their behaviors in your web applications. Integrating JavaScript objects within HTML can enhance the interactivity and functionality of your web pages. This guide explains how to create and use JavaScript objects in HTML with practical examples.

Understanding JavaScript Objects

In JavaScript, objects are collections of properties, where a property is an association between a name (or key) and a value. The value can be a primitive value (like a string or number), another object, or even a function.

Here's a simple example of an object representing a car:

In this object:

make, model, and year are properties.
start, drive, and stop are methods (functions associated with the object).
Integrating JavaScript Objects with HTML
To integrate JavaScript objects with HTML, you typically use the Document Object Model (DOM) to manipulate HTML elements. Let's build a simple web page that uses a JavaScript object to manage a car's status.

Example: Car Object in HTML

We'll create a web page where you can display a car's details and use buttons to start, drive, and stop the car, updating the car's status in real-time.

HTML Structure: Define the basic structure of your HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Car Object Example</title>
</head>
<body>
<h1>Car Object Example</h1>
<div id="car-details"></div>
<button onclick="car.start()">Start</button>
<button onclick="car.drive()">Drive</button>
<button onclick="car.stop()">Stop</button>
<p id="status"></p>

<script src="script.js"></script>
</body>
</html>

JavaScript Code: Create a script.js file to define the car object and its interaction with the HTML.

Explanation
HTML:

The <div id="car-details"></div> element will display the car's details.
The buttons are used to trigger the start, drive, and stop methods of the car object.
The <p id="status"></p> element will display the current status of the car.

JavaScript:

The car object is defined with properties (make, model, year) and methods (start, drive, stop).
The displayCarDetails function updates the car-details div with the car's properties.
The DOMContentLoaded event listener ensures that the car details are displayed once the DOM is fully loaded.

Result

When you open the HTML file in a browser, it will display the car details and provide buttons to start, drive, and stop the car. Clicking these buttons will update the status paragraph accordingly.

Dynamic Object Creation

Sometimes, you might need to create objects dynamically based on user input. Let's extend our example to allow users to create their own car objects.

Extended HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Car Object Example</title>
</head>
<body>
<h1>Dynamic Car Object Example</h1>
<input type="text" id="make" placeholder="Make">
<input type="text" id="model" placeholder="Model">
<input type="number" id="year" placeholder="Year">
<button onclick="createCar()">Create Car</button>

<div id="car-list"></div>
<p id="status"></p>

<script src="script.js"></script>
</body>
</html>

Extended JavaScript Code:

Explanation

Added input fields for make, model, and year, and a button to create a new car.
The <div id="car-list"></div> element will list all created cars with buttons to start, drive, and stop each car.

JavaScript:

The Car constructor function allows the creation of multiple car objects with unique properties and methods.
The createCar function reads user input, creates a new Car object, and adds it to the cars array.
The displayCarList function dynamically updates the HTML to display all created cars and their associated buttons.

Practice Excercise Practice now

Object Properties

JavaScript objects are fundamental to creating interactive and dynamic web applications. They allow us to model real-world entities and manipulate them efficiently. Integrating JavaScript object properties with HTML enables us to build web pages that respond dynamically to user interactions. This guide will explain how to work with object properties in HTML, complete with practical examples.

Understanding JavaScript Object Properties

A JavaScript object is a collection of properties, where each property is a key-value pair. The key is a string that identifies the property, and the value can be any data type, including strings, numbers, arrays, functions, or even other objects.

Here is a simple example of a JavaScript object:

var person = {
name: "John Doe",
age: 30,
occupation: "Developer"
};

In this object:

name, age, and occupation are properties.
"John Doe", 30, and "Developer" are the values of these properties.

Accessing Object Properties

You can access object properties using dot notation or bracket notation:

Dot Notation: object.property
Bracket Notation: object["property"]

For example:

console.log(person.name); // Output: John Doe
console.log(person["age"]); // Output: 3052*

Manipulating HTML with Object Properties

To illustrate how to integrate object properties with HTML, let’s build a simple web page that displays and updates a person’s information.

Example: Display and Update Object Properties in HTML

HTML Structure: Define the basic structure of your HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Person Object Example</title>
</head>
<body>
<h1>Person Information</h1>
<div id="person-info"></div>
<button onclick="updateAge()">Increase Age</button>

<script src="script.js"></script>
</body>
</html>

JavaScript Code: Create a script.js file to define the person object and its interaction with the HTML.

Explanation

The <div id="person-info"></div> element will display the person’s details.
The button calls the updateAge function to increase the person’s age and update the displayed information.

JavaScript:

The person object is defined with properties name, age, and occupation.
The displayPersonInfo function updates the HTML to display the person’s properties.
The updateAge function increments the age property and calls displayPersonInfo to refresh the displayed information.
The DOMContentLoaded event ensures that the person’s information is displayed once the DOM is fully loaded.

Result

When you open the HTML file in a browser, it will display the person’s details. Clicking the "Increase Age" button will increment the age and update the displayed information in real-time.

Dynamic Object Property Manipulation

Sometimes, you may need to create and manipulate object properties based on user input. Let’s extend our example to allow users to update the person’s name and occupation.

Extended HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Person Object Example</title>
</head>
<body>
<h1>Person Information</h1>
<div id="person-info"></div>
<input type="text" id="name-input" placeholder="Enter name">
<input type="text" id="occupation-input" placeholder="Enter occupation">
<button onclick="updatePersonInfo()">Update Info</button>
<button onclick="updateAge()">Increase Age</button>

<script src="script.js"></script>
</body>
</html>

Extended JavaScript Code:

Explanation

Added input fields for updating the person’s name and occupation.
The "Update Info" button calls the updatePersonInfo function to update the person’s properties and refresh the displayed information.

JavaScript:

The updatePersonInfo function reads user input from the text fields, updates the person object’s name and occupation properties if the inputs are not empty, and then calls displayPersonInfo to update the display.

Practice Excercise Practice now

Do Not Declare Strings, Numbers, And Booleans As Objects!

It's generally advised not to declare strings, numbers, and booleans as objects. These data types have primitive representations that are more efficient and straightforward to use. Using objects to represent these types can lead to unnecessary complications and potential performance issues.

Primitive vs. Object Types

JavaScript provides primitive data types and their corresponding object wrappers:

Primitive types: string, number, boolean
Object wrappers: String, Number, Boolean

Primitives are simple and immutable values, while object wrappers create instances that behave as objects, adding complexity and overhead.

Example of Primitive and Object Declaration

Here’s a basic comparison:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Primitive vs. Object</title>
</head>
<body>
<script>
// Primitives
var primitiveString = "Hello";
var primitiveNumber = 42;
var primitiveBoolean = true;

// Object Wrappers (Not Recommended)
var objectString = new String("Hello");
var objectNumber = new Number(42);
var objectBoolean = new Boolean(true);

console.log(typeof primitiveString); // "string"
console.log(typeof primitiveNumber); // "number"
console.log(typeof primitiveBoolean); // "boolean"

console.log(typeof objectString); // "object"
console.log(typeof objectNumber); // "object"
console.log(typeof objectBoolean); // "object"
</script>
</body>
</html>

Reasons to Avoid Object Wrappers
Performance Overhead:

Object wrappers are heavier and require more memory compared to their primitive counterparts. This can slow down your application, especially if used extensively.

Unexpected Behavior:

Using object wrappers can lead to unexpected results due to type coercion and object comparisons. For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparison Issues</title>
</head>
<body>
<script>
var primitiveString = "Hello";
var objectString = new String("Hello");

console.log(primitiveString == objectString); // true
console.log(primitiveString === objectString); // false

var primitiveNumber = 42;
var objectNumber = new Number(42);

console.log(primitiveNumber == objectNumber); // true
console.log(primitiveNumber === objectNumber); // false

var primitiveBoolean = true;
var objectBoolean = new Boolean(true);

console.log(primitiveBoolean == objectBoolean); // true
console.log(primitiveBoolean === objectBoolean); // false
</script>
</body>
</html>

In these examples, the == operator performs type coercion, making the comparisons return true. However, the === operator checks for both value and type equality, returning false because the types differ.

Practical Implications

Using primitives simplifies code and avoids potential pitfalls. Consider a function that checks the length of a string:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function Example</title>
</head>
<body>
<script>
function checkStringLength(str) {
if (str.length > 5) {
return "String is too long";
} else {
return "String length is acceptable";
}
}

var result = checkStringLength("Hello, World!");
console.log(result); // "String is too long"

// Using a primitive
var primitiveString = "Hello";
console.log(checkStringLength(primitiveString)); // "String length is acceptable"

// Using an object wrapper (not recommended)
var objectString = new String("Hello");
console.log(checkStringLength(objectString)); // "String length is acceptable", but unnecessary object creation
</script>
</body>
</html>

In this example, using a primitive string (primitiveString) with the checkStringLength function is more efficient. Creating an object string (objectString) is unnecessary and should be avoided.

Use Primitives Directly:

Always prefer using primitive types for strings, numbers, and booleans.
JavaScript provides seamless type conversion between primitives and objects when needed.

Avoid new Keyword for Primitives:

Do not use the new keyword with String, Number, or Boolean constructors unless there is a specific need to create a wrapper object.

Type Conversion and Auto-boxing

JavaScript can automatically convert primitives to objects when necessary (auto-boxing), allowing you to use object methods on primitive values without explicitly creating objects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-boxing Example</title>
</head>
<body>
<script>
var str = "Hello, World!";
console.log(str.toUpperCase()); // "HELLO, WORLD!"

var num = 123.456;
console.log(num.toFixed(2)); // "123.46"

var bool = true;
console.log(bool.toString()); // "true"
</script>
</body>
</html>

In this example, JavaScript automatically converts the primitives to their respective object types to call the methods, making explicit object creation unnecessary.

Practice Excercise Practice now

Previous Next

JavaScript Objects

Real Life Objects, Properties, And Methods

JavaScript Objects

Object Properties

Do Not Declare Strings, Numbers, And Booleans As Objects!

COMPANY

Products

OTHERS

Partner