Using multiple JS files- variable/function overlap.

Question

I am referencing multiple JS files within a single HTML file. I know that there should be no overlap of Variable and Function names in these JS files. However, is that limited to only Global Variables or all variables(even local variables within a function)?

Only variables in the same scope. The JS files will only be sharing the global scope, so that's what you need to be careful with. — VLAZ
– VLAZ, Commented Nov 2, 2016 at 16:45
As per tmslnz's answer, if you wrap your scripts in (function () { 'use strict'; /* script */ })(); then you cannot leak anything to the global scope accidentally. Only explicitly set properties on the window object will be global — William B
– William B, Commented Nov 2, 2016 at 17:22
Good point @WilliamB but watch out with strict as things do get pretty strict and confusing sometimes :) — tmslnz
– tmslnz, Commented Nov 2, 2016 at 17:27
Hi @jagpreetsingh Please remember to accept answers that resolve your query. — tmslnz
– tmslnz, Commented Nov 2, 2016 at 17:28
@tmslnz i find the strict mode errors to typically bring attention to mistakes that would otherwise be missed. "var" is not usually left off an assignment to intentionally make a variable global (as window.variable is much more clear), so having an error thrown is more useful. Same with attempted deletion of non-deletable properties delete Object.prototype etc. — William B
– William B, Commented Nov 2, 2016 at 17:32

tmslnz · Accepted Answer · 2016-11-02 17:25:52Z

1

// These will go into global scope

nonKeywordedVarA = true; // just don't

var nonKeywordedVarC = true;

function leaky () {
  nonKeywordedVarB = true;
}

// These will stay where you put them

function nonLeakyA () {
  var functionScoped = true;
}

function nonLeakyB () {
  var functionScoped = false;
}

if (true) {
  let blockScoped = true;
}

if (true) {
  let blockScoped = false;
}


leaky();
nonLeakyA();
nonLeakyB();

// Here we log global scope
console.log(typeof nonKeywordedVarA)
console.log(typeof nonKeywordedVarB)
console.log(typeof nonKeywordedVarC)
console.log(typeof functionScoped)
console.log(typeof blockScoped)

It is limited only to variables in the same scope:

variables declared without var, let, const keywords (e.g. someVar = true). These go leak straight into global scope (eg window object)
variables declared outside any function scope (or block scope in case of let)

In short the answer to your question is don't worry about variables with the same name in different scopes.

edited Nov 2, 2016 at 17:25

answered Nov 2, 2016 at 17:14

tmslnz

1,8132 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jagpreet Singh Over a year ago

My test environment is currently down due to maintenance. Will test this and respond as soon as possible. Thank you so much for your reply!

Collectives™ on Stack Overflow

Using multiple JS files- variable/function overlap.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related