Javascriptの変数にvarをつけた場合とつけない場合の違い

結論

varをつけた場合
→そのスコープ内でのみ生存するローカル変数を作成する。
　すでに外側に同一名の変数が存在しても干渉されない。

varをつけない場合
→スコープ外へ同一名の変数が存在するまで辿っていき、存在した場合はその変数を利用する。
　存在しなければグローバル変数を作成する。

検証

paizaで検証しました。

検証環境
https://paiza.io/projects/9LF5qxEJ0QdKsB-Z_8mhrg?language=javascript

ソースコード

x = 'global';
y = 'global';
z = 'global';

function outfunc(){
    var x = 'out'; // outfunc内のみ生存
    var y = 'out'; // outfunc内のみ生存
    z = 'out';     // globalのzを使用
    
    function infunc(){
        var x = 'in'; // infunc内のみ生存
        y = 'in';     // outfuncのyを使用(=outfunc内のみ生存)
        z = 'in';     // outfuncのz(=globalのz)を使用
        console.log('in           ', x, y, z); // in, in, in
    }
    
    console.log('out_before   ', x, y, z); // out, out, out
    infunc();
    console.log('out_after    ', x, y, z); // out, in, in
}

console.log('global_before', x, y, z); // global, global, global
outfunc();
console.log('global_after ', x, y, z); // global, global, in

出力結果

global_before global global global
out_before    out out out
in            in in in
out_after     out in in
global_after  global global in