JavaScript には現状、参照渡し / 参照変数 にあたる構文は ありません。

レギュレーション

ここで言う 参照渡し は実引数で渡した変数に対して仮引数で渡された変数への代入が反映される状態のことを指します。
参照変数 も上記の様な変数への代入が反映される状態のことを指しています。

プロパティへの代入が反映されるのはここでは参照渡しや参照変数とは言いません

ここで、構文が無いと言っているのは変数に限らなければ Proxy を噛ませてプロパティ経由で代入を外の変数に反映することはできるからです。

つまり、変数への代入に Proxy が挟める様になるもしくは Proxy が挟まっていることを隠蔽できる構文ができれば参照渡しと言えます。

vue の場合

例えば vue だと Proxy を経由して次の様な構文で仮引数のプロパティへの代入を反映することはできます。

import {ref} from "vue";
const v = ref(0);

function f(v2) {
 v2.value = 2;
}
f(v);
console.log(v.value);
// -> 2

そうです。このままではレギュレーション違反です。参照渡しには なりません。

ただ、 vue はマクロを噛ませるタイプの言語な為、 template上では .value を書かなくてもいいです。

<script setup>
import { ref } from "vue";
const v = ref(0);
</script>
<template>
  <button @click="v = 2">click me</button>
  <div>{{ v }}</div>
</template>

playground

そう隠蔽できればいいのです。

Reactivity Transform

vue 3 では一時期 .value を隠蔽する構文を提供するマクロが実験的に提供されていた頃があります。

Reactivity Transform は実験的な機能でしたが、最新の 3.4 のリリースで削除されました。

次の様な構文です。

<script setup>
let count = $ref(0);

console.log(count);
// -> 0

function increment() {
  count++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

これの script タグ内の部分ははマクロによって次の様に展開されます。

import { ref } from 'vue'

let count = ref(0)

console.log(count.value)

function increment() {
  count.value++
}

そう .value が隠蔽されて参照渡しの実装としてはそれっぽいです。

ただ、これが実験的な機能からそのまま廃止されたのは .value をつけないとそれが ref() であるかどうかがわからず、また、このマクロを適用していない箇所との運用がやりにくくそれらにより強い反対を受けて廃止となりました。

まぁ、わかりにくくなる要因になるので順当だとは思います。

proposal-refs

ECMAScript の未提出の野良プロポーザルに proposal-refs というのがあります。

Reference (ref) declarations and expressions for ECMAScript

とあり、これは次の様な構文を提供するプロポーザルです。

function max(ref first, ref second, ref third) {
  const ref max = first > second ? ref first : ref second;
  return max > third ? ref max : ref third;
}

let x = 1, y = 2, z = 3;
let ref w = max(ref x, ref y, ref z);
w = 4;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 4

これはつまり　下記の様に解釈されます

const __ref = (get, set) => Object.freeze(Object.create(null, { value: { get, set } }));

function max(ref_first, ref_second, ref_third) {
  const ref_max = ref_first.value > ref_second.value ? ref_first : ref_second;
  return ref_max.value > ref_third.value ? ref_max : ref_third;
}

let x = 1, y = 2, z = 3;
const ref_x = __ref(() => x, _ => x = _);
const ref_y = __ref(() => y, _ => y = _);
const ref_z = __ref(() => z, _ => z = _);
const ref_w = max(ref_x, ref_y, ref_z);
ref_w.value = 4;
console.log(x); // 1
console.log(y); // 2
console.log(z); // 4

まさに 参照渡し ぽくて良いですね。

ただ、これは ECMAScript の proposal として提案には上がっていない様なので今後どうなるか……… vue の件もあるので多分上がらないとは思います。

ふまえて

javascript で参照渡し / 参照変数を使える構文を用意するとわかりにくいのはわかっていただけましたでしょうか？既にあるコードとの兼ね合いもあり、組み込むのは難しい気がします。

ただ、class に於ける private 変数が #hoge の様なプレフィックス構文だったこともありましたので参照変数の prefix 指定すればわかりやすかったのでは？みたいなところはあります。

例えば……

const ref ^value = ref v;

の様な……。

※ 冗談です。既に使える prefix に空きは無かった筈です。

以上。