Section 4. 분기 다루기

Yejung·2022년 8월 22일

목록 보기

1/6

값식문

() : 함수 또는 메서드 호출

Obj = { key : value }

function Hamsu(props) {
	console.log("나는 함수")
}

// value, props는 값의 자리
// 문이 오면 syntax error (ex. if문, for문, switch문...)
// 식(삼항연산자)은 가능 ∵ 연산 후 바로 값으로 귀결, 표현식은 바로 값으로 수렴

if 대신 논리연산자
IIFE(즉시실행함수) => 바로 return
for문 대신 map, filter, reduce 사용

삼항 연산자 다루기

⭐ 삼항연산자를 사용하는 일관된 기준이 필요하다

삼항연산자

3개의 피연산자로 구성

조건 ? 참 [식] : 거짓 [식]

function example() {
  return condition1 ? value1
  	: condition2 ? value2
  	: condition3 ? value3
  	: value4;
}

function example() {
  if(condition1) {
    return value1;
  }
  else if (condition2) {
    return value2;
  }
  else if (condition3) {
    return value3;
  }
  else {
    return value4;
  }
  

// 위의 2가지 보다 switch문이 적합하다

조건에 ()를 묶어서 가독성을 높일 수 있다

function alertMessage(isAdult) {
  isAdult
  	? alert("입장 가능") // void 반환하는 함수 => 결국 undefined
  	: alert("입장 불가"); // void 반환하는 함수 => 결국 undefined
}

// 그닥 추천하지 않는다

Truthy & Falsy

참 같은 값(truthy)은 참으로 평가
falsy = 거짓같은 값

undefined와 null 함께 검사할때 falsy 사용

https://developer.mozilla.org/ko/docs/Glossary/Truthy
https://developer.mozilla.org/ko/docs/Glossary/Falsy

사담)
신기한게 빈 객체랑 배열은 truthy 이고
빈 string은 falsy이다

단축평가(short-circuit evalutaion)

// AND

true && true && '도달'
true && false && '도달 X'

// OR

false || false || '도달'
true || true || '도달 X'

state.data ? state.data : 'Fetching...'
// or 연산자로 아래와 같이 쉽게 표현 가능
state.data || 'Fetching...'

state.data ? state.data : 'Fetching...'
// or 연산자로 아래와 같이 쉽게 표현 가능
state.data || 'Fetching...'

function favoriteDog(someDog){
  let favDog;
  if(someDog) {
    favDog = someDog;
  } else {
    favDog = '냐옹';
  }
  return favDog + '입니다';
}

// or 연산자 사용
function favoriteDog(someDog){
  return (someDog || '냐옹) + '입니다';
}

const getActiveUserName(user, isLogin){
 if(isLogin){
   if(user){
     if(user.name){
       return user.name
     } else {
       return '이름없음'
     }
   }
 }
}

// and, or 연산자 사용
const getActiveUserName(user, isLogin){
 if(isLogin && user){
   return user.name || '이름없음'
 }
}

else if 피하기

else if가 여러 번 반복된다면 switch문 사용

else 피하기

const getActiveUserName(user, isLogin){
  if(user.name){
    return user.name
  } else {
    return '이름없음'
  }
}

const getActiveUserName(user, isLogin){
  if(user.name){
    return user.name
  } 
  // 굳이 else 쓸 필요 X
  return '이름없음'
}

Early Return

function loginService(isLogin, user){
  if(!isLogin) {
    if(!checkToken()){
      if(!user.nickName){
        return registerUser(user);
      } else {
        refreshToken();
        return '로그인 성공'
      }
    } else {
      throw new Error('No Token');
    }
  }
}

// 1. 로그인 여부
// 2. 토큰 존재
// 3. 기가입유저확인
// 3-1. 가입
// 3-2. 로그인 성공

function loginService(isLogin, user){
  // Early return
  /**
  * 함수를 미리 종료
  * 사고하기 편하다.
  */
  if(isLogin) {
    return
  }
  
  if(!checkToken()){
    throw new Error('No Token');
  }
  
 
  if(!user.nickName){
    return registerUser(user);
  } 
  
  login();
  
}

function login(){
  refreshToken();
  
  return '로그인 성공' 
}

function 오늘하루(condition, weather, isJob){
  if(condition === "GOOD") {
    공부();
    게임();
    유튜브();
    
    if(weather === "GOOD"){
      운동();
      빨래();
    }
    
    if(isJob === "GOOD"){
      야간업무();
      조기취침();
    }
  }
}

function 오늘하루(condition, weather, isJob){
  if(condition !== "GOOD") return;

  공부();
  게임();
  유튜브();
  
  if(weather !== "GOOD") return;

  빨래();
  운동();

  if(isJob !== "GOOD") return;
 
  야간업무();
  조기취침();
}

부정 조건문 지양하기

추천하지 않는 이유

생각을 여러 번 해야할 수 있다

프로그래밍 언어 동작 방식이 if문이 처음부터 오고 true부터 실행시킨다.

ex) NaN

// 헷갈림
if(!isNaN(3)) {
  console.log('숫자입니다')
}

function isNumber(num){
  return !Number.isNaN(num) && typeof num === "number"
}

if(isNumber(3)) {
  console.log('숫자입니다')
}

예외적으로 사용하는 경우

Early Return
Form Validation
보안 혹은 검사하는 로직

Default Case(=Edge Case) 고려하기

function sum(x, y){
  return x + y;
}

sum(100, 200);

function sum(x, y) {
	x = x || 1;
	y = y || 1;

	return x + y;
}

sum();

function registerDay(userINputDay) {
	// userInput이 들어오는중.. (오류가 있을 수 있음)
	switch (userINputDay) {
		case "월요일": // some code
		case "화요일": // some code
		case "수요일": // some code
		case "목요일": // some code
		case "금요일": // some code
		case "토요일": // some code
		case "일요일": // some code
    // default 필요
		default:
			throw Error('입력값이 유효하지 않습니다');
	}
}

const Root = () => (
	<Router history={browserHistory}>
		<Switch>
			<Route exact path="/" component={App} />
            <Route path="/welcome" scomponent={welcome} />
            {/* Default로 page not found 페이지 제공 */}
			<Route component={notFound} />
		</Switch>
	</Router>
);

사용자의 실수를 예방하자!

명시적인 연산자 사용 지향하기

// 보기 편하게 ()를 잘 활용
if ((isLogin && token) || user )

function increment() {
	number--;
}

// 증감연산자보다 명시적이다!
function increment() {
	number = number - 1;
}

Nullish coalescing operator(널 병합 연산자)

최근 문법이라 예전 브라우저에서는 동작 안할 수 있다
(polyfill 준비)

// ?? null 병합 연산자
// null 이거나 undefined 일때

function createElement(type, height, width) {
	const element = document.createElement(type ?? "div");

	element.style.height = String(height ?? 10) + "px";
	element.style.width = String(width ?? 10) + "px";

	return element;
}

const el = createElement("div");

no chaining with AND or OR operators

// 에러!!!!!! 
console.log(null || undefined ?? "foo")
// 괄호 챙겨,,,
console.log((null || undefined) ?? "foo")

드모르간의 법칙

// 위, 아래 코드는 같다
if (!(A && B)) {
  // some code...
}

if (!A || !B) {
	// some code...
}

Yejung

이것저것... 차곡차곡...

다음 포스트