Exploring the concept of JavaScript closures and the pitfalls of name clobber

Is it possible for variables defined inside an inner function with the same name as a variable in an outer function to be isolated from the outer variable?

function() {
    var myTest = "hi there";
    ( function( myLocalTest ) {
        myLocalTest = "goodbye!";
    } )();
    console.log( myTest ); // myTest should still be "hi there" here, correct?
}

Typically, if I didn't declare myLocalTest inside the inner function, it would create a closure and modify the original variable. I just want to confirm that variables declared within an inner function are always contained within that function even if their name conflicts with an outer scope.

Answer №1

Absolutely, they definitely do! Whenever a function is invoked, a new scope is created and the variable declared within the closest scope will always be prioritized. There are no cases where this rule does not apply.

Answer №2

To provide a thorough explanation, let's explore these examples that are quite similar but have some key differences:

let y = 'alpha';
( function() {   //no parameter is provided here
    y = 'beta';
    alert('inner:'+y); //beta
} )();
alert('outer:'+y); //beta

Now, let's introduce a variable with the same name:

let y = 'alpha';
( function() {
    let y = 'beta';
    alert('inner:'+y); //beta
} )();
alert('outer:'+y); //alpha

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to execute the pdf.js node demonstrations?

I've been attempting to run the pdf.js node examples, specifically getinfo.js. Unfortunately, I encountered an issue that resulted in the following error: C:\Repositories\pdf.js>node getinfo.js node:internal/modules/cjs/loader:1080 thro ...

transforming array elements into properties of a React component

My text component contains the code below return ( <FormControl variant="outlined" className={classes.formControl}> <Grid container> <TextField id={props.id} label={props.label} d ...

What are some methods for resolving the problem of CORS policy blocking access to retrieve data from Yahoo Finance?

Currently, I am attempting to retrieve the price of a stock within my pure React App by utilizing fetch. When I try to fetch without any options or configurations, using fetch(url), I encounter the following error: Access to fetch at 'https://quer ...

HtmlWebpackPlugin can cause issues with loading relative path files on websites that are not located in the root directory

I have set up webpack and the HtmlWebpackPlugin to automatically include bundled js and css files in an html template. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' ...

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

I am working with a table of 10 products and their monthly sales data. Using Angular JS, I am looking to highlight the entire column based on the current month and year. Additionally, we will also be incorporating future expected sales data into the table. ...

I can't figure out why my SCSS isn't loading, even though I've added it to the webpack.mix.js file in my Laravel project that's set up with React.js

I'm facing a problem where my SCSS is not loading in the VideoBackground.js component of my Laravel project built with React.js, even though I have set it up correctly in the webpack.mix.js file. The file path for the videoBackground.scss file within ...

Digital Repeater and Angle Measurer

Seeking Guidance: What is the recommended approach for locating the Virtual Repeaters in Protractor? A Closer Look: The Angular Material design incorporates a Virtual Repeater to enhance rendering performance by dynamically reusing visible rows in the v ...

Updating website content dynamically using Javascript and JSON-encoded data

My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...

Send the model to the route to be filled through the query parameter

I'm currently working on a task that involves creating a function to handle app routes. The goal is to pass in an object that will be filled with the fields from the request body. In my code snippet below, I encountered an error mentioning that ' ...

What is the accurate way to determine the total number of minutes elapsed from a specific point in time?

String representation of the process start date: '2020-03-02 06:49:05' Process completion date: '2020-03-02 07:05:02' Question: What is the optimal method for calculating the time difference (in minutes) between the start and end ...

Verify and deselect boxes

Can someone help me with checking and unchecking checkboxes? I'm facing a lot of issues with it. You can find my code snippet here: http://jsfiddle.net/N5Swt/: <input type="checkbox" id="checkbox1" /> <span> Check me! </span> // ...

Return a response from the controller method without using the express response object

When attempting to handle the scenario where a fetch for an item does not return anything from another method that lacks the express response, I encounter an issue. I invoke this method from another one that has the express response: const updateItem = asy ...

Leveraging a single Axios request across various components

My current setup involves making a simple Axios call in this way: .get('https://myAPI.com/') .then(response => { this.info = response.data }) Subsequently, I utilize a v-for array loop on my components to display the retrieved data. ...

Exploring the functionality of promises in JavaScript

Currently, I am using the most recent version of Angular. The code snippet I've written looks like this: $q.all({ a: $q.then(func1, failHandler), b: $q.then(func2, failHandler), c: $q.then(func3, failHandler), }).then(func4); Is it guaranteed ...

Duo and reference loop

I'm trying to learn how to use backreferences in JavaScript. I have an array and want to replace it within a string. Here's what I've attempted so far: var items = ["book", "table"]; var sentence = "The $1 is on the $2"; var newSentence ...

What is the correct method for downloading an Excel file in a Vue.js application?

I am having difficulty downloading an Excel file in xlsx format using my Vue.js application. The Vue.js application sends a post request to the Node.js application which then downloads the Excel file from a remote SFTP server. The backend application is fu ...

Having trouble extracting the Top-Level Domain from a URL

I'm struggling to find a reliable way to extract the Top-Level Domain from a URL. The challenge I'm facing is that the URLs entered by users can vary greatly - they might enter www.google.com, m.google.com, m.google.uk, google.uk, or www.m.google ...

Issue with Jest while testing a React component library that has been bundled without the React library

I have extensive experience building React applications and decided to create a React Component library. After researching different approaches, I chose to use Webpack and Babel for bundling without including React itself in the library. This decision was ...

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

I am currently working on implementing Google Sign In within my Angular4 app, but I have run into an unusual issue with routing after using router.navigate() in the Google Sign In callback function. To help illustrate this issue, I have created a sample d ...

Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...