When using JavaScript, the dash will trigger a ReferenceError

Question

When using JavaScript, the dash will trigger a ReferenceError

When working with JavaScript...

if (eval('typeof admin_post_css_theme_dark-moon)=='function')) {/**/}

...an error message is triggered:

Error: ReferenceError: moon is not defined

This issue seems to be linked to the dash in the theme name, as themes without dashes do not cause any errors...

if (eval('typeof admin_post_css_theme_silver)=='function')) {/**/}

...do not result in any errors.

So why does the dash between 'dark' and 'moon' lead to this error?

Edit: It is recommended that those facing this issue should consider using camelCase or a similar naming convention. Personally, I use a 'name' and a 'base'. The 'base' is a URL-friendly version of the 'name', which may contain characters that are not URL-friendly. For example, 'My Example' and 'my-example' or 'my_example'.

http://en.wikipedia.org/wiki/CamelCase

javascript

Answer 1

Answer №1

Unlike JavaScript variable names, object properties are allowed to contain dashes. For example, you can define object properties like this:

var colors = {
  'background-color': '#ffffff',
  'text-color': '#000000'
};

if (typeof colors['text-color'] === 'string') {
  /**/
}

Answer 2

Unlike JavaScript variable names, object properties are allowed to contain dashes. For example, you can define object properties like this:

var colors = {
  'background-color': '#ffffff',
  'text-color': '#000000'
};

if (typeof colors['text-color'] === 'string') {
  /**/
}

Answer 3

Answer №2

Due to the fact that '-' is not a valid identifier in JavaScript, as it represents the minus sign. Your eval function is essentially attempting to determine the typeof the expression admin_post_css_theme_dark minus moon. In JavaScript, valid identifiers (such as variable, function, or object names) include [A-Za-z0-9_$] but cannot begin with a number (please note that this is a regex and the hyphens indicate range, from a to z, for clarity).

My approach to this issue would be: how were you expecting admin_post_css_theme_dark-moon to be defined? You anticipate it being defined somewhere in the code, in order to then test if it's a function.

But achieving this would be entirely impossible.

var admin_post_css_theme_dark-moon = function(){...};

//or

admin_post_css_theme_dark-moon = function(){...};

However, it can be done like this.

window['admin_post_css_theme_dark-moon'] = function(){...};

Or better yet, utilize your own object.

var Themes = {};
Themes['admin_post_css_theme_dark-moon'] = function(){...};

//or

var Themes = {
    'admin_post_css_theme_dark-moon' : function(){...};
}

When referencing object properties with string indexes (inside [] as a string), they are not restricted by identifier rules.

Then of course, your eval function would need to be adjusted as well.

Something along the lines of:

if (eval("typeof window['admin_post_css_theme_dark-moon']")=='function')) {/**/}

//or

if (eval("typeof Themes['admin_post_css_theme_dark-moon']")=='function')) {/**/}

Take note of alternating " and ' so there's no need for escaping characters.

Answer 4

Due to the fact that '-' is not a valid identifier in JavaScript, as it represents the minus sign. Your eval function is essentially attempting to determine the typeof the expression admin_post_css_theme_dark minus moon. In JavaScript, valid identifiers (such as variable, function, or object names) include [A-Za-z0-9_$] but cannot begin with a number (please note that this is a regex and the hyphens indicate range, from a to z, for clarity).

My approach to this issue would be: how were you expecting admin_post_css_theme_dark-moon to be defined? You anticipate it being defined somewhere in the code, in order to then test if it's a function.

But achieving this would be entirely impossible.

var admin_post_css_theme_dark-moon = function(){...};

//or

admin_post_css_theme_dark-moon = function(){...};

However, it can be done like this.

window['admin_post_css_theme_dark-moon'] = function(){...};

Or better yet, utilize your own object.

var Themes = {};
Themes['admin_post_css_theme_dark-moon'] = function(){...};

//or

var Themes = {
    'admin_post_css_theme_dark-moon' : function(){...};
}

When referencing object properties with string indexes (inside [] as a string), they are not restricted by identifier rules.

Then of course, your eval function would need to be adjusted as well.

Something along the lines of:

if (eval("typeof window['admin_post_css_theme_dark-moon']")=='function')) {/**/}

//or

if (eval("typeof Themes['admin_post_css_theme_dark-moon']")=='function')) {/**/}

Take note of alternating " and ' so there's no need for escaping characters.

Answer 5

Answer №3

There was a modification...

eval('typeof '+my_object)=='function')

...which now reads as follows:

eval('typeof \''+my_object+'\'')=='function')

I didn't get the opportunity to make this change earlier to improve clarity. If you found this answer helpful, be sure to also check out responses from OJay and sabof as they provide valuable insights.

Answer 6

There was a modification...

eval('typeof '+my_object)=='function')

...which now reads as follows:

eval('typeof \''+my_object+'\'')=='function')

I didn't get the opportunity to make this change earlier to improve clarity. If you found this answer helpful, be sure to also check out responses from OJay and sabof as they provide valuable insights.

When using JavaScript, the dash will trigger a ReferenceError

Answer №1

Answer №2

Answer №3

Similar questions

Sending information to Firebase using Angular 4

How to invoke a Struts 2 action synchronously using JavaScript

The Angular.js resource REST request encountered a TypeError due to a function being undefined

What is the best way to prevent the need for a custom script for every button in dataTables?

inserting information into HTML document

Is there an issue with the precedence of jison rules?

The latest iteration of three.js appears to disrupt how light is reflected on meshes

"Exploring the Differences between JavaScript, AJAX, and Servlet for String

The publish-subscribe feature appears to be ineffective

swap out a method within a publicly available npm module

Steps for Including a Required AMP HTML Attribute in an HTML Tag

Organizing your web application directories with AngularJS and Node.js

What is the best way to allow my limit to be as greedy as possible?

Learning how to implement react-toastify promises with axios is a valuable skill to have

I am looking for a setup where a checkbox triggers the opening of the next accordion

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Exploring how to use React with a select component featuring objects

The world of coding comes alive with Quartz Composer JavaScript

Sharing controller methods in Angular.js is a key aspect of enhancing

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website