連想配列には.lengthが使えない話

lengthはオブジェクトには使用できない！！

先日社内での新規プロダクト開発案件にて起きた出来事。

<div v-if="feature.length　> 0">{{ feature }}</div>

-------------------------------------------------------------------------------------------------
<script>
const vm = new Vue({
feature: <?php echo !empty($feature) ? Format::forge($feature)->to_json() : 'null'; ?>,
})
</script>

上記のような変数の中身が入っていれば表示、なければ表示しないというありがちな処理をvueで記述した際に間違いなく値が入っているのに何故か表示されないという場面に遭遇。
なぜだ。。と数時間ハマってしまいました。
結論からいうと変数が連想配列としてフロントに渡されておりそれをjsonに変換→オブジェクト化→lengthは配列にのみ使用でき連想配列（オブジェクト）には使用できない、という単純なオチでした。。
情けない。。

一応配列と連想配列（オブジェクト）についてまとめてみる

オブジェクトとは、複数の値を名前で区別し管理します。オブジェクトに入っているこれらデータはプロパティと呼ばれます。
そしてjavascriptではオブジェクトと連想配列は同じものとして扱われます。（その他言語では明確に異なるものとして扱われることがあります。）

一方配列は複数の値を名前ではなく番号で区別し管理します。
そしてJavaScriptでは、配列は「特殊なオブジェクト」です。単なるオブジェクトでもobj[1]=5;のようにセットできてはしまいますが、配列の場合は書き換えることでlengthが自動更新されたり、pushやsliceといった、配列操作に便利なメソッドが用意されています。

そして今回の問題のオチとしましては上述したlengthは配列に用意されたメソッドでありオブジェクトには使うことができなかったというものです。

おわりに

思いも寄らないところでつまずいてしまいましたがオブジェクトと配列の違いについては今までなんとなくしか理解できていなかったので非常に良い学びになりました。
疲れたマン。