height、widthはどこで定義されているのか

Question

https://github.com/voxtobox/vue-scroll-stop

こちらのライブラリのソースコードについて理解できない箇所が一点あります。
https://github.com/voxtobox/vue-scroll-stop/blob/master/src/vue-scroll-stop.js

// vue-scroll-stop.js

const onScrolling = function(e) {
    const {
        clientHeight: height, // ←ここと
        clientWidth: width, // ←ここ
        scrollHeight,
        scrollWidth,
        scrollTop,
        scrollLeft
    } = elem;
    let { deltaY = 0 , deltaX = 0 } = getDeltas(e);


    if (Math.abs(deltaY) > Math.abs(deltaX)) {
        if (
            (modifiers.v || !modifiers.h) &&
            ((deltaY >= 0 && (scrollHeight - scrollTop) === height) ||
            (deltaY <= 0 && scrollTop === 0))
        ) {
            e.preventDefault();
        }
    } else {
        if (
            (modifiers.h || !modifiers.v) &&
            ((deltaX >= 0 && (scrollWidth  - scrollLeft) === width) ||
            (deltaX <= 0 && scrollLeft === 0))
        ) {
            e.preventDefault();
        }
    }
};

それが上記関数なのですが、

const {
clientHeight: height,
clientWidth: width,
scrollHeight,
scrollWidth,
scrollTop,
scrollLeft
} = elem;

特にここのheight、widthというところがどうゆうことなのか分かりません。
この書き方はes6の書き方ですよね...。
elemがclientWidthとか、clientHeightとかを持つオブジェクトなので、上のような書き方でそれぞれの変数に、オブジェクトのそれぞれの階層の部分だけ入ってくれるわけですよね。

const {
clientHeight,
clientWidth,
scrollHeight,
scrollWidth,
scrollTop,
scrollLeft
} = elem;

これなら分かるのですが...。

heightとかwidthは変数で、初期値みたいな定義ができるのかなって最初思いました。
つまりclientHeightとかclientWidthとかのプロパティがelemに存在しない時はheightとかwidthという変数を代入するみたいな。
ただ、そうだとしてもそれらの変数の定義が見当たらないし、これはどうゆうことなのでしょうか。

Answer 1

特にここのheight、widthというところがどうゆうことなのか分かりません。

これも分割代入の書き方の1つで、elem.clientHeightがheightという変数に代入される、というだけです（MDN）。

Comments

[退会済みユーザー]

なるほどですありがとうございます、つまり自分の思った

clientHeightにheightを代入するというのの、むしろ逆なんですね
heightにclientHeightが代入されてるんですね

Answer 2

オブジェクトの分割代入では、オブジェクトのプロパティとは異なる名前の変数に代入することができます。
以下ドキュメントの例をそのまま引用します。

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true

オブジェクトのプロパティ名としては foo と bar ですが、分割代入するときにそれらを異なる名前の変数に代入しています。

他にもいろいろな文法があるので、以下ドキュメントを参考にされることをおすすめします。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

Comments

[退会済みユーザー]

理解しました、ありがとうございます
ただ慣れるまで違和感がすごいですねこれ笑
そんなことないか...

Answer 3

異なる名前を持つ変数への代入ですね。

const height = elem.clientHeight;
const width = elem.clientWidth;

と同じことです。

ちなみに

つまりclientHeightとかclientWidthとかのプロパティがelemに存在しない時はheightとかwidthという変数を代入するみたいな。

これはその直下でやっているこれ↓（既定値の設定）ですね。

let { deltaY = 0 , deltaX = 0 } = getDeltas(e);

Comments

[退会済みユーザー]

なるほどです、ありがとうございます
しかし右辺に対して代入されるってなんだかすごい不思議な感覚ですね笑