undefinedとNaNに遭遇
課題を進めていると、undefinedとNaNに遭遇。。。
Javascript学習初心者の私には、ここから疑問がはじまる(笑)
- そもそもdefinedとNaNってナニ??
- 対処法がわからない。
そこで、これらの意味を調べてみることに、、、
undefinedとNaNとは?
- undefined(未定義)
- 定義しているに対して、値が見つからない時にでる特殊な値
- NaN(Not a numberの略)
- 本来は数値であるべき値が、数値として解釈できないときにでる特殊な値
どんな時にundefindとNaNに出会う?
調べてみると、以下のような事例が挙げられました。
定義した関数に対して、値が代入されてない & 数値として解釈されてない。
本来、上記の画像のような表記になるはずが
900円が1点
と小計
の部分が値に代入されてなく、、、
結果として以下のように表示された。
undefinedがNaN円
undefinedがNaN円
小計
NaN
商品を追加するごとに上記のような表示が繰り返し行われ、頭抱えた(笑)
解決策
そこで、スクリプトの問題点がどこか見直すことに!でも、どうやって探す?
debugger
の登場!!
※debuggerとは、スクリプト内のエラーを見つけ、修正するコードのこと。
[debuggerの使い方]
①debugger
を使用しコードの実行を一時停止させ、コードの状態の詳細を把握する。
②ブラウザのコンソールで、consol.log(product)
など入力。値の中身を確認する。
find関数
debuggerを使いproductの値を設定してなかったことが判明。
find関数
(指定された文字列が、左から何番目にあるかを探すことができ、その番号を返す関数)を使用。
まずは、paresInt
を使って、変数に入れたものを数値に変換。(重要) ー①
products変数に格納されているデータの中から一つずつ取得し、商品を見つけ出す。ー②
"見つけ出した商品"(element) と "とってきた値"(id)を比較演算子で、選択した個数(value)と比較する。
同じ値だったら、それを値として返す。
これで合っているのか不安なところはある。。。
一旦はこれで解決しましたが、もっといい方法があれば教えていただけると助かります!