# Конфликты переменных в JavaScript

Пусть у нас есть HTML страница `index.html`, на которой в теге `script` вы создаете переменную `str` и выводите ее на экран:

`<html> <head> <script> let str = 'script text'; alert(str); // выведет 'script text' </script> </head> <body> ... </body> </html>`

Пусть у нас также есть файл `script.js`, в котором также задается переменная `str`:

`let str = 'file text';`

Пусть теперь наш файл `script.js` подключается к странице `index.html` следующим образом:

`<html> <head> <script> let str = 'script text'; </script> <script src="script.js"></script> <script> alert(str); </script> </head> <body> ... </body> </html>`

Так как переменная `str` есть и в файле `index.html`, и в файле `script.js`, то будет конфликт, в котором победит та переменная, которая написана ниже, то есть переменная из файла `script.js`. То есть наш алерт выведет `'file text'`, а не `'script text'`, как мы ожидаем.

Проблема на самом деле очень серьезная. В реальном сайте у вас чаще всего будет несколько файлов с вашими скриптами, кроме того, вы будете подключать какие-то сторонние плагины. В этом случае переменные и функции одного файла могут конфликтовать с переменными и функциями другого файла.

←→
↑
en ru