함수가있는 JavaScript 삼항 연산자 예제

jQuery 1.7.1을 사용하고 있습니다.

간단한 if / else 문을 대체하기 위해 JavaScript 삼항 연산자를 사용하기 시작했습니다. 나는 여러 곳에서 성공적으로 수행했습니다. 다른 일을 성공적으로 만들었을 때 깜짝 놀랐습니다. 확실히 안 되겠다고 생각했지만 어쨌든 시도했습니다.

원래 진술은 다음과 같습니다.

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    if (IsChecked == true){
        removeItem($this);
    } else {
        addItem($this);
    }
}

삼항 연산자를 사용하는 동일한 함수는 다음과 같습니다.

function updateItem() {
    $this = $(this);
    var IsChecked = $this.hasClass("IsChecked");
    (IsChecked == true) ? removeItem($this) : addItem($this);
}

사용되는 모든 예제가 다음과 같은 변수를 설정했기 때문에 놀랐습니다.

x = (1 < 2) ? true : false;

내 질문은 이것이 "정상적인"사용인지 여부이며 대부분의 JavaScript 버전에서 작동합니까? 어디에서 실패할까요? 다른 덜 분명한 용도가 있습니까?

업데이트- "실제 세계"조언에 감사드립니다 !!!

나는 이것을 내 기능으로 사용하고 있습니다.

function updateItem() {
    $this = $(this);
    $this.hasClass("IsChecked") ? removeItem($this) : addItem($this);
}

Heh, 귀하의 질문에 삼항 구문의 매우 흥미로운 사용이 있습니다. 마지막이 제일 좋아요 ...

x = (1 < 2) ? true : false;

여기에서 삼항을 사용하는 것은 완전히 불필요합니다.

x = (1 < 2);

마찬가지로 삼항 문의 조건 요소는 항상 부울 값으로 평가되므로 다음과 같이 표현할 수 있습니다.

(IsChecked == true) ? removeItem($this) : addItem($this);

간단히 :

(IsChecked) ? removeItem($this) : addItem($this);

사실, 나는 또한 당신에게 남겨진 IsChecked임시 도 제거 할 것입니다.

($this.hasClass("IsChecked")) ? removeItem($this) : addItem($this);

이것이 허용 가능한 구문인지에 관해서는 확실합니다! 가독성에 영향을주지 않고 4 줄의 코드를 하나로 줄일 수있는 좋은 방법입니다. 내가 당신에게 줄 유일한 조언은 같은 줄에 여러 삼항 문을 중첩하지 않는 것입니다 (그렇게하면 광기입니다!)

삼항 스타일은 일반적으로 공간을 절약하는 데 사용됩니다. 의미 적으로는 동일합니다. 나는 가독성을 희생하고 싶지 않기 때문에 전체 if / then / else 구문을 선호합니다. 저는 구식이고 중괄호를 선호합니다.

전체 if / then / else 형식은 거의 모든 것에 사용됩니다. 각 분기에서 더 큰 코드 블록에 들어가거나 다중 분기 if / else 트리 또는 긴 문자열에 여러 else / if가있는 경우 특히 인기가 있습니다.

삼항 연산자는 간단한 조건을 기반으로 변수에 값을 할당하거나 매우 짧은 결과로 여러 결정을 내릴 때 일반적입니다. 인용 한 예는 실제로 의미가 없습니다. 표현식이 추가 논리없이 두 값 중 하나로 평가되기 때문입니다.

좋은 생각:

this > that ? alert(this) : alert(that);  //nice and short, little loss of meaning

if(expression)  //longer blocks but organized and can be grasped by humans
{
    //35 lines of code here
}
else if (something_else)
{
    //40 more lines here
}
else if (another_one)  /etc, etc
{
    ...

덜 좋다:

this > that ? testFucntion() ? thirdFunction() ? imlost() : whathappuh() : lostinsyntax() : thisisprobablybrokennow() ? //I'm lost in my own (awful) example by now.
//Not complete... or for average humans to read.

if(this != that)  //Ternary would be done by now
{
    x = this;
}
else
}
    x = this + 2;
}

정말 기본 엄지 손가락의 규칙 - 당신은뿐만 아니라 또는 더 나은 한 줄에 모든 것을 이해할 수있다? 삼항은 괜찮습니다. 그렇지 않으면 확장하십시오.

게시 한 예제에 대해 특별히 까다로운 것은 없습니다.

삼항 연산자에서 첫 번째 인수 (조건부)가 평가되고 결과가 true인 경우 두 번째 인수가 평가되고 반환되고, 그렇지 않으면 세 번째 인수가 평가되고 반환됩니다. 각 인수는 함수 호출을 포함하여 유효한 코드 블록이 될 수 있습니다.

다음과 같이 생각하십시오.

var x = (1 < 2) ? true : false;

다음과 같이 쓸 수도 있습니다.

var x = (1 < 2) ? getTrueValue() : getFalseValue();

이것은 완벽하게 유효하며 이러한 함수는 값 반환과 관련이 있는지 여부에 관계없이 임의의 코드를 포함 할 수 있습니다. 또한 함수 결과를 아무 것도 할당 할 필요가없는 것처럼 삼항 연산의 결과를 아무 것도 할당 할 필요가 없습니다.

(1 < 2) ? getTrueValue() : getFalseValue();

이제 임의의 함수로 간단히 교체하면 다음과 같은 예제가 남습니다.

(1 < 2) ? removeItem($this) : addItem($this);

이제 마지막 예제에는 다음과 같이 작성할 수 있으므로 삼항이 전혀 필요하지 않습니다.

x = (1 < 2);  // x will be set to "true"

삼항 연산자를 중첩하려면 다음과 같이하고 싶을 것입니다.

   var audience = (countrycode == 'eu') ? 'audienceEU' :
                  (countrycode == 'jp') ? 'audienceJP' :
                  (countrycode == 'cn') ? 'audienceCN' :
                  'audienceUS';

다음보다 쓰기 / 읽기가 훨씬 더 효율적입니다.

var audience = 'audienceUS';
if countrycode == 'eu' {
   audience = 'audienceEU';
} else if countrycode == 'jp' {
   audience = 'audienceJP';
} else if countrycode == 'cn' {
   audience = 'audienceCN';
}

모든 좋은 프로그래밍과 마찬가지로 공백은 프로젝트를 마친 후 코드를 읽어야하는 사람들에게 모든 것을 멋지게 만듭니다.

나는 또한 나에게서 무언가를 추가하고 싶습니다.

삼항 연산자를 사용하여 함수를 호출하는 다른 가능한 구문은 다음과 같습니다.

(condition ? fn1 : fn2)();

두 함수에 동일한 매개 변수 목록을 전달해야하므로 한 번만 작성하면됩니다.

(condition ? fn1 : fn2)(arg1, arg2, arg3, arg4, arg5);

멤버 함수 이름에도 삼항 연산자를 사용할 수 있는데, 개인적으로 공간을 절약하기 위해 매우 좋아합니다.

$('.some-element')[showThisElement ? 'addClass' : 'removeClass']('visible');

또는

$('.some-element')[(showThisElement ? 'add' : 'remove') + 'Class']('visible');

다른 예시:

var addToEnd = true; //or false
var list = [1,2,3,4];
list[addToEnd ? 'push' : 'unshift'](5);

나는 이미 질문에 대한 답변을 알고 있습니다.

그러나 여기에 한 가지 요점을 추가하겠습니다. 이것은 참 또는 거짓의 경우에만 해당되는 것이 아닙니다. 아래 참조 :

var val="Do";

Var c= (val == "Do" || val == "Done")
          ? 7
          : 0

여기서 val이 Do 또는 Done이면 c는 7이되고 그렇지 않으면 0이됩니다. 이 경우 c는 7이됩니다.

이것은 실제로이 연산자의 또 다른 관점입니다.