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

サイト内検索

最近の投稿

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

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

24 Jan 2021

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

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

17 Jan 2021

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

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

09 Jan 2021

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 今年の初詣は雪でしたね、久しぶりの雪が積もってコロナの影響もあり人が少なめ 本年は武内神社に大晦日深夜の初詣にいって...

05 Jan 2021

アイキャッチ
年末年始のお知らせ

去年に引き続き更新できず、、、、今年ももう終わりですね。 ブログ更新のjekyllやめようと考えてますが、移行作業も大変ですし、なんだかんだでそのままになりそう 当事務所は12/28〜1/5ま...

27 Dec 2020

著者

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

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

タグクラウド

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