[20220601 W] 1

udemy

🎈클린코드js..

🎈임시변수를 지양

🎈값식문

jsx 에서 문을 쓸 수 없는 이유 Object

🎈short-circuit evaluation

논리연산자 아직까지 헷갈리니깐 자주 사용해보기
문자열은 truthy

* AND 연산자(모두가 true여야 인정)

true && true && "도달O"; => "도달O"

true && false && "도달X"; => false

* OR 연산자(하나라도 true일때 인정)

false || false || "도달" => "도달O"

true || true || "도달 X" => true

https://learnjs.vlpt.us/useful/03-short-circuiting.html

---

function fetchData(){
 if(state.data){
 	return state.data;
 }else{
 	return "Fetching...";
 }
}

or

function fetchData(){
	return state.data? state.data : "Fetching..."
}

위에 대신 아래와 같이 단축평가

function fetchData(){
	return state.data || "Fetching...."
}

funtion favoriteDog(someDog){
	return (someDog || "야옹이") + "입니다";
}

favoriteDog() //=> 야옹이입니다.
favoriteDog("포메") // => 포메입니다.

---

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

위에 대신 아래와 같이 단축평가

const getActiveUserName(user,isLogin){
	if(isLogin && user){
        	return user.name || "이름없음"
    }
}

🎈else if & else 피하기 => 많이 늘어질 경우 switch문 처리

function getActiveUserName(user){
	if(user.name){
    	return user.name;
    } else {return user.name}; 
    // else 쓸필요X, 특수 함수 실행시 로직이 달라질 수 있음
}

🎈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");
        }
    }
}

ealry return을 이용해서 아래와 같이

	//early return 함수를 미리 종료, 사고하기 편함
	
    function login(){
     	refreshToken();
    	return "로그인 성공";}
    }
    
    function loginService(isLogin,user){
    if(isLogin) return;
    
    if(!checkToken()) throw new Error("No Token");
    
    if(!user.nickname) return registerUser(user);
    
    login();
  

🎈부정 조건문 지양

ex) isNaN => 생각을 여러번 해야할 수 있기 때문에 지양 그리고 프로그래밍은 else가 아니라 if 부터 시작하니깐

// 숫자일때만
if(!isNaN(num)){
	console.log("숫자입니다");
}

위에 보단 아래처럼해야 덧 헷갈림..... 
function isNumber(num){
	return !Number.isNaN(num) && typeof num ==="number"
}

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

부정 조건문을 사용한다면 그때는 early return 이나 form validation, 보안 혹은 검사 로직에서 사용

🎈defualt case 고려하기

기본값 정의하기 중요!!!!!

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

sum(100,200);
sum();


function createElement(type, height, width){
	const element = document.createElement(type || "div");
    
    element.style.height = height ||100 ;
    element.style.width = width || 100 ;
    
    return element;

}

createElement("div");

function registerDay(userInputDay){
	switch(userInputDay){
    	case "월요일": //
        case "화요일":
        case "수요일":
        case "목요일":
        case "금요일":
        case "토요일":
        case "일요일":
        default :
        	throw Error ("입력값이상해")
    
    }
}

e.target.value("이상한요일");
registerDay(e.target.value);

🎈명시적 연산자 지양

괄호를 활용 => 우선순위

function decrement(number){
number--
--number
}

funtion  decrement(number){
number++
++number
}

🎈 null.undefined일때만 작동하는 ??

null 과 undefined만 체크할 수 있는 null 병합연산자??

|| 이거는 false, 0, NaN 다 체크

function createElement(type,height,width){
	const element = document.createElement(type?? "div");
    
    element.style.height = String(height?? 20) + "px";
    element.style.width = String(width?? 20) + "px";
    
    return element; 
}

🎈 드모르간법칙

if(!(A && B)){
//실패
}

=> if (!A || !B){
// 실패
}

---

if(!(A || B)){
//실패
}
if(!A && !B)){
//실패
}