iがクリックごとに増えるようにしたい

質問

二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません

var firstClick = true;
const startBtn = document.getElementById('js');
startBtn.addEventListener('click', ()=> {
if(firstClick) {
var i = 0;
var firstClick = false;
}
~
var firstClick = true;をグローバルに移動してみましたが今度はなぜかundefinedになってしまいます。
なぜイベントリスナー外に出すとundefinedになってしまうのでしょうか？
trueを0にしてもやはりundefinedになってしまいます。

またiは繰り返し増えていく数値全般に使うので、同じ変数名が多用されてどうしても被ってしまうのですが、現場ではどう対処しますか？

cssだとbemを使って対処しますが。
jsでもtimerI,timer-iなどにするのでしょうか？

回答No.1

Gotthold

> var firstClick = false;
ここでvarでローカル変数firstClickを宣言しているので、
この関数内ではグローバル変数firstClickにはアクセスできずローカル変数firstClickが使われます。
（var宣言は巻き上げ処理されるので、関数内のどこで宣言しても関数先頭で宣言したのと同じ扱いです。）

> if(firstClick) {
の時点ではローカル変数firstClickには何も代入されていないのでundefinedになります。

> またiは繰り返し増えていく数値全般に使うので、
> 同じ変数名が多用されてどうしても被ってしまうのですが、現場ではどう対処しますか？
このiの使い方はおかしいです。
iのような短い変数名は、forループのループ階数をカウントする変数のように
使われる範囲が狭くて短い変数名でも用途がすぐに理解できるような所に使います。

クリックするたびに増えるようなプログラムの広範囲で利用する
状態を管理するような変数ならちゃんと意味のある名前を付けてください。