diff options
Diffstat (limited to 'files/id/web/javascript/reference/operators/conditional_operator')
| -rw-r--r-- | files/id/web/javascript/reference/operators/conditional_operator/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/id/web/javascript/reference/operators/conditional_operator/index.html b/files/id/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..1a64158acb --- /dev/null +++ b/files/id/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,167 @@ +--- +title: Operasional Kondisi (ternary) +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Operasianal kondisional (ternary)</strong> adalah satu-satunya operator yang hanya membutuhkan tiga operator. Operator ini sering digunakan sebagai jalan pintas untuk `if` statement.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>condition (atau conditions)</code></dt> + <dd>Sebuah ekspresi akan menguji apakah menghasilkan <code>true</code> atau <code>false</code>.</dd> +</dl> + +<dl> + <dt><code>expr1</code>, <code>expr2</code></dt> + <dd>Ekspresi yang akan dilakukan setelah kondisi terpenuhi.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Jika <code>condition</code> menghasilkan <code>true</code>, maka operator ini akan menghasilkan/mengembalikan nilai dari <code>expr1</code>; dan jika sebaliknya, ini akan menghasilkan/mengembalikan nilai dari <code>expr2</code>. Sebagai contoh, untuk menampilkan pesan yang berbeda berdasarkan nilai dari variabel <code>isMember</code>, anda bisa menggunakan contoh kode berikut:</p> + +<pre class="brush: js">var isMember = true; +'The fee is ' + (isMember ? '$2.00' : '$10.00'); //$2.00 +</pre> + +<p>Anda juga dapat mendefinisikan sebuah variabel secara langsung:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';</pre> + +<p>Anda juga bisa menggunakan operator ternary secara jamak (catatan: conditional operator adalah associative yang lebih baik):</p> + +<pre class="syntaxbox">var firstCheck = false, secondCheck = false, access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted'; +console.log(access); // logs "Access granted"</pre> + +<p>Anda juga dapat menggunakan pengondisian jamak seperti pengondisian jamak pada statement IF pada umumnya:</p> + +<pre class="syntaxbox">var condition1 = true, + condition2 = false, + access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false"); + +console.log(access); // logs "true false" +</pre> + +<p> </p> + +<p>Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.</p> + +<p>You can also use ternary evaluations in free space in order to do different operations:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign('continue.html') : stop = true; +</pre> + +<p>You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + alert('OK, you can go.'), + location.assign('continue.html') +) : ( + stop = true, + alert('Sorry, you are much too young!') +); +</pre> + +<p>You can also do more than one operation during the assignation of a value. In this case, <strong><em>the last comma-separated value of the parenthesis</em> will be the value to be assigned</strong>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + alert('OK, you can go.'), + // alert returns "undefined", but it will be ignored because + // isn't the last comma-separated value of the parenthesis + 'continue.html' // the value to be assigned if age > 18 +) : ( + alert('You are much too young!'), + alert('Sorry :-('), + // etc. etc. + 'stop.html' // the value to be assigned if !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + +<h3 id="Returning_Ternary_Statements">Returning Ternary Statements</h3> + +<p>The ternary operator lends itself well to function returns that would otherwise require an <code>if/else</code> statement.</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else { return value2 } +} + +var func2 = function( .. ) { + return condition1 ? value1 : value2 +}</pre> + +<p>A good way to spot that the ternary will be a suitable replacement for an <code>if/else</code> statement is when the <code>return</code> keyword is used multiple times and is the only expression inside of the if block.</p> + +<p>By breaking the ternary onto multiple lines and making use of extra whitespace, the ternary operator can be used to very cleanly replace a lengthy series of <code>if/else</code> statements. This provides a syntactically light way of expressing the same logic:</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return value1 } + else if (condition2) { return value2 } + else if (condition3) { return value3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? value1 + : condition2 ? value2 + : condition3 ? value3 + : value4 +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> |