javascriptのundefinedの判定

javascriptのundefinedの判定

  • 2021-01-17  最終更新日:2021-01-18

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示されるのでその高さを取得します。 それから固定ヘッダーの高さも取得してその高さを計算します。

let adminBar_height = $('#wpadminbar').height();
let navBar_height = $('.navbar').height();
const sum = adminBar_height + navBar_height;
console.log(sum); // undefined;

この式でアドミンバーが必ずあるわけじゃないのでundefinedになることに気がつきませんでした。。


分岐

let adminBar_height = $('#wpadminbar').height();
let navBar_height = $('.navbar').height();
if(!adminBar_height){
	adminBar_height = 0;
}
const sum = adminBar_height + navBar_height;
console.log(sum); // 数値が入る

上記の場合は値がとれないとadminBar_heightにはundefinedが入ります。 !adminBar_heightでいける模様。。。 falseなら値が0が入ります。アドミンバーの取得はこれでログインしているときはその高さを取得してそれ以外は0になります。 これでうまく足し算が出来ました。

厳密等価・非等価演算子

ぱっと思いついたのはこの方法です。

var x;
if (x === undefined) {
  // ここの文は実行される
  console.log(x);
}
else {
  // ここの文は実行されない
  console.log(x);
}

上記の場合はxには値が入っていないのでここの文は実行されるを通ります。 var x;がなければReferenceError が発生します。(Uncaught ReferenceError: x is not defined) 等価演算子の場合は(x == undefined)、 xがnullであるかどうかもチェックします。

typeof 演算子

typeofの場合は変数が宣言されていなくてもエラーにはなりません。

if (typeof x === 'undefined') { // エラーなしで true と評価される
   // ここの文は実行される
}
if ('x' in window) {
  // x がグローバルに定義されている場合のみ、ここの文を実行
}

グローバルスコープで確認することも出来ます。

void 演算子

一般的に “void(0)” と書かれます(これは “void 0” と等価です) “void(0)”は、常に undefined を返してくれるとても便利な演算子です。

var x;
if (x === void 0) {
  // ここの文は実行される
}

// 直前まで y は宣言されていない
if (y === void 0) {
  // ReferenceError: y is not defined が発生
}

上記3パターンで確認することが出来ます。 (typeof x === ‘undefined’)なんとなくtypeofが良いかもと思いました。

参考になれば幸いです。


∞Tadashi Suyama∞

js jquery typeof void undefined
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js jquery typeof void undefined
フッターイメージ