물음표(?) 연산자 최대한 빨리

코드에서 조건문을 사용한 적이 있다면 if 명령문을 보았고 if 명령문을 본 적이 있다면 여러 계층 깊이로 중첩된 것을 보았을 것입니다. 개인 프로젝트에서 이는 단순히 성가시게 하고 앞으로 문제를 일으킬 수 있지만 프로덕션 코드에서는 실제로 문제가 될 수 있습니다.

삼항 연산자?:는 하나의 물음표 연산자이며 조건문을 더 깔끔하고 읽기 쉽게 만드는 일부 프로그래밍 언어의 기능입니다. 기본 구문은 다음과 같습니다.

condition ? if true : else;

사용시 이것은 다음과 같이 보일 것입니다:

const foo = true ? 1 : 0;

이 스니펫에서 foo는 조건이 true이고 true가 (분명히) 진실 값이기 때문에 1입니다.

참/거짓 값이 무엇인지 확실하지 않은 경우 다음과 같이 생각하십시오.

0, false , undefined , NaN , 빈 문자열, 배열, 개체 등은 거짓입니다. 다른 모든 값은 사실입니다.

표현식 결과가 거짓 값이면 명령문 자체가 거짓입니다.

0 == 1

이것은 false 를 반환하기 때문에 잘못된 명령문입니다.

이 기사에서는 물음표 연산자를 사용하는 방법과 ES2020에서 사용하는 방법을 알려 드리겠습니다.

사용법

삼항 연산자( ? )

JavaScript에서 ?의 첫 번째 구현은 가장 간단한 것으로, 기사 시작 부분에서 보여준 삼항 연산자( ?: )입니다.

conditon ? true : false;

여기 조건이 참이면 ? 다음의 첫 번째 값이 할당되거나 호출됩니다.

Nullish 통합/할당( ?? )

다음 구현은 Nullish Coalescing에서 사용되는 ?? 또는 Nullish 연산자입니다.

Nullish 병합은 다음과 같습니다.

const value = true ?? false;

value 는 true 가 됩니다. 이제 이것과 논리 Or 연산자( || )의 차이점이 무엇인지 궁금할 것입니다. || 연산자는 잘 작동했지만 많은 사람들이 때때로 겪는 문제는 빈 복합 유형( {} , [] , "" ) 및 0과 같은 값을 거짓으로 간주하므로 논리 연산자가 필요하다는 것입니다. null와 undefined만을 거짓으로 간주하는 것이 자연적으로 일어났다.

논리적 무효 할당( ??= )

x ??= y;

세 번째 물음표 연산자는 논리적 Nullish 할당 연산자??=라고 합니다. 이 연산자의 요지는 y가 x 또는 x인 경우에만 값null에 값undefined을 할당하는 것입니다.

let val = null;
val ??= 10;

// val is now 10, because it was null before


let num = 0;
num ??= 20;

// num stays as 0, because 0 is neither undefined nor null

let egg;
egg ??= "scrambled";

// egg is now "scrambled" becuase uninitialized variables are undefined

선택적 연결( ?. )

마지막 및 최신 물음표 연산자는 매우 유용한 기능입니다. 객체가 존재하는 경우에만 객체 값에 대한 값에 액세스할 수 있습니다. if 문과 try..catch 문을 제거합니다. null 또는 undefined 값이 반환되는 경우 오류가 발생하지 않으며 값은 null 또는 undefined 입니다.

const John = {
    firstName: "John",
    lastName: "Doe",
    age: 21,
    parents: ["Jack", "Jane"]
}

console.log(John.lastName);

// => "John"

console.log(John.bestFriend?.age);

// => undefined

console.log(John.bestFriend.age);

// => Error: Cannot read properties of undefined

다른 언어로 사용

삼항 연산은 원래 수학적 개념이기 때문에 물음표 연산자는 많은 프로그래밍 언어에 존재합니다. 다음은 몇 가지 예입니다.


언어
삼항 또는 이와 유사한 표현


C++, 자바, 자바스크립트, C#, C, 배시, 루비, 스위프트, PHPcondition ? if true : else;
파이썬value if conditon else false
녹if condition {true} else {false}
아르 자형if (condition) true else false
가다
암시 없음

하스켈if condition then true else false

결론

이제 물음표 연산자에 대해 새로 알게 된 지식을 사용하여 친구, 동료, 팀원 또는 급우에게 깊은 인상을 줄 수 있지만 과용하지 마십시오. 물음표 연산자는 오용되기 쉽고 과도하게 사용하면 코드를 읽을 수 없게 만들 수 있으므로 가능하면 강제로 삽입하지 마십시오.

출처

MDN Docs: Conditional (ternary) operator
MDN Docs: Nullish coalescing operator (??)
MDN Docs: Logical nullish assignment (??=)
MDN Docs: Optional chaining (?.)
Wikipedia: ?: