한입 크기로 잘라먹는 리액트(React.js)-section3. 삼항 연산자/ 단락회로평가/ 조건문 upgrade

const job = '프론트엔드';·2023년 8월 11일
0
post-thumbnail

삼항연산자

조건문의 연장선.......?

삼항연산자를 쓰면, 조건문을 간결하게 쓸 수 있다 !

삼항연산자 사용방법

조건문 ? A(조건문이 참 일 때 출력) : B(조건문이 거짓 일 때 출력)
  • 조건문이 참이야? A를 출력해
  • 조건문이 거짓이야? B를 출력해

변수에 빈배열을 넣고, 빈배열인지 확인하는 조건문

삼항연산에 출력문에 값으로 넣으면, 출력값을 대입해서 출력해야 함

truthy / falsy 적용가능

a값에 빈 값으로 undefined가 들어감

중첩된 삼항연산자도 가능 !

  • 하지만, 가독성이 떨어지는 편
  • 이럴 때는 if 조건문이 훨씬 보기 편함

단락회로평가

왼쪽에서 오른쪽으로 연산하는 성격을 이용하는 평가방법

논리연산자로 예를 들어보자.

'&&(and)' 연산자

'&&(and)'연산자는 양쪽 두 조건이 '모두' true일 때만 true값을 반환
만약에 둘 중 하나가 false라면, false를 반환

따라서, 첫 조건이 false면 뒤에 조건은 볼 필요없이 false를 반환

'||(or)' 연산자

'||(or)'연산자의 경우 두 조건 중 하나만 true라면 true값을 반환
따라서 둘 중 하나가 false라고 하더라도, true값이 있다면 true를 반환

따라서, 첫 조건을 false라면 두번째 조건이 true인지 확인해야 함

그렇다면, 단락회로 평가가 적용되지 않는 것일까? 아님


첫 조건이 true면 뒤에 조건이 false든, true든 상관없기 때문에 첫 조건만 보고 true값을 반환하게 됨

조건문 upgrade

예제 1)

이런식으로 조건을 모두 적으면, 잘 판단해서 출력해주는 것을 확인 할 수 있다

하지만, 조건이 무지 많으면?

계속 논리 연산자를 쓰는 것보다. 내장함수를 쓰는게 낫지 않을까? feat. includes()

예제 2)

이야.......if조건이 너무 많다. 고단하다 증말


객체의 괄호표기법을 사용해서 출력하는게 코드가 훨씬 단순해지지 않을까?

getMeal에 매개변수로 "한식"을 담아서 호출하면 mealType은 "한식"이 되고, meal객체에서 key값인 한식을 조회해서 일치하는 key값이 있으면 value가 반환하고 없으면 "굶기"가 출력

각자 적재적소에 알맞게 사용하면 best...

profile
`나는 ${job} 개발자`

0개의 댓글