All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Handle Undefined In JavaScript

Last Updated : Jul 1, 2023

How To Handle Undefined In JavaScript

In this tutorial we will show you the solution of how to handle undefined in JavaScript, here we defined json array with some key, value pairs when user ask for something not defined in our json array we are thrown related error message using console.log() method for user to get clarified when seeing that message.

It is displayed on console panel so we have to open it for seeing result otherwise we can’t see them on webpage.

Step By Step Guide On How To Handle Undefined In JavaScript :-

Here we defined one div tag with id ‘h’ for displaying appended message result on webpage by innerHTML.

We defined json array ‘emp’ with three different keys ‘fname,lname,age’ with respective different value then we appended array values with some on div element ‘h’.

Then we handled one undefined value in console.log() method. We asked for undefined key ‘address of employee’ in array ‘emp’ so we checking that key ‘address’ in array ‘emp’ if not found then we throwing ‘not found’ message.

<!DOCTYPE html>
<html>
    <head>
        <title>HANDLE UNDEFINED</title>
    </head>
    <body>
        <div id="h"></div>
        <script>
            let emp={
                fname: "Pavi",
                lname: "Mozhi",
                age: 23,
            };
            document.getElementById('h').innerHTML="Employee Full Name is "+emp.fname+" "+emp.lname;
            console.log(`address of employee : ${emp.address ?? "not found"}`);
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Here div tag we defined with id attribute ‘h’. In script we defined array variable ‘arr’ with keyword ‘let’. In array we defined three keys ‘fname,lname,age’ with respective different values of ‘Pavi,Mozhi,23’.
  7. We appending employee first name, last name with ‘Employee Full Name is’ message on div element ‘h’ for display on webpage.
  8. Using console.log() method we asking undefined value of ‘address of employee’ then we checking ‘address’ key in array ‘emp’.
  9. If they not defined in array ‘emp’ then we appending message ‘not found’ on console panel. We need to open console panel for seeing how to handled undefined values.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to handle undefined values using javascript.

When we executes program on browser we can see the appended message ‘Employee Full Name is’ with defined employee first and last name on webpage.

Then for seeing undefined value result we need to open console panel by using shortcut ‘ctrl+shift+j’ on browser.

Console panel will open at right hand side with result and also we can check any other undefined value same as above defined.

I hope this tutorial on how to handle undefined in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪