【JavaScript】JS / HTML で円マークを表示させる


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

今日も超小ネタです。

いわゆる円マークを画面に表示させる時どうするのか、という話です。

# JS / HTML で円マークを表示させる

ファイルの文字コードがShift-jisでJSファイルを書いている場合、

JSファイル内で円マークを表示させるときは`\xA5`で表示されます。

これは、JSがunicodeベースで作られているためです。

また、HTML上では`&yen;`で表示することができます。

今日は以上です。



## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

今日はJSのラッパーオブジェクトについて書きます。

文字列型だけど一瞬プロパティが作られて、実行直後に破棄される動きです。

# JSのラッパーオブジェクトの不思議

## プリミティブ型の仕様

### 不思議に思ったこと

```js
const falsy = "false";

if(falsy) {
  console.log(falsy.aa = "aa");
  console.log(falsy);
}

コンソール出力結果：
"aa"
"false"
```

オブジェクト的な扱いなのであれば、

"false"の中にkey aaのValue "aa"が存在するのでは？

どういうデータ構造になっているのかわからない

---

JSは基本全てオブジェクトであるが、プリミティブ型はほぼオブジェクトというような位置づけ

JSはエラー回避のため、上記のようなコードがあった場合、
実行用のオブジェクトが一瞬作られ、実行したら即破棄される

そのため、コンソールにはaa, falseとなった

仕様上の動きであり、String, Array, Number, Booleanなどの型でも同様の動き

これがラッパーオブジェクト


【JavaScript】プリミティブ型はほぼオブジェクトという話


## intro

こんにちは、Shumpei[(@seventhseven)](https://twitter.com/seventhseven)です。

動的に要素数が変わってしまうオブジェクトの初期値をキャッシュしておきたいなんていう時、

変数化した配列に値を入れておいて、好きなときに取り出して使う方法です。

# オブジェクトをキャッシュする方法

1. オブジェクトの配列を用意する

```js
const itemArr = [
  {
    name: 'mic',
    age: 16,
    gen: 'male',
    params: document.getElementById('hoge'),
  },
  {
    name: 'drake',
    age: 20,
    gen: 'male',
    params: document.getElementById('fuga'),
  },
];
```

2. キャッシュ用の殻配列を用意する

```js
const cacheArr = [];
```

3. for文を回して任意の値をキャッシュ配列に入れていく

```js
function addCache(arr) {
  for (let i = 0; i < arr.length; i++) {
    cacheArr.push(arr[i].name(or age, pamars, etc...))
  }
};

addCache(itemArr);
```

もしくは。pushを使わずに、`cacheArr[cacheArr.length]`に代入していきます。

```js
function addCache(arr) {
  for (let i = 0; i < arr.length; i++) {
    cacheArr.push(arr[i].name(or age, pamars, etc...))
    cacheArr[cacheArr.length] = arr[i].name(or age, pamars, etc...);
  }
};

addCache(itemArr);
```

## 使い所

例えば初期値と現在のパラメータの比較で使えるかと思います。

スライドショーで、最初は１枚しか表示してなかったけど、

動的に増えたから矢印ボタンを表示させる…とかだと使えるかも。

## ワンポイントメモ

個人的には、最後の`addCache`としている関数は、`name`なら`addCacheInitName`などにして、

もう少し具体的な名前にします。

また、取得したいパラメータが２つ，３つくらいであれば、

それぞれパラメータ毎に分けて`addCacheInitAge`とか`addCacheInitParams`も作っておきます。

そうしておくと、それらをラップしておく関数を作っておけば修正がしやすくなります。

```js
function addInitCacheItems() {
  addCacheInitName();
  addCacheInitAge();
  addCacheInitParams();
}
```

こんな感じにまとめてあげると、関数の呼び出し順を変えることも簡単ですし、

ひとつだけ関数を消したり、あとから付け足すことも難しくないからです。

そしてこの`addInitCacheItems`関数も、例えば`initApp`みたいな一番大きい関数の１つのルーチンとして登録しておけば

取り出しやすいですね。
