Wednesday, July 3, 2024
HomeLanguagesJavascriptHow to describe “object” arguments in jsdoc?

How to describe “object” arguments in jsdoc?

There are various different ways to describe “object” parameters in JSDoc. We will look into 4 different ways, each with their own uses, in this article.

  1. To document objects with specified properties:

    Syntax:

    /**
     * @param {{a: string, b: number}} Obj description
     */
    

    This syntax is good practice for objects that will only be used as arguments for the given method without needing further documentation of each property. This can also be used for @returns.

    Example:




    <html>
      
    <head>
        <title>
            neveropen
        </title>
    </head>
      
    <body>
        <center>
            <h1 style="color:green">
              neveropen
          </h1>
            <button onclick="Hello(a, b)">
              Hello
          </button>
            <script>
                /**
                 * @param {{a: string, b: number}} obj User information
                 */
                function Hello(a, b) {
                    alert('User: ' + a + ', number:' + b);
                };
                var a = "Adarsh";
                var b = 973;
            </script>
        </center>
    </body>
      
    </html>

    
    

    Output:
    Before:

    After:

  2. To document objects with specified properties (type 2):

    Syntax:

    /**
     * @param {Object} Obj  Description
     * @param {string} Obj.a  Description
     * @param {number} Obj.b  Description
     */
    

    This syntax is good practice for objects that will only be used as arguments for the given method and need further documentation of each property. This cannot be used for @returns.

    Example:




    <html>
      
    <head>
        <title>
            neveropen
        </title>
    </head>
      
    <body>
        <center>
            <h1 style="color:green">
              neveropen
          </h1>
            <button onclick="Hello(a, b)">
              Hello
          </button>
            <script>
                /**
                 * @param {Object} Obj  User information
                 * @param {string} Obj.a  name of user
                 * @param {number} Obj.b  number of user
                 */
                function Hello(a, b) {
                    alert('User: ' + a + ', number:' + b);
                };
                var a = "name";
                var b = 001;
            </script>
        </center>
    </body>
      
    </html>

    
    

    Output:
    Before:

    After:

  3. To document objects that will be used more than once in source:
    @typedef is useful in this situation. Once the type is defined in source, you can use it as a type for JSDoc tags like @param or @returns that make use of a type.

    Syntax:

    /**
     * @typedef {Object} Person
     * @property {number} age Length of time the person has lived
     * @property {string} name The word by which the person is addressed
     */
    

    Can also be used in a @param tag:

    Syntax:

    /**
     * @param {Person} p - Description of p
     */
    

    Can also be used in a @returns tag:

    Syntax:

    /**
     * @returns {Person} Description
     */
    

    Example:




    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="color:green">
              neveropen
          </h1>
            <button onclick="Hello()">
              Hello
          </button>
            <p id="demo"></p>
      
            <script>
               /**
                * @typedef {Object} Person
                * @property {number} age Length of time the person has lived
                * @property {string} name The word by which the person is addressed
                */
               function Hello() {
                   document.getElementById(
                     "demo").innerHTML = person.name + " " + person.age;
               }
               var person = {
                   name: "John",
                   lastName: "Doe",
                   age: 50,
               };
           </script>
       </center>
      
    </body>
      
    </html>

    
    

    Output:
    Before:

    After:

  4. To document objects that have values of the same type:

    Syntax:

    /**
     * @param {Object.} Dict
     */
    

    This syntax is good practice for objects whose values are all the same type. In this case, the first type i.e. string describes the type of JavaScript property (keys) that always remains of string type. The second type i.e. number describes the type of value, which can be of any type.

    This can also be used for @returns.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Thapelo Manthata
I’m a desktop support specialist transitioning into a SharePoint developer role by day and Software Engineering student by night. My superpowers include customer service, coding, the Microsoft office 365 suite including SharePoint and power platform.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments