{"id":1880,"date":"2023-08-19T01:43:34","date_gmt":"2023-08-19T01:43:34","guid":{"rendered":"https:\/\/easycodingschool.com\/?p=1880"},"modified":"2023-08-19T01:47:45","modified_gmt":"2023-08-19T01:47:45","slug":"javascript-objects","status":"publish","type":"post","link":"https:\/\/easycodingschool.com\/blog\/javascript-objects\/","title":{"rendered":"Javascript Objects"},"content":{"rendered":"

In JavaScript, there are several types of objects, each serving a specific purpose. These object types can be categorized based on their characteristics and usage. Easy Coding School<\/a> are some of the main types of JavaScript objects:<\/p>\n

1. Built-in Objects<\/strong><\/h3>\n

These are objects provided by the JavaScript language itself.<\/p>\n

Object:<\/strong> The base object type from which all other objects inherit.<\/p>\n

\n
\n
\n
const person = {\r\n\u00a0 firstName: \"John\",\r\n\u00a0 lastName: \"Doe\",\r\n\u00a0 age: 30\r\n};<\/code><\/pre>\n<\/div>\n<\/div>\n
Array:<\/strong> Used to store and manipulate ordered collections of values.<\/span><\/div>\n<\/div>\n
\n
\n
\n
const numbers = [1, 2, 3, 4, 5];<\/code><\/pre>\n<\/div>\n<\/div>\n
Function:<\/strong> Used to define and execute JavaScript functions.<\/span><\/div>\n<\/div>\n
\n
\n
\n
function greet(name) {\r\n\u00a0 console.log(`Hello, ${name}!`);\r\n}<\/code><\/pre>\n<\/div>\n
Date:<\/strong> Used for working with dates and times.<\/span><\/p>\n<\/div>\n<\/div>\n
\n
\n
\n
const currentDate = new Date();<\/code><\/pre>\n<\/div>\n<\/div>\n
RegExp:<\/strong> Used for pattern matching within strings.<\/span><\/div>\n<\/div>\n
\n
\n
\n
const pattern = \/hello\/i; \/\/ Case-insensitive pattern<\/code><\/pre>\n<\/div>\n<\/div>\n
Math:<\/strong> Provides mathematical constants and functions.<\/span><\/div>\n<\/div>\n
\n
\n
\n
const result = Math.sqrt(25);<\/code><\/pre>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
JSON:<\/strong> Used for working with JSON (JavaScript Object Notation) data.<\/p>\n
\n
\n
\n
const jsonData = '{\"name\": \"Alice\", \"age\": 25}';\r\nconst parsedData = JSON.parse(jsonData);<\/code><\/pre>\n<\/div>\n<\/div>\n
<\/div>\n<\/div>\n
2. Global Objects:<\/strong><\/h3>\n
Objects that are accessible globally in a web browser environment.<\/p>\n
Window:<\/strong> Represents the browser window or global context.<\/p>\n
\n
\n
\n
\/\/ Accessing properties of the window object\r\nconsole.log(window.innerWidth); \u00a0 \u00a0 \u00a0\/\/ Inner width of the browser window\r\nconsole.log(window.innerHeight); \u00a0 \u00a0 \/\/ Inner height of the browser window\r\nconsole.log(window.location.href); \u00a0 \/\/ URL of the current page\r\nconsole.log(window.document.title); \u00a0\/\/ Title of the current document\r\nconsole.log(window.navigator.userAgent); \/\/ User agent string\r\n\r\n\r\n\/\/ Using methods of the window object\r\nwindow.alert(\"This is an alert!\"); \u00a0 \u00a0\/\/ Display an alert dialog\r\nwindow.confirm(\"Are you sure?\"); \u00a0 \u00a0 \u00a0\/\/ Display a confirmation dialog\r\nconst userInput = window.prompt(\"Enter something:\"); \/\/ Display a prompt and get user input<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
Document:<\/strong> Represents the DOM (Document Object Model) of an HTML document.<\/p>\n
\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>Document Object Example<\/title>\r\n<\/head>\r\n<body>\r\n<h1>Hello, Document Object!<\/h1>\r\n<p>This is an example of using the document object.<\/p>\r\n<button id=\"myButton\">Click Me<\/button>\r\n\r\n<script>\r\n\/\/ Accessing and modifying elements\r\nconst heading = document.querySelector('h1');\r\nheading.textContent = 'Hello, Updated Document Object!';\r\n\r\nconst paragraph = document.querySelector('p');\r\nparagraph.style.color = 'blue';\r\n\r\n\/\/ Handling events const button = document.getElementById('myButton');\r\nbutton.addEventListener('click', function() {\r\nalert('Button clicked!');\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
Also read more topic in, How many types of JavaScript arrays<\/a><\/span>.<\/span><\/p>\n
3. DOM Objects<\/strong><\/h3>\n
Objects that represent elements in the Document Object Model (DOM) of a web page.<\/p>\n
\n
\n
\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\u00a0 <title>Document Object Example<\/title>\r\n<\/head>\r\n<body>\r\n\u00a0 <h1>Hello, Document Object!<\/h1>\r\n\u00a0 <p>This is an example of using the document object.<\/p>\r\n\u00a0 <button id=\"myButton\">Click Me<\/button>\r\n\r\n\r\n\u00a0 <script>\r\n\u00a0 \u00a0 \/\/ Accessing and modifying elements\r\n\u00a0 \u00a0 const heading = document.querySelector('h1');\r\n\u00a0 \u00a0 heading.textContent = 'Hello, Updated Document Object!';\r\n\r\n\r\n\u00a0 \u00a0 const paragraph = document.querySelector('p');\r\n\u00a0 \u00a0 paragraph.style.color = 'blue';\r\n\r\n\r\n\u00a0 \u00a0 \/\/ Handling events\r\n\u00a0 \u00a0 const button = document.getElementById('myButton');\r\n\u00a0 \u00a0 button.addEventListener('click', function() {\r\n\u00a0 \u00a0 \u00a0 alert('Button clicked!');\r\n\u00a0 \u00a0 });\r\n\u00a0 <\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
4. Constructor Objects:<\/strong><\/h3>\n
These objects are used to create instances of specific types.<\/p>\n
String:<\/strong> Used for working with strings.<\/p>\n
\n
const greeting = \"Hello, world!\";<\/code><\/pre>\n<\/div>\n
Number:<\/strong> Used for working with numeric values.<\/p>\n
\n
const age = 30;<\/code><\/pre>\n<\/div>\n
Boolean:<\/strong> Used for working with true\/false values.<\/p>\n
\n
const isStudent = true;<\/code><\/pre>\n<\/div>\n
5. Prototype Objects<\/strong><\/h3>\n
These objects are used as prototypes for inheritance.<\/p>\n
Prototype objects are a crucial concept in JavaScript’s object-oriented programming model. Every object in JavaScript is associated with a prototype object that provides properties and methods that can be accessed by the object. Here’s an example to illustrate prototype objects:<\/span><\/p>\n
\n
\/\/ Constructor function for creating person objects\r\nfunction Person(firstName, lastName) {\r\nthis.firstName = firstName;\r\nthis.lastName = lastName;\r\n}\r\n\/\/ Adding a method to the prototype of the Person constructor\r\nPerson.prototype.getFullName = function() {\r\nreturn this.firstName + ' ' + this.lastName;\r\n};\/\/ Creating person instances using the constructor\r\nconst person1 = new Person('John', 'Doe');\r\nconst person2 = new Person('Alice', 'Smith');console.log(person1.getFullName()); \/\/ Output: \"John Doe\"\r\nconsole.log(person2.getFullName()); \/\/ Output: \"Alice Smith\"<\/code><\/pre>\n<\/div>\n
6. ES6+ Objects:<\/strong><\/h3>\n
With ECMAScript 6 (ES6) and later versions, additional object types were introduced.<\/p>\n
Map:<\/strong> A data structure that holds key-value pairs and allows any data type as a key.<\/p>\n
\n
const myMap = new Map();\r\nmyMap.set(\"key1\", \"value1\");<\/code><\/pre>\n<\/div>\n
Set:<\/strong> A collection of unique values.<\/p>\n
\n
const mySet = new Set();\r\nmySet.add(1);\r\nmySet.add(2);<\/code><\/pre>\n<\/div>\n
Symbol:<\/strong> A unique and immutable primitive data type, often used as an object property key.<\/p>\n
\n
const uniqueKey = Symbol(\"myKey\");<\/code><\/pre>\n<\/div>\n
Proxy:<\/strong> Used to define custom behavior for fundamental operations on objects.<\/p>\n
\n
const handler = {\r\nget: function(target, property) {\r\nreturn `Getting property ${property}`;\r\n}\r\n};\r\nconst proxy = new Proxy({}, handler);<\/code><\/pre>\n<\/div>\n
7. Reflect<\/strong><\/h3>\n
Provides methods for intercepting JavaScript operations.<\/p>\n
User-Defined Objects:<\/strong> User-defined objects in JavaScript are objects that you define yourself to model specific entities or concepts in your application. You can create user-defined objects using constructor functions or ES6 classes. Here’s an example using both approaches:<\/span><\/p>\n
Using Constructor Functions:<\/strong><\/p>\n
\n
\/\/ Constructor function for creating a Car object\r\nfunction Car(make, model, year) {\r\nthis.make = make;\r\nthis.model = model;\r\nthis.year = year;\r\nthis.isRunning = false;\r\n}\r\n\r\n\/\/ Adding a method to the Car prototype\r\nCar.prototype.start = function() {\r\nthis.isRunning = true;\r\n};\r\n\r\n\/\/ Creating Car instances\r\nconst car1 = new Car(\"Toyota\", \"Camry\", 2022);\r\nconst car2 = new Car(\"Honda\", \"Civic\", 2023);\r\n\r\n\/\/ Using the start method\r\ncar1.start();\r\nconsole.log(car1.isRunning); \/\/ Output: true\r\nconsole.log(car2.isRunning); \/\/ Output: false<\/code><\/pre>\n<\/div>\n
Using ES6 Classes:<\/strong><\/p>\n
\n
class Dog {\r\nconstructor(name, breed) {\r\nthis.name = name;\r\nthis.breed = breed;\r\nthis.isBarking = false;\r\n}\r\n\r\nbark() {\r\nthis.isBarking = true;\r\nconsole.log(`${this.name} is barking!`);\r\n}\r\n}\r\n\r\n\/\/ Creating Dog instances\r\nconst dog1 = new Dog(\"Buddy\", \"Golden Retriever\");\r\nconst dog2 = new Dog(\"Luna\", \"Labrador\");\r\n\r\n\/\/ Using the bark method\r\ndog1.bark(); \/\/ Output: \"Buddy is barking!\"\r\nconsole.log(dog1.isBarking); \/\/ Output: true\r\nconsole.log(dog2.isBarking); \/\/ Output: false<\/code><\/pre>\n<\/div>\n
In both examples:<\/span><\/p>\n