Objects in JavaScript
In JavaScript, an object is a collection of related data stored as key-value pairs,
where each key (also called a property name) has an associated value. Objects
are used to group and manage information and behaviour together, and they
allow you to organize complex data structures by encapsulating properties
and methods (functions stored as properties)
const person = {
firstName: "Steve",----------properties
lastName: "Jobs",
age: 56,
greet: function() {
return "Hello, " + [Link];----- methods
}
};
In JavaScript, there are four types of objects. They are as
follows:
User-defined objects
Built-in objects ( such as Date and Math objects)
Browser objects (such as window, navigator, and history
objects)
Document objects (for example, link, forms and images)
User-defined Objects in JavaScript
User-defined objects in JavaScript are custom objects
created by the programmer for specific programming
tasks. They are associated with properties and methods.
For example, a person is an object.
There are three ways to create user-defined objects:
By object literal
By creating an instance of Object directly (using new keyword)
Using object constructor
Object literal is the simplest and the most popular way to create a user-
defined object in JavaScript. We can create a user-defined object with several
properties by using object literal, as follows:
var person = {
// Declaration of properties of an object person.
firstName: "John",
lastName: "Herry",
age: 25,
skinColor: "White"
};
[Link] Object Literal:
This is the most common and concise way to create an object. You define
the object with key-value pairs inside curly braces {}.
javascript
let course = {
name: "JavaScript",
language: "Scripting",
level: "Beginner"
};
[Link]([Link]); // Output: JavaScript
[Link] Creating an Instance of Object Directly (Using new Keyword):
You can create an object using the new Object() syntax and then add
properties.
javascript
let course = new Object();
[Link] = "JavaScript";
[Link] = "Scripting";
[Link]([Link]); // Output: Scripting
[Link] Object Constructor:
You define a constructor function and instantiate an object using
the new keyword with that constructor.
javascript
function Course(name, language) {
[Link] = name;
[Link] = language;
}
let myCourse = new Course("JavaScript", "Scripting");
[Link]([Link]); // Output: JavaScript
Built-in Objects in JavaScript
Built-in objects are native objects that are part of core JavaScript and they are
defined in ECMAScript standard. JavaScript supports the number of built-in
objects.
These built-in objects are available for both client side JavaScript and server-
side applications. Some important built-in objects include:
String object
Array object
Date object
Math object
Here is an explanation of some of the most important built-in objects in
JavaScript:
String Object
The String object represents a sequence of characters and provides methods
to manipulate strings. You can create string objects and use methods like
charAt(), substring(), toUpperCase(), split(), etc.
Example:
javascript
let message = "Hello, World!";
[Link]([Link]()); // Output: HELLO, WORLD!
Array Object
The Array object represents an ordered list of values. It provides methods
such as push(), pop(), shift(), unshift(), concat(), slice(), which allow adding,
removing, combining, and slicing arrays.
Example:
javascript
let numbers = [1, 2, 3];
[Link](4); // Adds 4 to the end
[Link](numbers); // Output: [1, 2, 3, 4]
Date Object
The Date object handles dates and times. It allows creation of date/time
objects, and methods to get or set specific components like year, month, day,
hours, minutes, etc.
Example:
javascript
let currentDate = new Date();
[Link]([Link]()); // Current year
Math Object
The Math object contains properties and methods for mathematical
operations such as [Link](), [Link](), [Link](), [Link](),
and more.
Example:
javascript
let randomNum = [Link](); // Generates a random number between 0
and 1
Browser Objects in JavaScript
Browser objects are those objects that interact with the browser window.
These objects are not part of JavaScript language but most browser
commonly support them. Example of browser objects are:
Window object
History object
Location object
Navigator object
Screen object
Window Object
Represents the browser window. It serves as the global object containing all
other browser objects. You can manipulate the browser window and display
dialogs.
Example:
javascript
[Link]("Welcome!"); // Displays an alert box
[Link]([Link]); // Logs the width of the window
History Object
Represents the session history of the browser. It allows navigation through the
history stack.
Example:
javascript
[Link](); // Goes back to the previous page
[Link](); // Goes forward one page
Location Object
Represents the current URL of the browser window. It allows reading parts of
the URL or navigating to new URLs.
Example:
javascript
[Link]([Link]); // Prints full URL
[Link] = "[Link] // Navigates to a new URL
Navigator Object
Provides information about the browser, such as its name, version, platform,
and language.
Example:
javascript
[Link]([Link]); // Browser user-agent string
[Link]([Link]); // Browser language setting
Screen Object
Provides information about the user's screen, such as width, height, and color
depth.
Example:
javascript
[Link]([Link]); // Screen width in pixels
[Link]([Link]); // Screen height in pixels
These browser objects enable JavaScript to interact with the browser window,
handle navigation, and adapt to the user's environment efficiently.
The Document Object in JavaScript represents the HTML or XML document
loaded into the browser window. It is part of the Document Object Model
(DOM) which allows scripts to dynamically access and update the content,
structure, and style of a web page. The document object is the entry point for
accessing the web page elements and interacting with them.
Key Properties of the Document Object:
[Link] — Gets or sets the title of the document as shown in the
browser tab.
[Link] — Returns the full URL of the document.
[Link] — Allows reading and writing browser cookies for the
page.
[Link] — Returns the domain name of the server that loaded
the document.
[Link] — Shows the loading status of the document,
e.g., "loading", "interactive", or "complete".
[Link] — Provides the date and time the document was
last modified.
Common Methods to Access and Manipulate HTML Elements:
[Link](id) — Returns the element with the specified
ID.
[Link](className) — Returns a collection
(array-like) of elements with the specified class name.
[Link](tagName) — Returns a collection of
elements with the specified tag name.
[Link](selector) — Returns the first element matching
a CSS selector.
[Link](selector) — Returns a NodeList of all
elements matching a CSS selector.
[Link](tagName) — Creates a new element node of
the specified tag.
[Link](text) — Creates a text node.
[Link](text) — Writes HTML or text directly to the document
(usually used during page load).
[Link](event, function) — Attaches an event listener
to the document.
Example Usage:
javascript
[Link]([Link]); // Prints the document title
let header = [Link]("header");
[Link] = "Welcome to my website!"; // Modify content of element
with id 'header'
let newParagraph = [Link]("p");
[Link] = "This is a new paragraph.";
[Link](newParagraph); // Adds new paragraph to the
end of body
The Document object is essential for client-side JavaScript to dynamically
interact with, traverse, and modify web page content, enabling highly
responsive and interactive user experiences.
