Skip to content
Related Articles
Open in App
Not now

Related Articles

Objects in Javascript

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 09 Dec, 2022
Improve Article
Save Article

Objects, in JavaScript, are the most important data type and form the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data types (Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data types all store a single value each (depending on their types).

Syntax:

let object_name = {
    key_name : value,
    ...
}

Let us look at an example of a JavaScript Object below :

javascript




<script>
    // JavaScript code demonstrating a simple object
    let school = {
        name: 'Vivekananda School',
        location : 'Delhi',
        established : '1971',
        displayInfo : function(){
            console.log(`${school.name} was established
                  in ${school.established} at ${school.location}`);
        }
    }
    school.displayInfo();  
</script>


Output: In this example “name”, “location”, and “established” are all “keys” and “Vivekananda School”, “Delhi” and 1971 are values of these keys respectively. Each of these keys is referred to as properties of the object. An object in JavaScript may also have a function as a member, in which case it will be known as a method of that object. Here  “displayinfo” is a method of the school object that is being used to work with the object’s data, stored in its properties.

  • Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types.
  • An object is a reference data type. Variables that are assigned a reference value are given a reference or a pointer to that value. That reference or pointer points to the location in memory where the object is stored. The variables don’t actually store the value.
  • Loosely speaking, objects in JavaScript may be defined as an unordered collection of related data, of primitive or reference types, in the form of “key: value” pairs. These keys can be variables or functions and are called properties and methods, respectively, in the context of an object.

An object can be created with figure brackets {…} with an optional list of properties. A property is a “key: value” pair, where a key is a string (also called a “property name”), and the value can be anything.

JavaScript Object Properties: The property names can be strings or numbers. In case the property names are numbers, they must be accessed using the “bracket notation” like this.

Example:

javascript




<script>
    let school = {
        name: 'Vivekananda School',
        location : 'Delhi',
        established : '1971',
        20 : 1000,
        displayInfo : function(){
            console.log(`The value of the key 20 is ${school['20']}`);
        }
    }
    school.displayInfo();  
</script>


Output: But more on the bracket notation later. Property names can also be strings with more than one space separated words. In which case, these property names must be enclosed in quotes :

let school = {
    "school name" : "Vivekananda School",
}

Like property names which are numbers, they must also be accessed using the bracket notation. Like if we want to access the ‘Vivekananda’ from ‘Vivekananda School’ we can do something like this.

Example:

javascript




<script>
    // Bracket notation
    let school = {
        name: 'Vivekananda School',
        displayInfo : function(){
            console.log(`${school.name.split(' ')[0]}`);
        }
    }
    school.displayInfo(); // Vivekananda
</script>


Output: In the above code, we made use of bracket notation and also split method provided by JavaScript which you will learn about in the strings article.

Inherited Properties: Inherited properties of an object are those properties that have been inherited from the object’s prototype, as opposed to being defined for the object itself, which is known as the object’s Own property. To verify if a property is an object’s Own property, we can use the hasOwnProperty method. Property Attributes Data properties in JavaScript have four attributes.

  • value: The property’s value.
  • writable: When true, the property’s value can be changed
  • enumerable: When true, the property can be iterated over by “for-in” enumeration. Otherwise, the property is said to be non-enumerable.
  • configurable: If false, attempts to delete the property, change the property to be an access-or property, or change its attributes (other than [[Value]], or changing [[Writable]] to false) will fail.

Example:

javascript




<script>
    // hasOwnProperty code in js
    const object1 = new Object();
    object1.property1 = 42;
     
    console.log(object1.hasOwnProperty('property1')); // true
</script>


Output:

Creating Objects: For creating objects refer to the following article. Ref:- https://www.geeksforgeeks.org/?p=190694

Accessing Object Members: Object members(properties or methods) can be accessed using the :

dot notation:

(objectName.memberName)

Example:

javascript




<script>
    let school = {
        name : "Vivekanada",
        location : "Delhi",
        established : 1971,
        20 : 1000,
        displayinfo : function() {
            console.log(`${school.name} was established
              in ${school.established} at ${school.location}`);
        }
     
    }
    console.log(school.name);
     
    console.log(school.established);
</script>


Output:

Bracket Notation:

 objectName["memberName"]

Example:

javascript




<script>
    let school = {
        name : "Vivekanada School",
        location : "Delhi",
        established : 1995,
        20 : 1000,
        displayinfo : function() {
            document.write(`${school.name} was established
              in ${school.established} at ${school.location}`);
        }
    }
     
    // Output : Vivekanada School
    console.log(school['name']);
     
    // Output: 1000
    console.log(school['20']);
</script>


Output:

Unlike dot notation, the bracket keyword works with any string combination, including, but not limited to multi-word strings. For example:

somePerson.first name // invalid
    somePerson["first name"] // valid

Unlike dot notation, bracket notation can also contain names that are the results of any expressions variables whose values are computed at run-time. For instance :

let key = "first name" somePerson[key] = "Name Surname"

Similar operations are not possible while using the dot notation.

Iterating over all keys of an object: To iterate over all existing enumerable keys of an object, we may use the for…in construct. It is worth noting that this allows us to access only those properties of an object which are enumerable (Recall that enumerable is one of the four attributes of data properties). For instance, properties inherited from the Object.prototype are not enumerable. But, enumerable properties inherited from somewhere can also be accessed using the for…in construct

Example: 

javascript




<script>
    let person = {
        gender : "male"
    }
     
    var person1 = Object.create(person);
    person1.name = "Adam";
    person1.age = 45;
    person1.nationality = "Australian";
     
    for (let key in person1) {
    // Output : name, age, nationality
    // and gender
        console.log(key);
    }         
</script>


Output:

Deleting Properties: To Delete a property of an object we can make use of the delete operator. An example of its usage has been listed below.

Example:

javascript




<script>
    let obj1 = {
        propfirst : "Name"
    }
     
    // Output : Name
    console.log(obj1.propfirst);
    delete obj1.propfirst
     
    // Output : undefined
    console.log(obj1.propfirst);            
</script>


Output: It is important to note that we can not delete inherited properties or non-configurable properties in this manner.

Example:

javascript




<script>
    let obj1 = {
        propfirst : "Name"
    }
    // Output : Name
    console.log(obj1.propfirst)
      let obj2 = Object.create(obj1);
     
     // Output : Name
      console.log(obj2.propfirst);
       
      // Output : true.
      console.log(delete obj2.propfirst);
     
        // Surprisingly Note that this will return true
        // regardless of whether the deletion was successful
     
        // Output : Name   
        console.log(obj2.propfirst);
</script>


Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!