Quick Contact

    JavaScript Objects

    Introduction

    What is an Object?

    JavaScript is an object-oriented programming language, and practically everything within JavaScript is or behaves like that of an object. To work successfully and efficiently utilizing JavaScript, we must first learn how objects function, in addition to how to construct and utilize our own objects.

    A JavaScript object is simply a set of named values. These named values are commonly referred to as object properties. An array, as you may recall from the JavaScript arrays chapter, is a collection of values, each with its own index (a numeric key) that begins at zero and increases by one for each item. An object is identical to an array, except that the keys, such as name, age, gender, and so on, are defined by you. We’ll study about items in depth in the sections that follow.

    Creating Objects

    Curly brackets can be used to construct an object with an optional list of properties. A property is a “key: value” pair, with the key (or property name) always being a string and the value (or property value) being any data type, such as strings, integers, Booleans, or complex data types such as arrays, functions, and other objects. Furthermore, to separate them from other properties, properties having functions as their values are sometimes referred to as methods.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Creating Objects in JavaScript< /title>
    < /head>
    < body>
    < script>
    var person = {
    name: "Ajeet Pandey",
    age: 25,
    gender: "Male",
    displayName: function() {
    alert(this.name);
            }
        };
    
    document.write(person.name + "< br>"); 
    document.write(person.age + "< br>"); 
    document.write(person.gender); 
    console.log(person); 
    < /script>
    < /body>
    < /html>
    

    Output

    Ajeet Pandey
    25
    Male
    

    The above example generates a person object with three attributes named name, age, and gender and one method called displayName (). The value of this.name, which resolves to person.name, is shown via the displayName() function. The object literals syntax is the simplest and most favorable approach to construct a new object in JavaScript.

    Property names should not be quoted unless they are reserved words, include spaces or special characters (other than letters, numbers, and the and $ characters), or begin with a number.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Quoting Property Names of an Object< /title>
    < /head>
    < body>
    < script>
    var person = {
            "first name": "Ajeet Pandey",
            "current age": 25,
    gender: "Male"
        };
    
    document.write(person["first name"] + "< br>"); 
    document.write(person["current age"] + "< br>"); 
    document.write(person["gender"]); 
    console.log(person);
    < /script>
    < /body>
    < /html>
    

    Output

    Ajeet Pandey
    25
    Male
    

    Looping Through Object’s Properties

    The for…in loop may be used to loop over an object’s key-value pairs. This loop is specifically designed for iterating over the characteristics of an object.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Loop Through an Object< /title>
    < /head>
    < body>
    < script>
    var person = {
    name: "Ajeet",
    age: 25,
    gender: "Male"
        };
    
        // Iterating over object properties
    for(vari in person)  {  
    document.write(person[i] + "< br>"); // Prints: name, age and gender
        }
    < /script>
    < /body>
    < /html>
    

    Setting Object’s Properties

    Similarly, you may use the dot (.) or bracket ([]) notation to set new attributes or change existing ones.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Set the Properties of an Object< /title>
    < /head>
    < body>
    < script>
    var person = {
    name: "Ajeet",
    age: 25,
    gender: "Male"
        };
    
        // Setting a new property
    person.country = "India";
    document.write(person.country + "< br>"); 
    
    person["email"] = "ajeetpandey123@mail.com";
    document.write(person.email + "< br>"); 
    
        // Updating existing property
    person.age = 25;
    document.write(person.age + "< br>"); 
    
    person["name"] = "Ajeet Pandey";
    document.write(person.name); 
    < /script>
    < /body>
    < /html>
    

    Output

    	India
    ajeetpandey123@mail.com
    25
    Ajeet Pandey
    

    Deleting Object’s Properties

    To entirely eliminate attributes from such an object, use the remove operator. The only method to remove a property from an object is to delete it. Setting the property to undefined or null simply alters its value. It does not delete the object’s property.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Remove Properties from an Object< /title>
    < /head>
    < body>
    < script>
    var person = {
    name: "Ajeet",
    age: 25,
    gender: "Male",
    displayName: function() {
    alert(this.name);
            }
        };
    
        // Deleting property
    deleteperson.age;
    document.write(person.age); 
    < /script>
    < /body>
    < /html>
    

    Output

    Undefined

    Note:

    The delete operator simply eliminates an objects attribute or array element. It doesn’t have any effect on parameters or defined functions. However, users must avoid using the delete operator to delete an element of the array since it does not affect the array’s length and just leaves a hole in the array.

    Calling Object’s Methods

    You may use an object’s methods in exactly the same way that would retrieve its properties: with the dot or square brackets syntax.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Call the Methods of an Object< /title>
    < /head>
    < body>
    < script>
    var person = {
    name: "Ajeet",
    age: 25,
    gender: "Male",
    displayName: function() {
    document.write(this.name);
            }
        };
    
    person.displayName(); 
    document.write("< br>");
    person["displayName"](); 
    < /script>
    < /body>
    < /html>
    

    Output

    Ajeet
    Ajeet
    

    FAQS

    Q1. What are JavaScript objects?

    An object in JavaScript is a self-contained entity having attributes and a type. Consider a cup as an example. A cup is a physical item having qualities. A cup has a colour, a pattern, a weight, a material made of, and so on. JavaScript objects, too, may have attributes that determine their qualities.

    Q2. Is an array an object JavaScript?

    Arrays are a subset of objects. In JavaScript, the typeof operator returns “object” for arrays. JavaScript arrays, on the other hand, are best characterized as arrays.

    Q3. What is difference between object and array in JavaScript?

    In JavaScript, both objects and arrays are termed “special.” Objects are a type of configurable information that can be utilized to contain a collection of information (rather than just a single value). Arrays are a sort of variable that may be altered and used to hold a list of values.

    Q4. What is class and object in JavaScript?

    Classes serve as a starting point for the creation of things. They wrap data with code that allows them to operate with it. Classes in JS are prototype-based, but they also include some syntax and semantics that differ from ES5 class-like semantics.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.