4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

undefinedとNaNとfind関数

Last updated at Posted at 2024-05-20

undefinedとNaNに遭遇

課題を進めていると、undefinedとNaNに遭遇。。。
Javascript学習初心者の私には、ここから疑問がはじまる(笑)

  • そもそもdefinedとNaNってナニ??
  • 対処法がわからない。

そこで、これらの意味を調べてみることに、、、

undefinedとNaNとは?

undefined(未定義)
定義しているに対して、値が見つからない時にでる特殊な値
NaN(Not a numberの略)
本来は数値であるべき値が、数値として解釈できないときにでる特殊な値

どんな時にundefindとNaNに出会う?

調べてみると、以下のような事例が挙げられました。

  • 変数が定義されてはいるが、値が代入されていない場合。

  • 存在しない変数を参照した場合。

  • 数値として解釈できない文字列を数値として使用した場合。などなど

私の場合、、、
スクリーンショット 2024-05-14 9.36.39.png

定義した関数に対して、値が代入されてない & 数値として解釈されてない。
本来、上記の画像のような表記になるはずが
900円が1点小計の部分が値に代入されてなく、、、
結果として以下のように表示された。
undefinedがNaN円
undefinedがNaN円
小計
NaN

商品を追加するごとに上記のような表示が繰り返し行われ、頭抱えた(笑)

解決策

そこで、スクリプトの問題点がどこか見直すことに!でも、どうやって探す?

debugger の登場!!

※debuggerとは、スクリプト内のエラーを見つけ、修正するコードのこと。
[debuggerの使い方]

debuggerを使用しコードの実行を一時停止させ、コードの状態の詳細を把握する。
②ブラウザのコンソールで、consol.log(product)など入力。値の中身を確認する。

find関数

debuggerを使いproductの値を設定してなかったことが判明。
find関数(指定された文字列が、左から何番目にあるかを探すことができ、その番号を返す関数)を使用。

まずは、paresIntを使って、変数に入れたものを数値に変換。(重要) ー①
products変数に格納されているデータの中から一つずつ取得し、商品を見つけ出す。ー②
"見つけ出した商品"(element) と "とってきた値"(id)を比較演算子で、選択した個数(value)と比較する。
同じ値だったら、それを値として返す。

スクリーンショット 2024-05-15 7.35.51.png

これで合っているのか不安なところはある。。。

一旦はこれで解決しましたが、もっといい方法があれば教えていただけると助かります!

4
1
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?