Study/JavaScript(Clean code)

[JavaScript][clean-code] 부정 조건문 지양하기

* 부정 조건문 지양하기 * 부정조건문을 지양하는 이유 생각을 여러번 해야 할 수 있다.(가독성이 떨어진다.) ex) isNaN 프로그래밍 언어 자체로 if문은 true부터 실행시킨다. 따라서 흐름상 if문에 처음에 있는 조건이 true라고 생각이 든다. 근데 부정조건문을 처음에 넣게 되면 혼란이 올 수 있다. * 부정조건을 예외적으로 사용해야 하는 경우 Early Return Form Validation 보안 혹은 검사하는 로직 * 예시 (isNaN) - isNaN의 경우 한번 생각을 해야해서 헷갈리 수 있다. 차라리 typeof를 사용하는게 가독성이 더 좋을 수 있다. 혹은 isNaN과 typeof를 사용하는 함수를 만든다. function isNumber(num) { return !Number.is..

[JavaScript][clean-code] Early Return

* Early Return - 말 그대로 일찍이 RETURN 하여 함수를 빠져나오는 것이다. (참고) 너무 많은 Early return을 만드는것도 옳지는 않다. * Early Return예시코드 * BAD CODE function loginService(isLogin, user) { if (!isLogin) { if (checkToken()) { if (!user.nickname) { return registerUser(user); } else { refreshToken(); return '로그인 성공'; } } else { throw new Error('No Token'); } } 로그인 여부 확인 토큰 존재 확인 기가입 유저 확인 만약 가입 x : 가입시키기 가입 o : 로그인 성공 - if문이 계..

[JavaScript][clean-code] else if & else피하기

* else if 피하기 else if 를 promise의 then chaning처럼 생각하는 경우가 있다. 따라서 else if가 늘어질 경우 switch문으로 대처하는게 맞다. else if를 이용하는것보다 명확하게 조건을 구분하는것이 더 좋다. * else if는 파이프라인처럼 흐르는게 아닌 else처리를 하고 한번 더 if문이 동작하는 것이다. 두 코드는 완전히 동일하게 동작하는 코드이다. count x = 1; if (x >=0) { 'x는 0과 같거나 크다'; } else if (x > 0) { 'x는 0보다 크다'; } if (x >=0) { console.log('x는 0과 같거나 크다'); } else { if (x > 0) { console.log('x는 0보다 크다.'); } } * ..

[JavaScript][clean-code] 단축평가(short-circuit evaluation)

* 단축평가(short-circuit evaluation) - AND true && true && '도달 성공' // '도달 성공' true && false && '도달 x' // false false에 의해 막힘 false가 확인되어 해당 값은 false - OR false || false || '도달 성공' // '도달 성공' true || true || '도달 실패' // true true에 의해 막힘 첫번째 값이 참이므로 뒤에 값은 확인하지 않는다. * 단축평가하기 좋은 경우 - 기본값(default value)을 표현할 때 가장 편리하다. * 단축평가 예시코드 (OR) // before function fetchData() { if (state.data) { return state.data; }..

[JavaScript][clean-code] Truthy & Falsy

* Truthy & Falsy - 자바스크립트는 동적인 타이핑을 가진 언어 이다보니 형변환이 자유롭다. - 사용자가 의도하지 않아도 형변환이 일어나게 된다. * 예시코드 if ('string'.length > 0) { } if (!isNaN(10)) { } if (boolean === true) { } * 아래와 같이 변경해도 충분히 동작한다. - 이유는?? 전부 Truthy값이기 때문이다. (참으로 평가되기 때문에 정상적으로 동작하는것이다.) if ('string'.length) { } if (10) { } if (boolean) { } * 참 같은 값 (Truthy) if (true) { console.log('true!'); } if ({}) { console.log('true!'); } if ([..

[JavaScript][clean-code] 삼항연산자

* 삼항연산자란? JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if 명령문의 단축 형태로 사용된다. 조건 ? 참(값 혹은 식) : 거짓(값 혹은 식) * 삼항연산자 예시 코드 function getFee(isMember) { return (isMember ? '$2.00' : '$10.00'); } console.log(getFee(true)); // expected output: "$2.00" console.log(getFee(false)); // expected output: "$10.00" console.log(getFee(null)); // expected output: "$10.00" * 삼항연산자가 사용되는곳 리액트에서 알고리즘 숏코딩 삼항연사자를 사용해..