Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      ES5 Object Methods

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      ES5 Object Methods

      The ES5 Object methods in JavaScript are used to manipulate and protect the obejcts. ECMAScript 5 (ES5) is a significant revision of the language introduced in 2009. It has added many object methods to JavaScript.
      These methods provide us with efficient ways to iterate through object properties, manipulate values, and perform various operations on objects. Object manipulation is a fundamental aspect of JavaScript programming.

      JavaScript ES5 Object Methods

      In ES5, object-related methods are added to manipulate and protect the objects. The following tables highlight the object methods and their descriptions

      Methods to Manipulate the Object

      JavaScript contains built-in constructors, which we have listed in the below table.
      Sr.No.
      Method
      Description
      1
      AI
      To create new objects with specified prototype object.
      2
      AI
      To make a clone of the object and add new properties to its prototype.
      3
      AI
      To define a property into a particular object and get the updated object.
      4
      AI
      To get the property descriptor for the properties of the object.
      5
      AI
      To get object properties.
      6
      AI
      To get the prototype of the object.
      7
      AI
      To get all keys of the object in the array format.

      Methods to Protect the Object

      Sr.No.
      Method
      Description
      1
      AI
      To prevent adding or updating object properties by freezing the object.
      2
      AI
      To seal the object.
      3
      AI
      To check if the object is frozen.
      4
      AI
      To check if the object is sealed.
      5
      AI
      To check if an object is extensible.
      6
      AI
      To get all keys of the object in the array format.
      7
      AI
      To prevent the prototype updation of the object.
      Let's undertand each of the methods listed above with the help of some examples

      JavaScript Object.create() Method

      The JavaScript Object.create() method creates a new object with the specified prototype object and properties. It is a static method in JavaScript.
      The syntax of the Object.create() method in JavaScript is as follows –
      Object.create(proto, propertiesObject)
      The paramters in the Object.create() method are as follows
      • proto − it is the object that is used as prototype of new object.
      • propertiesObejct (optaional) − It's an object that defines the properties of new object.

      Example

      In the example below, the student object is created using the person object as it's prototype.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const person = {
            firstName: "John",
            lastName: "Doe"
          };
      
          const student = Object.create(person);
          student.age = 18;
          
          document.getElementById("output").innerHTML = 
          student.firstName + "<br>" +
          student.lastName + "<br>" +
          student.age;  
      
        </script>
      </body>
      </html>

      Output

      John
      Doe
      18

      JavaScript Object.defineProperty() Method

      You can use the Object.definedProperty() method to define a single property of the object or update the property value and metadata. It's a static method in JavaScript.
      The syntax of the Object.definedProperty() method in JavaScript is as follows
      Object.defineProperty(obj, prop, descriptor)
      The paramters in the Object.definedProperty() method are as follows −
      • obj − it is the object on which the property is to be defined or modified.
      • prop (string or symbol) − It's the name of property to be defined or modified.
      • descriptor − It's an object that defines the property's attributes.

      Example

      The below example contains the car object's brand, model, and price properties. We used the defineProperty() method to define the 'gears' property in the object.
      <html>
      <body>
          <div id = "output">The obj object is - </div>
          <script>
              const car = {
                  brand: "Tata",
                  model: "Nexon",
                  price: 1000000,
              }
      
              Object.defineProperty(car, "gears", {
                  value: 6,
                  writable: true,
                  enumerable: true,
                  configurable: true
              })
              
              document.getElementById("output").innerHTML += JSON.stringify(car);
          </script>
      </body>
      </html>

      Output

      The obj object is - {"brand":"Tata","model":"Nexon","price":1000000,"gears":6}

      JavaScript Object.defineProperties() Method

      The Object.defineProperties() method in JavaScript is a static method that defines new properties of object or modifies the properties.
      The syntax of Object.defineProperties() method in JavaScript is as follows
      Object.defineProperties(obj, props)
      The parameters in the Object.defineProperties() method are as follows −
      • obj − it is the object on which the properties are to be defined or modified.
      • prop (string or symbol) − It's the name of property to be defined or modified.

      Example

      In the following example, we use Object.defineProperties() method to add two mew properties named property1 and property2. The property1 is writable and property2 is non-writable.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
      
          const object1 = {};
      
          Object.defineProperties(object1, {
            property1: {
              value: 42,
              writable: true,
            },
            property2: {
            value: "Tutorials Point",
            writable: false,},
          });
      
          document.getElementById("output").innerHTML = 
          "Property1 : "  + object1.property1 + "<br>" +
          "Property2 : "  + object1.property2;
          
        </script>
      </body>
      </html>

      Output

      Property1 : 42
      Property2 : Tutorials Point

      JavaScript Object.getOwnPropertyDescriptor() Method

      The Object.getOwnPropertyDescriptor() method in JavaScript returns a property descriptor for a specific property of an object. The returned property descriptor is a JavaScript object.

      Example

      Try the following example
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
      
          const object1 = {
            property1: 42,
          };
      
          const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');
      
          document.getElementById("output").innerHTML = 
          "descriptor configurable? : "  + descriptor1.configurable + "<br>" +
          "descriptor value : "  + descriptor1.value;
      
        </script>
      </body>
      </html>

      Output

      descriptor configurable? : true
      descriptor value : 42

      JavaScript Object.getOwnPropertyNames() Method

      The Object.getOwnPropertyNames() method in JavaScript returns an array of all the properties found in a given object. This includes both enumerable and non-enumerable properties.

      Example

      In the example below, we use getOwnPropertyNames() method to get the property names of the created object.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const obj = {
            a: 10,
            b: 20,
            c: 30,
          };
          document.getElementById("output").innerHTML = Object.getOwnPropertyNames(obj);
        </script>
      </body>
      </html>

      Output

      a,b,c

      JavaScript Object.getPrototypeOf() Method

      The Object.getPrototypeOf() method in JavaScript returns the prototype of the specified object. It's a static JavaScript method added in ES5.

      Example

      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const prototype1 = {name: "John Doe"};
          const object1 = Object.create(prototype1);
          const prot = Object.getPrototypeOf(object1)
          document.getElementById("output").innerHTML = JSON.stringify(prot);
        </script>
      </body>
      </html>

      Output

      {"name":"John Doe"}

      JavaScrip Object.keys() Method

      The Object.keys() method in javaScript takes an object as an argument and returns an array containing the object's own enumerable property names.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
           let person = {
             name: "John Doe",
             age: 20,
             profession: "Software Engineer"
            };
      
          document.getElementById("output").innerHTML = Object.keys(person);
        </script>
      </body>
      </html>

      Output

      name,age,profession

      JavaScript Object.freeze() Method

      The Object.freeze() in JavaScript is static method that freezes an object. A frozen object can not be further changed. No new property can be added or the existing properties can not be removed. The values of the properties can not be modified.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const obj = {
            prop: 23,
          };
      
          Object.freeze(obj);    
          // obj.prop = 33;
          // Throws an error in strict mode
          document.getElementById("output").innerHTML = obj.prop;
        </script>
      </body>
      </html>

      Output

      23

      JavaScript Object.seal() Method

      The Object.seal() static method seals an object. In a sealed object, no new property can be added, no property can be deleted.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const obj = {
            property: 34,
          };
      
          Object.seal(obj);
          obj.property = 33;
          document.getElementById("output").innerHTML = obj.property;
      
          delete obj.property; // Cannot delete when sealed
          
          document.getElementById("output").innerHTML = obj.property;
        </script>
      </body>
      </html>

      Output

      33

      JavaScript Object.isFrozen() Method

      The Object.isFrozen() method in JavaScript returns true if the given object is frozen, else it returns false if the object is not frozen.
      <html>
      <body>
        <div id = "output1"> </div>
        <div id = "output2"> </div>
        <script>  
          const person = {
            age: 21,
          };
          document.getElementById("output1").innerHTML = Object.isFrozen(person);
          // Expected output: false
          Object.freeze(person);
          document.getElementById("output2").innerHTML += Object.isFrozen(person);
          // Expected output: true
        </script>
      </body>
      </html>

      Output

      false
      true

      JavaScript Object.isSealed() Method

      The Object.isSeal() method in JavaScript is used to check if the given object is sealed or not. It returns true if the object is sealed else it retuens flase.
      <html>
      <body>
        <div id = "output1"> </div>
        <div id = "output2"> </div>
        <script>  
          const person = {
            name: "John Doe",
          };
          document.getElementById("output1").innerHTML = Object.isFrozen(person);
          // Expected output: false
          Object.seal(person);
          document.getElementById("output2").innerHTML += Object.isSealed(person);
          // Expected output: true
        </script>
      </body>
      </html>

      Output

      false
      true

      JavaScript Object.preventExtensions() Method

      The ES5 Object.preventExtensions() method is used to prevent the prototype updation of an object. It also prevent the new properties to be added to an object.
      <html>
      <body>
        <div id = "output"> </div>
        <script>  
          const person = {};
          Object.preventExtensions(person);
          try {
            Object.defineProperty(person, 'name', {
              value: "John Doe",
            });
          } catch (e) {
            document.getElementById("output").innerHTML =e;
          }
        </script>
      </body>
      </html>

      Output

      It will produce the following output
      TypeError: Cannot define property name, object is not extensible

      JavaScript Object.isExtensible() Method

      The JavaScript Object.isExtensible() method is used to check if an object is extensible or not. It returns true indicating the given object is extensible, else it will return false. An object is extensible if it can have new properties added to it.
      <html>
      <body>
        <div id = "output1"> </div>
        <div id = "output2"> </div>
        <script>  
          const person = {
            name: "John Doe",
          };
          
          document.getElementById("output1").innerHTML = Object.isExtensible(person);
          // Expected output: false
          Object.preventExtensions(person);
          document.getElementById("output2").innerHTML += Object.isExtensible(person);
          // Expected output: false
        </script>
      </body>
      </html>

      Output

      true
      false