{"id":23681,"date":"2020-10-05T14:06:52","date_gmt":"2020-10-05T21:06:52","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=23681"},"modified":"2020-12-03T19:45:10","modified_gmt":"2020-12-04T03:45:10","slug":"javascript-typeerror","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-typeerror\/","title":{"rendered":"JavaScript TypeError"},"content":{"rendered":"\n

In JavaScript, a TypeError is an object that represents an error as a result of doing an operation that cannot be performed, usually because a value in an operation is not of the expected type.
<\/p>\n\n\n\n

But what are types? According to the latest version of the JavaScript specifications, ECMAScript, there are nine data and structural types. Six of which, (sometimes seven if we count null), are primitive data types, those being string, number, bigint, boolean, undefined, and symbol. Before we can understand why TypeErrors trigger during an operation, let\u2019s review our nine types in JavaScript. If we are ever in a position where we are unsure of how to categorize a type, we can use the typeof <\/a>operator.
<\/p>\n\n\n\n

  1. undefined: A type of value that automatically gets defined to variables that have just been declared. We often get a typeerror value of undefined when we forget to define or add a value to our variable.<\/li>
  2. Boolean: Logical data type containing only values of true or false. <\/li>
  3. Number: Numeric data type.<\/li>
  4. String: Sequence of characters inside backticks, sing, or double quotes.<\/li>
  5. BigInt: Numeric data type sometimes known as bignums in other programming languages. <\/li>
  6. Symbol: Value that represents a unique identifier created by invoking the Symbol function.<\/li>
  7. Object: A structural type and almost anything the \u2018new\u2019 keyword is able to create, like an array, object, map, set, etc.<\/li>
  8. Function: Another non-data structure that is a code snippet that may be called by other pieces of code.<\/li>
  9. null: Usually an intentional value representing an object or address that does not exist.<\/li><\/ol>\n\n\n\n

    Most Common JavaScript TypeErrors and How to Fix Them<\/h2>\n\n\n\n

    TypeErrors can be thrown at you when attempting to change a value that cannot be changed or when using a value in an inappropriate way. It can also occur when an argument is passed to a function that is incompatible with the type expected by the function or the operator inside of the function.<\/p>\n\n\n\n

    Changing a Value That Cannot be Changed<\/h3>\n\n\n\n

    When you use the const keyword to assign a value to something, this means it is constant, it will not change. Attempting to change the value of a constant variable will result in a TypeError.
    <\/p>\n\n\n\n

    const a = 5\na = "5"\n\/\/ Uncaught TypeError: Assignment to constant variable.\n<\/pre><\/div>\n\n\n\n
    We can fix this by simply changing the name of the identifier we want to identify the string of \u201c5\u201d.
    <\/p>\n\n\n\n
    const a = 5\nconst b = "5"<\/pre><\/div>\n\n\n\n
    Using a Value in an Inappropriate Way<\/h3>\n\n\n\n
    Developers must also make sure values are being used as intended. In the example below, \u201cCat\u201d and \u201cgarfield\u201d are backwards when trying to verify if garfield is an instance of<\/a> the Cat() function.
    <\/p>\n\n\n\n
    function Cat() {}\nfunction Dog() {}\n \nlet garfield = new Cat()\n \nCat instanceof garfield\n \n\/\/ Uncaught TypeError: Right-hand side of 'instanceof' is not callable\n<\/pre><\/div>\n\n\n\n
    We can fix this by correcting the order of the two.
    <\/p>\n\n\n\n
    function Cat() {}\nfunction Dog() {}\n \nlet garfield = new Cat()\n \ngarfield instanceof Cat<\/pre><\/div>\n\n\n\n
    An Argument That is Incompatible with the Type Expected by a Function<\/h3>\n\n\n\n
    When coding an operation, developers have to make sure they are using values in ways in which they are able to obtain a desired result. The value of null can be used intentionally to signify the absence of an object, but the way in which it is used below will result in a TypeError as it is being used in as an argument that is incompatible with the type expected by the function.
    <\/p>\n\n\n\n
     function readingErrorsAreImportant(a){\n    if(a.length === 5){\n      return "equals five"\n    } else if(a.length > 5) {\n      return "Greater than five"\n    }  else {\n      return "Less than five"\n    }\n   }\n   console.log(readingErrorsAreImportant(null))\n \n   \/\/ Uncaught TypeError: Cannot read property 'length' of null<\/pre><\/div>\n\n\n\n
    We can fix this by passing in a value type it is expecting. Like a numeric value type.
    <\/p>\n\n\n\n
    function readingErrorsAreImportant(a){\n    if(a.length === 5){\n      return "equals five"\n    } else if(a.length > 5) {\n      return "Greater than five"\n    }  else {\n      return "Less than five"\n    }\n   }\n   console.log(readingErrorsAreImportant(10))<\/pre><\/div>\n\n\n\n
    <\/h2>\n\n\n\n