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
      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.

      Object Methods

      JavaScript Object Methods

      JavaScript object methods are object properties that contains function definitions. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function; in that case the property is known as a method.
      You can either directly add a method to the object or add it as a property value. The method can also take the parameters and return the value. Object methods are a powerful way to add functionality to objects. They allow you to encapsulate code and make it reusable.

      Syntax

      Follow the syntax below to add a method to the object.
      const obj = {
      sum: function () {
      // Method body
      }
      }
      obj.sum();
      In the above syntax, 'sum' is a method defined inside the 'obj' object. You can access the method as you access the object property and add the pair of parenthesis to invoke the method.

      Example

      We added the getInfo() method in the 'company' object in the example below. The getInfo() method returns the string containing the object properties.
      Here, we used the 'this' keyword to access the object properties inside the object. The 'this' keyword represents the object itself.
      After that, we used the object as a reference to invoke the method.
      <html>
      <body>
      <p>Company Information</p>
      <p id = "output"> </p>
      <script>
      const company = {
      companyName: "Tutorials Point",
      companyWebsite: "www.tutorialspoint.com",
      
      getInfo: function () {
      return "Comapny Name: " + this.companyName +"<br>Website: " + this.companyWebsite;
      },
      }
      document.getElementById("output").innerHTML = company.getInfo();
      </script>
      </body>
      </html>

      Output

      Company Information
      
      Comapny Name: Tutorials Point
      Website: www.tutorialspoint.com

      Object Method Shorthand

      The ES6 provides the shortest way to define a method into the object.

      Syntax

      Follow the syntax below to add a method to the object.
      const Obj = {
      sum() {
      // Method body
      }
      }
      Obj.sum();
      Like the previous one, you can access and invoke the method in the above syntax.

      Example

      In the example below, we defined the getInfo() method as the previous example.
      <html>
      <body>
      <p id = "output"> </p>
      <script>
      const employee = {
      name: "John Doe",
      age: 32,
      getInfo() {
      return "The employee name is " + this.name + " and his age is " + this.age + " Years.";
      },
      }
      document.getElementById("output").innerHTML = employee.getInfo();
      </script>
      </body>
      </html>

      Output

      The employee name is John Doe and his age is 32 Years.

      Example

      The example below defines the getSum() method inside the 'nums' object. The getSum() method takes the two parameters and returns their sum.
      We passed the number arguments to the method while invoking it.
      <html>
      <body>
      <p id = "output">The sum of 2 and 3 is </p>
      <script>
      const nums = {
      getSum(a, b) {
      return a + b;
      }
      }
      document.getElementById("output").innerHTML += nums.getSum(2, 3);
      </script>
      </body>
      </html>

      Output

      The sum of 2 and 3 is 5

      Updating or Adding a Method to the Object

      In JavaScript, updating or adding a new method to the object is same as updating or adding new proeprties to the object. You can either use the dot or square bracket notation to update or add method to the object.

      Example

      The example below defines the getSum() method inside the 'nums' object.
      After that, we add the getMul() method inside the nums object. We invoke the getMul() method by passing two arguments to get the multiplication of them.
      <html>
      <body>
      <p id = "output">The multiplication of 2 and 3 is </p>
      <script>
      const nums = {
      getSum(a, b) {
      return a + b;
      }
      }
      nums.getMul = function (a, b) {
      return a * b;
      }
      document.getElementById("output").innerHTML += nums.getMul(2, 3);
      </script>
      </body>
      </html>

      Output

      The multiplication of 2 and 3 is 6

      Using Built-in Methods

      JavaScript objects like string, number, boolean, etc., also contain built-in methods. You can execute them by taking the object as a reference.

      Example

      In the example below, we have defined the 'num' variable containing the numeric value. After that, we used the toString() method to convert the number to a string.
      <html>
      <body>
      <p id = "demo"> </p>
      <script>
      const output = document.getElementById("demo");
      const num = new Number(20);
      let str = num.toString();
      output.innerHTML += "After converting the number to string: " + str + "<br>";
      output.innerHTML += "Data type of after conversion: " + typeof str;
      </script>
      </body>
      </html>

      Output

      After converting the number to string: 20
      Data type of after conversion: string