最寄りの村へ

下記URLと全く同じ状況で詰まってたのでその記録。

参考：https://teratail.com/questions/373

つまるところ
【数列】+ 【数列】 + 【数列】= 【数列】;
なんだけど、
【文字列】+ 【数列】 + 【数列】= 【文字列】;
だとこうなるよって話。

別件でDOM操作してて、valueの値を全く弄れなくて悩んでたら
文字列と数列の違いが原因だった。
この二つは見た目一緒でも、扱われ方は全然違うらしい。
よく見るとコンソールでも色が違かった。

ついでに型変換方法まとめ

動的な型変換

数列＞文字列

const num = 123;
const result1 = num.toString();
const result2 = String( num );
 
console.log( result1 ); //"123"
console.log( typeof result1 ); //string
console.log( result2 ); //"123"
console.log( typeof result2 ); //string

文字列＞数字

const num = 123;
const result1 = Number( str );
const result2 = parseInt( str );
 
console.log( result1 ); //"123"
console.log( typeof result1 ); //number
console.log( result2 ); //"123"
console.log( typeof result2 ); //number

暗黙的な型変換

暗黙的な型変換　＝　動的な型変換がに対して、明示的に書かなくても行われる型変換。

console.log(1 + "2"); // => "12"
console.log(1 - "2"); // => -1 

const x = 1, y = "2", z = 3;
console.log(x + y + z); // => "123"
console.log(y + x + z); // => "213"
console.log(x + z + y); // => "42"

つまり・・・

• 「ー」の時は文字列が数列になる。
• ”先に演算”されてると、文字列も数列として扱われる。

として理解。

要素の選択

DOM操作の基本、要素をひっぱる方法まとめ

  <div class="row col-10 mb-3 mx-auto justify-content-center">
    <button id="btn1" class="btn btn-danger col-2 m-1">ボタン赤</button>
    <button class="btn btn-success col-2 m-1">ボタン緑</button>
    <button class="btn btn-primary col-2 m-1">ボタン青</button>
    <button class="btn btn-warning col-2 m-1">ボタン黄</button>
  </div>

.getElementById();

ピンポイントで習得できるが、IDの設定がいる。

const btn = document.getElementById('btn1');
console.log(btn.textContent); //結果 ボタン赤

.getElementsByClassName()[];

同名のクラスが複数習得されてオブジェクトされる。
getElementsなのに注意。

const btn = document.getElementsByClassName('btn')[1];
console.log(btn.textContent); //結果 ボタン緑

.getElementsByTagName()

const btn = document.getElementsByTagName('btn')[2];
console.log(btn.textContent); //結果 ボタン青

タグ名でもオブジェクトで指定できる。

変数の違い

let・・・基本これ使う。constと違って内容を変更できる。
const・・・定数（厳密には違う）。一度代入した内容を変更できない。
var・・・基本使わない旧変数。再宣言のみ可

	const	let	var
再宣言	×	×	○
再代入	×	○	○
スコープ	ブロック	ブロック	関数
ホイスティング	エラー	エラー	undefined

スコープ・・・変数や関数の影響範囲
┗ブロックスコープ・・・{ と } で括られた、 プログラム処理上のひとまとまり
┗関数スコープ・・・宣言された関数の{ と } で括られた範囲内。

後半いまいち釈然としないが一旦これで覚えておく。