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が良いかもと思いました。

• undefined - JavaScript

参考になれば幸いです。

JavaScript逆引きレシピ 第2版

posted with ヨメレバ

山田 祥寛 翔泳社 2018年10月15日頃

楽天ブックス

Amazon

∞Tadashi Suyama∞