◆ 宣言してから使うまでにその変数には触れてない
◆ と思ったのに 関係なく見える関数呼び出しの先で更新されてた

どこかのページで動きを devtools 見てるときに変に苦労した話です

function fn(){
var value1 = 100
/* 色々 */
var value100 = 1
var value101 = fn100(value99)
fn101(value100)
}

適当に縮めるとこういう感じのコードです

value100 が宣言されて fn101 を呼び出すまでに使用されてないので fn101 は 1 になるはず と思いこんでたのですが 違う値になってるようです
何度か見直しましたが 他の関数でなく ここで値が想定していたものと変わってるようです
fn101 を呼び出すタイミングで 1 以外になってるようです

devtools 時々おかしいし そのバグなんじゃ? と疑ってみるほどに困ったものの 分かれば単純なものでした
「/* 色々 */」のところは長くて無視してたのですが ここでも value100 にアクセスは可能です
fn100 が呼び出す関数のどこかで value100 が書き換えられていました

function fn(){
var value1 = 100
/* 色々 */
function fn98(a, b){
function fn99(x){
value100 = x
return x + 1
}
return fn99(a + b)
}
var value99 = 0
function fn100(value){
return fn98(value, 100) / 100
}
/* 色々 */
var value100 = 1
var value101 = fn100(value99)
fn101(value100)
}

こういう感じで ちょっと複雑になっていました

自分や関係ある人が書いたわけではないので 「value100 の定義より上の関数で value100 を参照しないようにして」 なんて言っても仕方ないのですが スコープの中とは言え 見づらいのでこういうコードは書かないようにしたいものですね

fn100 というわかりやすい関数呼び出しだったからいいものの getter/setter とか Proxy とか toString とか一見ほかに影響ないようなもので書き換わっていたら気付ける自信がないです

fn 関数の中身が十分短いなら全体を読んでてすぐに気付けるかもしれませんが ディスプレイ 1 画面内に収まらない縦長だと関係ないところはできるだけ読み飛ばしますし そう出来るコードであってほしいですしね