/ FRONTEND

클린코드 자바스크립트 4-1 분기 다루기(값식문, 삼항 연산자)

Clean Code JS 강좌는 여러 절로 구성되어 있습니다.

분기 다루기 😎

값식문👍

고차함수 활용 (map,filter,reduce)

  • 식이 들어올 자리에 값이 들어올 수 있는가?
  • 값이 들어올 자리에 식이 들어올 수 있는가?
  • JSX
// 틀린 예
<div id={if (condition) {'msg'}}>Hello World!</div>

// transfiling
// Is transformed to this JS

// 틀린 예
ReactDOM.render(React.createElement('div',{id: if(contion) {'msg'}}, 'Hello World!'));

const obj = {id : if(condition) {'msg'}}

// 옳은 예
ReactDOM.render(<div id={condition? 'msg' : null}> Hello World!</div>,moundMode);

// 틀린 예
{
  () => {
    const rows = [];
    for (let i = 0; i < objectRows.length; i++) {
      rows.push(<ObjectRow key={i} data={objectRows[i]} />);
      return rows;
    }
  };
}

// 옳은 예
{
  objectRows.map((obj, i) => {
    <ObjectRow key={i} data={obj} />;
  });
}

// 틀린 예
{
  () => {
    if (contidionOne) return <span>One</span>;
    if (contidionTwo) return <span>Two</span>;
    else conditionOne;
    return <span>Three</span>;
  };
}

// 옳은 예
{
  conditionOne && <span>One</span>;
}
{
  contidionTwo && <span>Two</span>;
}
{
  !contidionTwo && <span>Three</span>;
}

삼항 연산자👍

// 코드를 해석하기 어렵다.
function example() {
  return condition1
    ? value1
    : condition2
    ? value2
    : condition3
    ? value3
    : value4;
}

// if else 반복
function example2() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}

// Switch 문 이용하는 것이 유용하다.
function example3() {
  switch (key) {
    case condition1:
      break;
    case condition2:
      break;
    case condition3:
      break;
    default:
      break;
  }
}

const example = condition ? (a === 0 ? "zero" : "positive") : "negative";

const welcomeMessage = (isLogin) => {
  const name = isLogin ? getName() : "이름없음";
  return name;
};

const welcomeMessage = (isLogin) => {
  if (isLogin) {
    return getName();
  }
  return "이름없음";
};
  • 삼항연산자를 이용해 값을 만들어 변수로 만들 때 사용
  • 함수가 내뱉는 값을 반환하는 간단한 식일 때(return) 사용
function alertMessage(isAdult) {
  isAdult
  ? alert("입장이 가능합니다.")
  : alert("입장이 불가능합니다.")
}

function alertMessage(isAdult) {
  if(isAdult) {
    alert("입장이 가능합니다.")
  } else {
  : alert("입장이 불가능합니다.")
  }
}

Solution🌼

삼항 연산자 사용할 때

  1. 좌항 우항을 따졌을 때
  2. 3개 피연산자를 사용할 때
  3. 조건? 참:거짓