From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../operators/conditional_operator/index.html | 167 +++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 files/id/web/javascript/reference/operators/conditional_operator/index.html (limited to 'files/id/web/javascript/reference/operators/conditional_operator') 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 +--- +
{{jsSidebar("Operators")}}
+ +

Operasianal kondisional (ternary) adalah satu-satunya operator yang hanya membutuhkan tiga operator. Operator ini sering digunakan sebagai jalan pintas untuk `if` statement.

+ +

Syntax

+ +
condition ? expr1 : expr2
+ +

Parameters

+ +
+
condition (atau conditions)
+
Sebuah ekspresi akan menguji apakah menghasilkan true atau false.
+
+ +
+
expr1, expr2
+
Ekspresi yang akan dilakukan setelah kondisi terpenuhi.
+
+ +

Description

+ +

Jika condition menghasilkan true, maka operator ini akan menghasilkan/mengembalikan nilai dari expr1; dan jika sebaliknya, ini akan menghasilkan/mengembalikan nilai dari expr2. Sebagai contoh, untuk menampilkan pesan yang berbeda berdasarkan nilai dari variabel isMember, anda bisa menggunakan contoh kode berikut:

+ +
var isMember = true;
+'The fee is ' + (isMember ? '$2.00' : '$10.00'); //$2.00
+
+ +

Anda juga dapat mendefinisikan sebuah variabel secara langsung:

+ +
var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';
+ +

Anda juga bisa menggunakan operator ternary secara jamak (catatan: conditional operator adalah associative yang lebih baik):

+ +
var firstCheck = false, secondCheck = false, access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
+console.log(access); // logs "Access granted"
+ +

Anda juga dapat menggunakan pengondisian jamak seperti pengondisian jamak pada statement IF pada umumnya:

+ +
var condition1 = true,
+    condition2 = false,
+    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logs "true false"
+
+ +

 

+ +

Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.

+ +

You can also use ternary evaluations in free space in order to do different operations:

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign('continue.html') : stop = true;
+
+ +

You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:

+ +
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!')
+);
+
+ +

You can also do more than one operation during the assignation of a value. In this case, the last comma-separated value of the parenthesis will be the value to be assigned.

+ +
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"
+ +

Returning Ternary Statements

+ +

The ternary operator lends itself well to function returns that would otherwise require an if/else statement.

+ +
var func1 = function( .. ) {
+  if (condition1) { return value1 }
+  else { return value2 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? value1 : value2
+}
+ +

A good way to spot that the ternary will be a suitable replacement for an if/else statement is when the return keyword is used multiple times and is the only expression inside of the if block.

+ +

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 if/else statements. This provides a syntactically light way of expressing the same logic:

+ +
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
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
+ +

Browser compatibility

+ + + +

{{Compat("javascript.operators.conditional")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf