Ternaries가 JavaScript 조건을 개선하는 방법

자바스크립트의 If-else 문장은 이른바 흐름 제어에 매우 유용하다. 다시 말하면 한 가지 또는 다른 조건에 따라 응용 프로그램에서 발생하는 일을 만들 수 있다.
Ifelse 문장은 지금 벌어지고 있는 일을 쉽게 읽고 이해할 수 있다
예를 들어 우리가 전자상거래 응용 프로그램을 만들고 있다고 가정하면 사용자는 그 중에서 쇼핑카트에 물품을 추가할 수 있다.그것에서, 우리는 우리의 사용자를 검증하고 있다.
우선, 우리는 인증을 받은 사용자가 있는지 확인할 수 있으며, 만약 있다면, 그들이 항목을 카트에 추가할 수 있도록 허락할 수 있다.
그렇지 않으면, 만약 그들이 신분 검증을 거치지 않았다면, 우리는 그들로 하여금 완전히 다른 일을 하게 할 것이다. 예를 들어 사용자에게 로그인하라고 말할 것이다.

const isAuthenticated = false;
let cartItemCount = 0;

if (isAuthenticated) {
  // add item to cart
  cartItemCount = 1;
} else {
  // tell user to login
  console.log("Please log in!");
}

삼원조 사용

사용자가 인증을 받은 경우 cartItemCount을 1로 설정합니다. 그렇지 않으면 0을 유지합니다.

const isAuthenticated = false;
let cartItemCount = 0;

if (isAuthenticated) {
  // add item to cart
  cartItemCount = 1;
} else {
  // tell user to login
  // console.log("Please log in!");
  cartItemCount = 0;
}

중복에 주의하십시오. 우리가 그것을 변수로 성명한 후, 우리는 cartItemCount을 두 번 이상 중복해야 합니다.
만약 우리가 조건적으로 여러 변수를 설정해야 한다면, 우리가 얼마나 중복될지 상상해 보세요.
프로그래밍에서 가장 큰 목표는 불필요한 중복을 피하는 것이다.만약 당신이 같은 조작을 여러 번 반복해야 한다는 것을 발견한다면, 한 번 또 한 번, 대체 방법을 찾아보세요.통상적으로 더 좋은 패턴을 따를 수 있다.
다행히도 변수의 값을 조건적으로 설정하고 자신의 조작을 반복하지 않고 더 적은 코드를 사용할 수 있는 더 좋은 방법이 있다.우리는 삼원산자라고 불리는 산자를 사용하여 이 두 가지 목적을 실현한다.

물음표(?)

우리는 if 부분과 괄호 ()을 우리가 적용하고자 하는 조건의 값으로 바꾸어 코드를 간소화하고 isAuthenticated을 추가할 수 있다

const isAuthenticated = false;
// let cartItemCount = 0;
// if (isAuthenticated) {
//   // add item to cart
//   cartItemCount = 1;
// } else {
//   // tell user to login
//   // alert("Please log in!");
//   cartItemCount = 0;
// }

isAuthenticated ?
// if «condition»

이전 코드를 돌이켜보면 ?이true였을 때 isAuthenticated이 1로 업데이트되었습니다.
이것은 삼원수와 변수의 특수한 관계이므로 우리는 즉시 변수를 분배할 필요가 없다.cartItemCount이 사실이라면 isAuthenticated을 설정하면 1이 됩니다.

isAuthenticated ? cartItemCount = 1 // unnecessary assignment

대신 조건의 cartItemCount이라는 변수에 대한 참조를 삭제하고 다음으로 옮길 수 있습니다.

const cartItemCount = isAuthenticated ? 1
// «condition» ? «then»

// if isAuthenticated is true, 1 is put in cartItemCount

삼원조는 표현식으로if문장과 다르다

이것은 3원이 하나의 표현식이기 때문이지, 한 문장이 아니기 때문이다.정의에 따라 JavaScript의 모든 표현식은 하나의 값으로 해석됩니다.
이것은 무슨 뜻입니까?
만약 우리의 3원이 실행되고 then이true라면, isAuthenticated 부분을 실행하고 값 1을 되돌려줍니다.이것은 값 1로 해석되기 때문에 then 변수에 즉시 넣을 수 있습니다.
이것은 매우 큰 장점이다. 삼원조는 우리가 변수를 설명할 때 조건이 설정된 변수를 한 번만 인용할 수 있도록 허락한다.

콜론(:)

하지만 cartItemCount이false라면 else의 조건은 어떻습니까?
조건의 이 부분은 다른 특수 기호, 사칭 뒤에 놓인다.

const cartItemCount = isAuthenticated ? 1 :
// «condition» ? «then» : «else»

만약 우리의 3원 조건이false로 분해된다면, 사칭 후에 우리는 점프할 것이다.
앞의if문장을 보면else부분에서 isAuthenticated을 0으로 설정합니다.
우리는 이제 삼원수가 해석한 값을 되돌려준다는 것을 알고 있기 때문에, 우리는 0을 else 조건에 넣을 수 있으며, 또한 즉시 cartItemCount 변수에 넣을 수 있다.

const cartItemCount = isAuthenticated ? 1 : 0;

마지막으로 콘솔에서 cart Item Count를 기록해서 우리가 무엇을 얻었는지 봅시다.그러나 그 전에 cartItemCount이true로 설정되면 isAuthenticated의 값은 얼마라고 생각합니까?

const isAuthenticated = true;
const cartItemCount = isAuthenticated ? 1 : 0;

console.log(cartItemCount); // 1

우리는 1을 얻었다.cartItemCount은 우리의 조건에서true로 해석되기 때문에then조건이 실행되고 1은식으로 되돌아와 isAuthenticated에 분배됩니다.cartItemCount을 false로 업데이트하는 경우:

const isAuthenticated = false;
const cartItemCount = isAuthenticated ? 1 : 0;

console.log(cartItemCount); // 0

우리는 0을 얻었다.isAuthenticated은 우리의 조건에서false이고else조건이 실행되며 0은 isAuthenticated을 넣는다.

ternaries에서 표현식을 사용하고 동작을 실행하지 않습니다

마지막으로, 만약 우리가 단지 하나의 값을 되돌려 주는 것이 아니라면, 우리는 예전처럼 몇 가지 일을 해서 사용자에게 로그인하라고 일깨워 주고 싶습니까?

const isAuthenticated = false;
const cartItemCount = isAuthenticated ? 1 : console.log("Please log in");

console.log(cartItemCount);
// Please log in
// undefined

우리는 경보를 보았지만, cartItemCount에 무슨 일이 일어났습니까?그것의 현재 값은 0이 아니라 cartItemCount입니다. 이것은 잘못된 것입니다.
함수(undefined 포함)가 반환 값이 없으면 기본적으로 console.log을 반환하기 때문입니다.
삼원조가 어떤 상황에서 매우 유용하다는 것을 알아야 하지만, 그것들은 당신이 작성해야 할 모든 조건에 계속 사용해서는 안 된다
삼원조는 우리가 반복적이지 않고 조건적으로 변수를 분배하는 것을 돕지만, 여러 동작을 실행하거나 값을 되돌려 주지 않으려면 예전처럼 정상적인if문장을 사용하십시오.

더욱 깊이 있는 예

또 다른 예를 살펴보자. 우리는 사용자의 나이에 따라 그들에게 안부를 묻고 싶다.
만약 우리가 입력이나 표에서 그들의 나이를 얻게 된다면, 우리는 결과를 undefined이라는 변수에 넣을 것이다.우리의 첫 번째 사용자는 20:

const age = 20;

그리고 사용자의 나이에 따라 사용자 정의 인사말을 만들고 싶습니다.
이를 위해, 우리는if문장을 사용할 것이다.우리는 조건부로 인사말 텍스트를 age이라는 변수에 저장할 것이다.
지금 우리는 단지 하나의 조건이 있다.만약 나이가 10살 이하라면, 우리는 "안녕하세요"라고 말할 것이다.그렇지 않으면, 만약 그들이 어떤 다른 나이라면, 그렇지 않으면, 우리는 "이것은 재미있는 나이"라고 말할 것이다

let greeting;

if (age < 10) {
  greeting = "Hey there";
} else {
  greeting = "That's an interesting age!";
}

지금 1분을 써서 이곳의if문구를 사용하여 3원으로 변환합니다.
우리의 3원은 세 부분으로 되어 있다.우선, 우리는 조건을 추가할 것입니다. 이것은 부울 값,true 또는false로 해석될 것입니다.우리의 예에서, 우리는 나이가 10살 이하인지 아닌지를 보아야 한다.만약 이것이 사실이라면, 우리는 인사말의 가치가'헤이, 안녕'이다.만약 이 조건이false로 해석된다면, 값은'이것은 재미있는 나이'라고 해야 한다.우리는 조건부로 변수 인사말을 업데이트하기를 희망한다.

const age = 20;
// let greeting;

// if (age < 10) {
// greeting = "Hey there";
// } else {
// greeting = "That's an interesting age!";
// }

const greeting = age < 10 ? "Hey there" : "That's an interesting age!";
console.log(greeting); // That's an interesting age!

여기에서 볼 수 있는 장점은 우리가 이전에 본 예시와 같이 greeting을 사용하여 const 변수를 설명할 수 있다는 것이다. greeting이 아니라.let과 const의 조작 방식을 고려하면 우리는 이것이 우리 코드의 신뢰성과 관련된 커다란 승리이며, 왜 우리가 조건에 변수를 분배할 때 기본 조건을 삼원조로 다시 써야 하는지를 볼 수 있다.
우리는 단지 let으로 볼 때, 그것은 재분배될 수 없기 때문에, 그것의 값은 미래에 변하지 않을 것이라는 것을 안다. 왜냐하면 그것은 greeting으로 성명했기 때문이다.이것은 몇 줄의 코드를 삭제할 수 있는 기초 위에서

여러 개의 삼원조 사용

우리가 알고 있는 바와 같이if문장에 대해 우리는 여러 조건에서else-if와 연결할 수 있다.
예를 들어 사용자의 나이가 10살 이상이면 "What's up?"라고 물어볼 수 있습니다.만약 사용자의 나이가 18세를 넘으면, 우리는 "인사"를 말할 수 있다
이 두 조건과 else ifs를 원본 if 문장에 추가할 수 있습니다.

let greeting;
if (age < 10) {
  greeting = "Hey there";
} else if (age > 18) {
  greeting = "Greetings";
} else if (age > 10) {
  greeting = "What's up?";
} else {
  greeting = "That's an interesting age!";
}

만약 우리가 우리의 3원수를 위해 같은 조건을 쓰고 싶다면?사실상, 우리는 이것이 여러 개의 삼원조를 한데 연결시키는 것을 통해 할 수 있다.
이것은 좀 까다로운 설정이기 때문에 우리 함께 이 길을 걷자.
링크할 다른 3원에 대해, 그것은 통상적으로 이전 3원의else 조건과 같다.예를 들어 만약에 한 사용자의 나이가 현재 12살이라면else표현식은 우리의 첫 번째 3원을 실행하고'이것은 재미있는 나이'로 돌아가는 것이 아니라, 우리는 우리의 다음 조건을 포함하고 싶어서 우리의 다음 3원을 실행한다.

const age = 12;

const greeting = age < 10 ? "Hey there" : «condition»
// if the age is not 10, hit the «else» part, where the next condition will be put

나이(12)가 10살 이하인가요?
만약 그렇다면, 우리는 텍스트 "Hey there"를 되돌려줍니다. 그렇지 않으면 다음 3원의else 조건이 실행됩니다.
그리고 다음 조건을 제공합니다. 나이(12)가 18보다 많습니까?

const greeting = age < 10 ? "Hey there" : age > 18 ? "Greetings" : «condition»

아니오, 12는 18보다 크지 않습니다.따라서 우리는 다른 조건하에서 링크를 진행한다.
12는 10보다 큽니까?

const greeting =
  age < 10
    ? "Hey there"
    : age > 18
    ? "Greetings"
    : age > 10
    ? "What's up?"
    : "That's an interesting age";
console.log(greeting); // What's up?

네, 그래서 되돌아오는 텍스트는 "What's up"입니다. 그렇지 않으면 (어떤 조건이 일치하지 않으면) "That's a interest age"로 되돌아갑니다.

여러 개의 삼원조를 한데 연결하지 마라

당신은 어떻게 생각합니까?너는 지금 갈매기를 더 좋아하니?
아니오, 경험이 풍부한 JS 개발자에게도 추리하고 작성하기 어려운 일입니다.
이것은 삼원 표현식의 중요한 부분을 돋보이게 한다. 비록 여러 개의 삼원 표현식을 한데 연결할 수 있지만 이렇게 하는 것은 피해야 한다.
만약 당신이 이 조건을 읽을 수 없다고 생각한다면, 누가 썼기 때문에, 그것은 심지어 더 읽을 수 없는 다른 사람들이기 때문이다.그 밖에 그것은 간단한 가치를 잃었다.복잡한 조건문에 대해if문장을 사용하십시오.
이것은 자바스크립트 인코딩의 본질에 대한 중요한 개념을 보여 준다. 즉, 코드를 작성할 때 선명성과 가독성이 코드의 길이가 아니라 당신의 중점이어야 한다는 것이다.때때로, 우리는 삼원 함수와 같은 도구를 사용하면 우리의 코드를 더욱 좋게 할 수 있다고 생각하지만, 때때로 더 많은 코드를 작성해야만 그것을 더욱 쉽게 이해할 수 있다.

총결산

삼원의 기본 문법은 다음과 같다.

«condition» ? «then expression» : «else expression»;

이 세 부분, 조건, 그리고 다른 것은 왜 이것이 삼원이라고 하는가이다.주의, 삼원이라는 단어는 세 가지 원소가 있다는 뜻이다.
작동 방식은 다음과 같습니다.

조건이truthy이면 계산하고 표현식을 되돌려줍니다.

그렇지 않으면 elseExpression을 계산하고 되돌려줍니다.

then이나else 표현식에서 만든 값을 은밀하게 되돌려주는 것도 보았습니다.이것이 바로 조건적으로 변수에 이렇게 좋은 값을 부여하는 이유다.
삼원 표현식은 코드를 더욱 간단할 뿐만 아니라 예측할 수 있게 한다.그들이 이렇게 한 것은 재분배의 변수 수를 줄였기 때문이다.
그러나ternaries는 어느 곳에서든 사용해서는 안 됩니다. 예를 들어 하나의 조건에서 여러 개의 작업을 수행해야 한다면, 예를 들어 값을 되돌려주고 컨트롤러처럼 작업을 수행해야 합니다.로그

이거 좋아요?React 캠프에 합류

The React Bootcamp은 동영상, 메모지, 특별 보너스를 포함하여 당신이 알아야 할 Learning React에 대한 모든 정보를 종합 패키지로 포장합니다.
수백 명의 개발자가 React를 파악하고, 꿈의 직장을 찾고, 미래를 관리하는 데 이미 사용된 내부 정보를 얻습니다.

열 때 알림을 받으려면 여기를 누르십시오