計算してみよう
こんにちは！りんご先生です
今回も一緒に学習していきましょう！
目次はコチラ
Progateの対応するレッスンはコチラ
今回の内容は、実は前回の記事でほぼ触れてしまっています。
（先を見ずに書いてしまいました…笑）
そこで少し付加情報を加えてお届けしたいと思います！
まずは前回、どういった内容をやったかというと
console.log("1")こんな感じで文字列を表示したり、
console.log(1)
数字を表示したり
console.log(1 + 1)中に計算式を入れて、その結果を表示したりしましたね。
ところでさらっと出てきましたが、文字列と数字の違いはなんでしょうか？
記述的な違いとしては、クォーテーションで括っているかどうかですね。これには気づいているかと思います。
少し本題とは逸れますが、
プログラミング言語においてあらゆる値には全て型というものが存在します。
数字はNumber型であり、文字列はString型に属しています。
またJavaScriptは動的型付け言語(＝型情報が自動的に決まる)という特徴上、そこまで型を意識せずにプログラミングできるようになっています。
では文字列を数字、数字を文字列に変えることは出来るのかというと、この型情報を変換することで可能です。
【文字列→数字】
Number("1") // 文字列の1が数字の1に変換される【数字→文字列】
String(1) // 数字の1が文字列の1に変換される
では問題です。
下記のように記述すると結果はどうなるでしょうか？
console.log("1"+"1") // ①
console.log(Number("1") + Number("1")) // ②
console.log(1+1) // ③
console.log(String(1) + String(1)) // ④………………
………
結果はこうなります。
正解できた人はとても筋が良いです、自信を持ってください！
逆にできなかった人も残念がる必要は全くありません。
これは現段階で覚える必要がないことなので、「こんなことも出来るんだー」程度に流してもらって問題ないです。
では解説に入ります。
まずはもう一度コードを見てみます。
console.log("1"+"1") // ①
console.log(Number("1") + Number("1")) // ②
console.log(1+1) // ③
console.log(String(1) + String(1)) // ④
()が入れ子になって急に難しくなってきましたね。
こういう時は、一番内側の()から解読していきましょう！
②をみてみると、内側はNumber("1")という括りですね。
これは中に書かれた内容を数字に変換してくれるというものでした。
つまり、一番最初の()の時点では下記のように変換されます。
console.log(1 + Number("1")) // ②次に後半のNumber()も変換されます。
console.log(1 + 1) // ②こうなると、単純な数字同士の計算になってくるので答えは2ですね！
※ちなみに下記のように数字に変換できないものを入れた場合は、NAN (Not a Number) と表示されます（豆知識）
console.log(Number("あ")) // NAN続いて④ですが、同じように内側の()から見ていきます。
console.log(String(1) + String(1)) // ④String()は中に書かれた内容を文字列に変換してくれるというものでした。
つまり…
console.log("1" + String(1)) // ④こうなって
console.log("1" + "1") // ④こうなる訳ですね！
ここまで来ると文字列同士の結合になるので答えは"11"になります。
今回は以上になります。
いきなり型が出てきてよく分からないよ！という方もご安心ください。
前述しましたがJavaScriptの特性上、厳格に扱う機会は当分こないかと思います。（他の言語だと序盤に覚えることだと思いますが）
むしろ少し発展的な内容をここで扱ったので、次回からの説明は難易度が少し落ちると思います笑
[Point!] 本記事のまとめ
・console.log()は中身を出力する関数
・文字列の場合はシングルクォーテーションかダブルクォーテーションで括る
・型情報を変えれば文字列だったものを数字に、数字だったものを文字列に変換出来る（現時点で書き方を覚える必要はない）