limit the scope of contents in js file

Question

I recently encountered a situation where i have A.js, B.js and C.js . All those JS files importing a same module. ( ex: const hello = require ("hello");) . While running them together i get following SyntaxError in the console

Uncaught SyntaxError: Identifier 'home' has already been declared

I'm loading those JS files from HTML using Script tag like below

<script src="../js/A.js"></script>
<script src="../js/B.js"></script>
<script src="../js/C.js"></script>

Moving content of each js file into { } curly braces is one option to fix the SyntaxError.

But i want to know whether this({}) is right solution or do we have any other better solutions to address this situation

How are you using `require ("hello");` in the browser? What module format/loader are you using? — Bergi, Sep 14 '19 at 23:55

jirassimok · Accepted Answer · 2020-01-24T05:37:43.720

A common solution would be to use an IIFE (Immediately Invoked Function Expression). Basically, wrap your code in a function and call it at the same time. This both protects the code's scope and prevents people viewing the page from accessing your data in their developer tools.

(function() {
    /* your code here */
})();

A more modern, and arguable more correct, solution would be to use JavaScript modules. Then you can use import instead of require, and you can organize your code a bit more like you would expect from Python or Java.

<!-- index.html -->
<script type="module" src=".../module.js"></script>
<script type="module" src=".../src1.js"></script>
<script type="module" src=".../src2.js"></script>

// module.js
export const MESSAGE = "Hello, world!";

// src1.js (src2.js looks basically the same)
import { MESSAGE } from ".../module.js";
console.log("src1 says:", MESSAGE);

However, a few browsers do not support modules. To get around that, you could use a bundler (such as Webpack, Parcel, or Rollup) to compile your project. These also provide other features (such as code minification). But for a small project, using a bundler may not be worth the effort (though learning to use them will be helpful if you go into web development).

Jonas Wilms · Answer 2 · 2019-09-14T23:15:26.287

1

Moving content of each js file into { } curly braces is one option to fix the SyntaxError.

Yes. That syntax error is only caused by redeclaring a variable that was declared with let or const, and these are block scoped, so introducing a new block fixes that.

Note that vars and functions will leak through it though (but redeclaring them won't cause an error¹):

 {
    function test() { }
 }

 test();

¹ as you usually want strong encapsulation as redeclaring global variables usually causes unpredictable side effects, I'd go with an IIFE, or use ES modules.

edited Sep 14 '19 at 23:15

answered Sep 14 '19 at 23:06

Jonas Wilms

132,000
20
149
151

Use strict mode to prevent function declarations from [leaking through block scopes](https://stackoverflow.com/q/31419897/1048572). – Bergi Sep 14 '19 at 23:57

score 0 · Answer 3 · answered Sep 14 '19 at 23:13

0

It is always a good habit to have your code wrapped inside an anonymous function as follows

(function(){
    /* all your variables, and functions ... everything goes in here */
})();

answered Sep 14 '19 at 23:13

smacaz

148
8

limit the scope of contents in js file

3 Answers3