Category: JavaScript

Sometimes, we may run into the ‘SyntaxError: applying the "delete" operator to an unqualified name is deprecated’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: applying the "delete" operator to an unqualified name is deprecated’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: applying the "delete" operator to an unqualified name is deprecated’ When Developing JavaScript Apps

To fix the ‘SyntaxError: applying the "delete" operator to an unqualified name is deprecated’ when we’re developing JavaScript apps, we should make sure that we’re using the delete operator on object properties rather than variables.

The error message for this error is SyntaxError: Calling delete on expression not allowed in strict mode on Edge.

The error message for this error is SyntaxError: applying the 'delete' operator to an unqualified name is deprecated on Firefox.

And in Chrome, the error message for this error is SyntaxError: Delete of an unqualified identifier in strict mode.

This error is only thrown in strict mode.

For instance, the error will be thrown if we write:

'use strict';

let x;

// ...

delete x;

Instead, we should set variable values to null or undefined to make the JavaScript engine garbage collect the variable.

So we can write:

'use strict';

let x;

// ...

x = undefined;

or:

'use strict';

let x;

// ...

x = null;

Conclusion

To fix the ‘SyntaxError: applying the "delete" operator to an unqualified name is deprecated’ when we’re developing JavaScript apps, we should make sure that we’re using the delete operator on object properties rather than variables.

The error message for this error is SyntaxError: Calling delete on expression not allowed in strict mode on Edge.

The error message for this error is SyntaxError: applying the 'delete' operator to an unqualified name is deprecated on Firefox.

And in Chrome, the error message for this error is SyntaxError: Delete of an unqualified identifier in strict mode.

This error is only thrown in strict mode.

Sometimes, we may run into the ‘SyntaxError: a declaration in the head of a for-of loop can’t have an initializer’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: a declaration in the head of a for-of loop can’t have an initializer’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: a declaration in the head of a for-of loop can’t have an initializer’ When Developing JavaScript Apps

To fix the ‘SyntaxError: a declaration in the head of a for-of loop can’t have an initializer’ when we’re developing JavaScript apps, we should make sure that we don’t have any assignment statements in the parentheses for the for-of loop.

For instance, instead of writing code like:

const arr = [10, 20, 30];

for (let value = 50 of arr ) {
  console.log(value);
}

where we have an invalid assignment statement in the head of the for-of loop, we write:

let value = 0;

const arr = [10, 20, 30];

for (const value of arr) {
  value += 50;
  console.log(value);
}

where we assign a value to the value variable inside the for-of loop body, which is valid.

If we want to assign a value in the head of the loop, we can use the for loop.

Conclusion

To fix the ‘SyntaxError: a declaration in the head of a for-of loop can’t have an initializer’ when we’re developing JavaScript apps, we should make sure that we don’t have any assignment statements in the parentheses for the for-of loop.

Sometimes, we may run into the ‘SyntaxError: Unexpected token’ when we’re developing JavaScript apps.

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

Fix the ‘SyntaxError: Unexpected token’ When Developing JavaScript Apps

To fix the ‘SyntaxError: Unexpected token’ when we’re developing JavaScript apps, we should make sure we’re writing JavaScript code that’s syntactically valid.

Different unexpected token errors that may be thrown include:

SyntaxError: expected expression, got "x"
SyntaxError: expected property name, got "x"
SyntaxError: expected target, got "x"
SyntaxError: expected rest argument name, got "x"
SyntaxError: expected closing parenthesis, got "x"
SyntaxError: expected '=>' after argument list, got "x"

For instance, we should make sure we aren’t adding trailing commas when we’re chaining expressions:

for (let i = 0; i < 5,; ++i) {
  console.log(i);
}

We have:

i < 5,;

which has a comma before the semicolon. This is invalid syntax.

Instead, we should write:

for (let i = 0; i < 5; ++i) {
  console.log(i);
}

which removed the extra comma.

We should also make sure that we have corresponding closing parentheses for any opening parentheses.

For example, instead of writing:

function round(n, upperBound, lowerBound){
  if(n > upperBound) || (n < lowerBound){
    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
  }
} 

We write:

function round(n, upperBound, lowerBound) {
  if (n > upperBound || n < lowerBound) {
    throw (
      "Number " +
      String(n) +
      " is more than " +
      String(upperBound) +
      " or less than " +
      String(lowerBound)
    );
  }
}

which removes the extra parentheses from if boolean expression.

Conclusion

To fix the ‘SyntaxError: Unexpected token’ when we’re developing JavaScript apps, we should make sure we’re writing JavaScript code that’s syntactically valid.

Sometimes, we may run into the ‘SyntaxError: Unexpected "#" used outside of class body’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: Unexpected "#" used outside of class body’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: Unexpected "#" used outside of class body’ When Developing JavaScript Apps

To fix the ‘SyntaxError: Unexpected "#" used outside of class body’ when we’re developing JavaScript apps, we should make sure that we only use the # in places where they’re valid.

For instance, instead of writing code like:

document.querySelector(#foo)

where the # sign isn’t expected to be in front of a variable name, we should write:

document.querySelector("#foo")

where the # sign is in a string.

# is valid inside a string so the error won’t be thrown.

Also, if we’re using the # sign to declare a class with a private field, we should make sure we only access the private field where it is available.

For instance, instead of writing:

class ClassWithPrivateField {
  #privateField

  constructor() {
  }
}

this.#privateField = 2

where we’re trying to access privateField outside a class, which triggers the error, we should instead write:

class ClassWithPrivateField {
  #privateField

  constructor() {
    this.#privateField = 2
  }
}

Conclusion

To fix the ‘SyntaxError: Unexpected "#" used outside of class body’ when we’re developing JavaScript apps, we should make sure that we only use the # in places where they’re valid.

Sometimes, we may run into the ‘SyntaxError: JSON.parse: bad parsing’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘SyntaxError: JSON.parse: bad parsing’ when we’re developing JavaScript apps.

Fix the ‘SyntaxError: JSON.parse: bad parsing’ When Developing JavaScript Apps

To fix the ‘SyntaxError: JSON.parse: bad parsing’ when we’re developing JavaScript apps, we should make sure we pass in a valid JSON string as an argument of the JSON.parse method.

Other possible error messages for various JSON parse errors include:

SyntaxError: JSON.parse: unterminated string literal
SyntaxError: JSON.parse: bad control character in string literal
SyntaxError: JSON.parse: bad character in string literal
SyntaxError: JSON.parse: bad Unicode escape
SyntaxError: JSON.parse: bad escape character
SyntaxError: JSON.parse: unterminated string
SyntaxError: JSON.parse: no number after minus sign
SyntaxError: JSON.parse: unexpected non-digit
SyntaxError: JSON.parse: missing digits after decimal point
SyntaxError: JSON.parse: unterminated fractional number
SyntaxError: JSON.parse: missing digits after exponent indicator
SyntaxError: JSON.parse: missing digits after exponent sign
SyntaxError: JSON.parse: exponent part is missing a number
SyntaxError: JSON.parse: unexpected end of data
SyntaxError: JSON.parse: unexpected keyword
SyntaxError: JSON.parse: unexpected character
SyntaxError: JSON.parse: end of data while reading object contents
SyntaxError: JSON.parse: expected property name or '}'
SyntaxError: JSON.parse: end of data when ',' or ']' was expected
SyntaxError: JSON.parse: expected ',' or ']' after array element
SyntaxError: JSON.parse: end of data when property name was expected
SyntaxError: JSON.parse: expected double-quoted property name
SyntaxError: JSON.parse: end of data after property name when ':' was expected
SyntaxError: JSON.parse: expected ':' after property name in object
SyntaxError: JSON.parse: end of data after property value in object
SyntaxError: JSON.parse: expected ',' or '}' after property value in object
SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
SyntaxError: JSON.parse: property names must be double-quoted strings
SyntaxError: JSON.parse: expected property name or '}'
SyntaxError: JSON.parse: unexpected character
SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)

For instance, we shouldn’t pass in a JSON string that has trailing commas:

JSON.parse('[1, 2, 3, 4,]');
JSON.parse('{"foo": 1,}');

The first line has a trailing comma at the end of the array.

The 2nd has a trailing commas at the end of the object.

Instead, we should fix the error by removing them:

JSON.parse('[1, 2, 3, 4]');
JSON.parse('{"foo": 1}');

Also, property names must be double quoted strings, so instead of writing:

JSON.parse("{'foo': 1}");

We write:

JSON.parse('{"foo": 1}');

Also, we can’t have numbers with leading zeroes in our JSON string:

JSON.parse('{"foo": 01}');

Instead, we fix that by removing the leading zero:

JSON.parse('{"foo": 1}');

Trailing decimal points are also invalid JSON, so we can’t write:

JSON.parse('{"foo": 1.}');

Instead, we write:

JSON.parse('{"foo": 1.0}');

Conclusion

To fix the ‘SyntaxError: JSON.parse: bad parsing’ when we’re developing JavaScript apps, we should make sure we pass in a valid JSON string as an argument of the JSON.parse method.