Operasional Kondisi (ternary)

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'Conditional Operator' in that specification.
Draft  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Conditional Operator' in that specification.
Standard  
ECMAScript 5.1 (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard  
ECMAScript 1st Edition (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard Initial definition. Implemented in JavaScript 1.0.

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Conditional operator (c ? t : f)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0nodejs Full support Yes

Legend

Full support  
Full support

See also