`The function `setTimeout` throws an error when passed as a string.`

Question

`The function `setTimeout` throws an error when passed as a string.`

Here are two pieces of code that may look identical, but one works properly:

function hideElement(obj) {setTimeout(function() {obj.style.display = "none";}, 20);}

On the other hand, the second one results in error: obj is not defined:

function hideElement(obj) {setTimeout('obj.style.display = "none"', 20);}

What could be causing this difference?
P.S.: Take a look at this example

javascript html css

Answer 1

Answer №1

The solution can be found within the concept of function closures, which offer a more in-depth explanation.

In the initial scenario, the obj variable becomes encapsulated when the anonymous function is created. As a result, when the function is executed, the captured reference to obj allows access to the style property without any issues.

Conversely, in the second scenario, there is no closure due to the fact that the string undergoes evaluation through eval while being nested inside setTimeout. According to the information provided on the Mozilla documentation, this execution takes place within the global context:

Since string literals are assessed at a global level, local symbols from the environment where setTimeout() was invoked will not be accessible during the code evaluation of the string.

Considering that the global context does not include the obj variable, an error indicating it as "undefined" emerges.

Answer 2

The solution can be found within the concept of function closures, which offer a more in-depth explanation.

In the initial scenario, the obj variable becomes encapsulated when the anonymous function is created. As a result, when the function is executed, the captured reference to obj allows access to the style property without any issues.

Conversely, in the second scenario, there is no closure due to the fact that the string undergoes evaluation through eval while being nested inside setTimeout. According to the information provided on the Mozilla documentation, this execution takes place within the global context:

Since string literals are assessed at a global level, local symbols from the environment where setTimeout() was invoked will not be accessible during the code evaluation of the string.

Considering that the global context does not include the obj variable, an error indicating it as "undefined" emerges.

Answer 3

Answer №2

obj is limited to the scope of the dismiss() function and its contents. The initial statement creates a function that can access it, while the second statement operates outside of that scope and cannot access it.

Answer 4

obj is limited to the scope of the dismiss() function and its contents. The initial statement creates a function that can access it, while the second statement operates outside of that scope and cannot access it.

Answer 5

Answer №3

As stated in the official documentation:

When setTimeout() is called, the code within it runs in a separate environment compared to the function that invoked it. This results in the this keyword referring to the window (or global) object rather than the original function's this value.

:

Both examples illustrate how the scope of timeout code is linked to the global context, specifically window.

In the first scenario, the specific context is insignificant because obj.style.display is not assessed until the timeout activates. By that point, obj retains its initial value set by dismiss, ensuring smooth execution.

In contrast, the second example executes the code immediately, meaning that obj remains undefined within the global window scope (or if defined, it may not align with expectations). Essentially, this leads to the following situation:

function dismiss(obj) {setTimeout(function ()  { undefined = "none" }, 20);}

Answer 6

As stated in the official documentation:

When setTimeout() is called, the code within it runs in a separate environment compared to the function that invoked it. This results in the this keyword referring to the window (or global) object rather than the original function's this value.

:

Both examples illustrate how the scope of timeout code is linked to the global context, specifically window.

In the first scenario, the specific context is insignificant because obj.style.display is not assessed until the timeout activates. By that point, obj retains its initial value set by dismiss, ensuring smooth execution.

In contrast, the second example executes the code immediately, meaning that obj remains undefined within the global window scope (or if defined, it may not align with expectations). Essentially, this leads to the following situation:

function dismiss(obj) {setTimeout(function ()  { undefined = "none" }, 20);}

Answer 7

Answer №4

The accurate code should appear as follows:

function hideElement(element) {setTimeout(element.style.display = "none", 20);}

Be sure not to add extra single quotes at the start and end of element.style.display = "none", as it will convert it into a string.

Answer 8

The accurate code should appear as follows:

function hideElement(element) {setTimeout(element.style.display = "none", 20);}

Be sure not to add extra single quotes at the start and end of element.style.display = "none", as it will convert it into a string.

`The function `setTimeout` throws an error when passed as a string.`

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unpacking arguments in Typescript functions

What sets apart npm correlation-id from uuid?

The canvas surpasses the boundaries of the grid layout

When attempting to click the "New" button in a lightning datatable to add a new row, an error

Begin by executing the initial commit task with Git through Gulp, followed by performing the

The issue of HTML form not displaying within a Java servlet environment

Problem with IE off-canvas scrolling

Exploring and listing the key-value pairs from several arrays within an object

Receiving information within an Angular Component (Profile page)

Saving the current $index from an ng-repeat loop to a database row (with row numbers 1.1, 1.2, 1.3) using AngularJS

Different ways to resize an image in various sizes without relying on PHP thumb

Tips on displaying an array of elements as a <Dialog> within a <List>

An array is not just a mere collection of elements

Instructions for importing a CSV file into PostgreSQL with Node.js

I am not encountering any error messages, but when I attempt to click on the form, the mouse cursor does not change to the expected form type

Troubleshooting the Ng2-Charts Linechart to display all values instead of just the first two

Arrange floating elements in a three-column layout

What is the process of transforming an object type into a two-dimensional array using lodash?

Tips for maintaining an open side menu

State management at its core with integrated functionalities