Author: John Au-Yeung

Sometimes, we may run into the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is (not) "y"’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps, we should make sure that we aren’t doing operations that aren’t unexpected for a given data type.

Messages may include:

TypeError: "x" is undefined
TypeError: "x" is null
TypeError: "undefined" is not an object
TypeError: "x" is not an object or null
TypeError: "x" is not a symbol

On Edge, the error message for this error is TypeError: Unable to get property {x} of undefined or null reference.

And on Firefox, the error message for this error is TypeError: "x" is (not) "y".

For instance, we should write code like:

let foo = undefined;
foo.substring(1);

let foo = null;
foo.substring(1);

let foo = {}
Symbol.keyFor(foo); 

let foo = 'bar'
Object.create(foo);

We can’t call substring on foo since foo is undefined.

We also can’t call substring on a null value.

In the 3rd example, since foo is an object, we can’t call Symbol.keyFor on it to get its content.

And in the last example, foo is a string, so we can’t call Object.create with it since an object or null is expected.

To fix the issue, we can use the typeof operator to check for the value we expect before we do any operation on it:

To do this, we write:

if (typeof foo !== 'undefined') {
  // ...
}

We check if foo isn’t undefined with the typeof operator by checking if typeof returns 'undefined' with foo as its operand.

Conclusion

To fix the ‘TypeError: "x" is (not) "y"’ when we’re developing JavaScript apps, we should make sure that we aren’t doing operations that aren’t unexpected for a given data type.

Sometimes, we may run into the ‘TypeError: "x" has no properties’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" has no properties’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" has no properties’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" has no properties’ when we’re developing JavaScript apps, we should make sure we aren’t trying to access a property of a variable that’s null or undefined.

On Edge, the error message for this error is TypeError: Unable to get property {x} of undefined or null reference.

On Firefox, the error message for this error are TypeError: null has no properties and TypeError: undefined has no properties.

For instance, we shouldn’t write:

null.foo;

or

undefined.foo;

Conclusion

To fix the ‘TypeError: "x" has no properties’ when we’re developing JavaScript apps, we should make sure we aren’t trying to access a property of a variable that’s null or undefined.

On Edge, the error message for this error is TypeError: Unable to get property {x} of undefined or null reference.

On Firefox, the error message for this error are TypeError: null has no properties and TypeError: undefined has no properties.

Sometimes, we may run into the ‘SyntaxError: unterminated string literal’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: unterminated string literal’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: unterminated string literal’ When Developing JavaScript Apps

To fix the ‘SyntaxError: unterminated string literal’ when we’re developing JavaScript apps, we should make sure that enclose our string content with single quotes, double quotes or backticks.

On Edge, the error message for this error is SyntaxError: Unterminated string constant.

And on Firefox, the error message for this error is SyntaxError: unterminated string literal.

For instance, if we’re trying to split a long string into multiple lines, we can’t write:

const longString = 'This is a very long string which needs
                  to wrap across multiple lines because
                  otherwise my code is unreadable.';

Instead, we write:

const longString = 'This is a very long string which needs \
                  to wrap across multiple lines because \
                  otherwise my code is unreadable.';

to add a backslash to separate a long string into multiple lines.

Conclusion

To fix the ‘SyntaxError: unterminated string literal’ when we’re developing JavaScript apps, we should make sure that enclose our string content with single quotes, double quotes or backticks.

On Edge, the error message for this error is SyntaxError: Unterminated string constant.

And on Firefox, the error message for this error is SyntaxError: unterminated string literal.

Sometimes, we may run into the ‘SyntaxError: test for equality (==) mistyped as assignment (=)?’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: test for equality (==) mistyped as assignment (=)?’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: test for equality (==) mistyped as assignment (=)?’ When Developing JavaScript Apps

To fix the ‘SyntaxError: test for equality (==) mistyped as assignment (=)?’ when we’re developing JavaScript apps, we should make sure that we’re assigning variable values accidentally in the head of the if statement.

For instance, the following code will throw the error:

if (x = y) {
  // ...
}

since we have = instead of == or ===.

To fix this, we write:

if (x == y) {
  // ...
}

or

if (x === y) {
  // ...
}

Conclusion

To fix the ‘SyntaxError: test for equality (==) mistyped as assignment (=)?’ when we’re developing JavaScript apps, we should make sure that we’re assigning variable values accidentally in the head of the if statement.

Sometimes, we may run into the ‘SyntaxError: return not in function’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: return not in function’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: return not in function’ When Developing JavaScript Apps

To fix the ‘SyntaxError: return not in function’ when we’re developing JavaScript apps, we should make sure we’re using return and yield property inside a function.

On Edge, the error message for this error is SyntaxError: 'return' statement outside of function.

On Firefox, the error message for this error is SyntaxError: return not in function and SyntaxError: yield not in function .

For instance, if we have:

const cheer = function(score) {
  if (score === 147)
    return 'Maximum!';
  };
  if (score > 100) {
    return 'Century!';
  }
}

then we’ll get the error since the first if statement is missing the opening curly brace.

To fix it, we write:

const cheer = function (score) {
  if (score === 147) {
    return "Maximum!";
  }
  if (score > 100) {
    return "Century!";
  }
};

Conclusion

To fix the ‘SyntaxError: return not in function’ when we’re developing JavaScript apps, we should make sure we’re using return and yield property inside a function.

On Edge, the error message for this error is SyntaxError: 'return' statement outside of function.

On Firefox, the error message for this error is SyntaxError: return not in function and SyntaxError: yield not in function .