이번 강의는 세션중에 가장 길었던 부분이였다.
분기처리에 관해 배웠는데, 내가 잘 사용하고 있던 부분도 있었고
이렇게 하면 안되는구나를 배웠다.
어쨌든 결론은 내가 읽기 쉬운 코드는 남도 읽기 쉽고
쉽게 짠 코드가 좋은것!
값,식,문
- 문법을 간과하는 경우가 있는데, 문법은 컴퓨터를 이해시켜야하기 때문에 중요함!
- 값과 식과 문을 구분하자.
//'값'이 들어가야하는 자리에 '식'이 들어감
<div id={if (condition) {'msg'}}> Hello World</div>
//삼항연산자는 '값'으로 귀결되기 때문에 사용가능
<div id={condition ? 'msg' : null}> Hello World</div>- () : 함수, 우선순위
- {} : 값과 식만 들어가야함.
- 바로 리턴되는 분기문은 논리연산자를 사용하자.
if (conditionOne) {return <span>one</span>;}
{conditionOne && <span>one</span>}삼항연산자
- 피 연산자가 조건, 참일 때, 거짓일 때 세개 인것을 잊지말자.
- 삼항연산자를 과도하게 중복해서 사용하는 경우를 피하자
1. if를 사용하여 조건을 나누자- else-if를 과도하게 사용하는 것 보다는 switch가 더 효과적
- 조건이 여러개일 경우 가독성을 생각해서 작성하자
- 반환 값이 없는 함수는 삼항연산자로 사용하지 말자
truthy & falsy
- boolean 타입이 아니여도 참과 거짓으로 귀결되는 값이 있음.
- null과 undefined를 검사할 때 유용함!
- 여기서 자세히 보자
단축 연산자
- 단축 연산자를 사용하여 불필요한 분기문을 줄이자.
- AND 연산자와 OR 연산자
//참->참=>리턴
true && true && '도달 O'
//참->거짓 =>리턴
true && false && '도달 X'
//거짓 -> 거짓 => 리턴
false || false || '도달 O'
//참 -> 즉시 리턴
true || true || '도달 X'- or연산자 : Default 값이 있을 때 사용하기 좋음.
function favoriteDog(someDog){
let favoriteDog;
if(someDog){
favoriteDog = dog;
}
else {
favoriteDog = '냐옹';
}
return favoriteDog + '입니다.';
}
//someDog가 들어있으면 True, someDog출력
//someDog가 null이거나 undefined면 냐옹 출력
function favoriteDog(someDog){
return (someDog || '냐옹') + '입니다.';
}내 코드에 적용하기
- 개인프로젝트로 진행했던 코드를 수정했다.
- 리액트로 처음 만들어보는 프로젝트라 가독성과 효율이 정말 별로였는데 읽기 좋아졌다.
원래코드
const handleInputName = e => {
setName(e.target.value);
gender !== "" && name !== "" && grade !== "" && targetSe !== ""
? setIsActive(true)
: setIsActive(false);
returnActive() ? setIsActive(true) : setIsActive(false);
};
const handleInputBelong = e => {
let value = e.target.value;
value === null || value === "" || value === " "
? setBelong("-")
: setBelong(e.target.value);
};수정 후 코드
const returnActive = () => {
return gender && name && grade && targetSe;
};
const handleInputName = e => {
setName(e.target.value);
returnActive() ? setIsActive(true) : setIsActive(false);
};
const handleInputGrade = e => {
let value = e.target.value;
value ? setGrade("-") : setGrade(value);
};if문
- if문의 크기를 줄이자.
else - if 피하기
- else if의 경우 if문이 처리되고, else에서 다시 if문을 작동하는 것과 같다.
- if문을 써서 조건을 명확하게 나누자.
- 정 안된다면 switch 문을 사용해서 나누자.
else 피하기
- 자바스크립트는 return되면 return 이후의 코드는 실행되지 않는다.
- else문을 꼭 작성할 필요가 없고, 잘못 사용시 로직이 생각처럼 흐르지 않을 수 있다.
//사용자에게 인사를 하는 함수
//단, 미성년자가 오면 report필요
function getHelloCustomer(user){
if (user.age < 20){
report(user)
}
else{
return '안녕하세요.'
}
}
//위와 같은 경우 미성년자 고객에겐 인사가 리포트가 안되는 이슈가 있음 -> 로직 문제
//아래와 같이 작성하면 의도한 대로 동작함.
function getHelloCustomer(user){
if (user.age < 20){
report(user)
}
return '안녕하세요.'
}Early Return
- 하나의 로직에 많은 의존성을 담고 있을 때 사용한다.
- 동작하지 않을 경우의 분기문을 작성해서 함수를 미리 종료시킨다.
- 코드가 더 직관적으로 읽힌다.
function loginService(isLogin, user) {
if (!isLogin) {
if (checkToken()) {
if (!user.nickName) {
return registerUser(user);
} else {
refreshToken();
}
} else {
throw new Error("No Token");
}
}
}
/*
위와 같은 코드를 Early Return을 사용하여
같은 로직이니만 아래처럼 직관적으로 바꿀 수 있다.
*/
function loginService(isLogin, user) {
if (isLogin) {
return;
}
if (!checkToken()) {
throw new Error("No Token");
}
if (!user.nickName) {
return registerUser(user);
}
login();
}
function login(){
refreshToken();
return "로그인 성공";
}부정 조건문 지양하기
- 직관적이지 않은 코드이기 때문에 지양해야한다.
- 프로그래밍 언어 자체가 if문에 긍정 조건이 오고 그 뒤에 else로 실행이 되기 때문에 굳이 뒤바꿔서 사용할 필요가 없다.
- 부정 조건문을 사용하는 경우
1. Early Return- Form Validation
- 보안 혹은 검사하는 로직
Default Case 고려하기
- 함수를 작성할 때 매개변수가 없어도 동작하도록 해야 조금 더 안전한 코딩을 할 수 있다.
- 특히 프론트엔드 개발자로써, 디폴트 케이스를 넣어주면 사용자의 실수로 에러가 나는 것을 방지할 수 있다.
- 만들어진 함수를 다시 만들어서 사용하는 것도 가능하다.
function safeParseInt(number,radix){
return parseInt(number, radix || 10);
}명시적인 연산자 사용 지양하기
- 괄호를 사용해서 눈에 보이는 우선순위를 만들어주자.
null 병합 연산자
- 0은 falsy라서 false로 리턴되는데, 다른 Falsy값을 제외하고
null과 undefined만 구분할 때 사용하면 좋다.
function safeParseInt(number,radix){
return parseInt(number, radix ?? 10);
}드모르간 법칙
!(A && B) == !A || !B- 연산을 간단하게 할 수 있음
- 항상 간단한 연산을 작성할 수 있도록 하자.
우주최강 개발자가 될 때까지😈