名前付き関数からの戻り値

Question

私は基礎から物事を学び、関数の値をより良く得る方法を理解しようとしています。次の例を考えてみましょう。

/* Screen Orientation Check */ 
function screenOrientation() { 
    var screenOrientationCheck = ($(window).width() > $(window).height())? 90 : 0; 
    console.log(screenOrientationCheck) ; 
} 
screenOrientation(); 

上記は私に画面の向きを与えます。

/* Viewport Height Check */ 
function viewportHeight() { 
    var viewportHeightCheck = document.documentElement.clientHeight 
    console.log('viewportHeight = '+viewportHeightCheck); 
}; 
viewportHeight(); 

これは私にビューポートの高さを与えます。

しかし、私はそれらの機能の結果を処理したいと思っている場合、私はそれを行う方法がわかりません。

if (viewportHeight() > 600) { 
    console.log('Hooray!!'); 
}; 

たとえば、これは決して発生しません。

if (screenOrientation() === 90) { 
    console.log('Hooray!!'); 
}; 

同様に、これは決して発生しません。

screenOrientationCheckまたはviewportHeightCheckを記録したいのであれば、変数は関数の範囲内にしか存在しないため、undefinedです。それほど私は理解している。以下のような機能にreturnを追加することも、このトリックを行いません。

/* Viewport Height Check */ 
function viewportHeight() { 
    var viewportHeightCheck = document.documentElement.clientHeight 
    console.log('viewportHeight = '+viewportHeightCheck); 
    return viewportHeightCheck; 
}; 

これは基本的なものです。ですから、貴重な時間をとって申し訳ありません。

私は、関数で作成された値をどのように扱うことができ、実行時に一度だけ実行される匿名関数を持つのではなく、コード内で何度も呼び出すことができます。

可能であれば細かい回答をする人がいれば、最後にHooray!!というログを記録する例があります。

Answer 1

返品が必要です。ここにあなたの特定のケースで働いJsfiddle

function getViewportHeight() { 
    var viewportHeightCheck = document.documentElement.clientHeight 
    return viewportHeightCheck; 
}; 

if (getViewportHeight() > 600) { 
    console.log('Hooray!!'); 
}; 

Answer 2

だ、これらの関数は値を返すべきであるので、それらが呼び出されるたびに、ページの寸法に応じた値を取得します。

/* Screen Orientation Check */ 
 
function screenOrientation() { 
 
    return ($(window).width() > $(window).height())? 90 : 0; 
 
} 
 

 

 
/* Viewport Height Check */ 
 
function viewportHeight() { 
 
    return document.documentElement.clientHeight 
 
}; 
 

 

 
$('#action').on('click', function() { 
 
    $('#info').html('Screen Orientation: ' + screenOrientation() + '<br>' + 
 
        'Viewport Height: ' + viewportHeight()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="info"></div> 
 

 
<p> 
 
    <button id="action">Get Values</button> 
 
</p>