Study

[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" * 삼항연산자가 사용되는곳 리액트에서 알고리즘 숏코딩 삼항연사자를 사용해..

[JavaScript][clean-code] 매개변수의 순서가 경계이다.

* 매개변수의 순서가 경계다. 매개변수의 순서만 잘지켜도 그것 자체가 경계이다. 호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려한다. 다양한 관계들을 함수의 네이밍과 인자를 통해서 역할을 유추할 수 있다. 함수를 만들때 함수의 네이밍과 인자를 고려해준다. getRandomNumber(1, 50); getDates('2021-10-01', '2021-10-31'); getShuffleArray(1, 5); * 유지보수에 취약한 함수를 만들지 않기 위해서는 매개변수를 2개가 넘지 않도록한다. 그런데도 인자가 너무 많을거 같으면 arguments, rest parameter를 이용한다. 혹은 매개변수를 객체에 담아서 넘긴다. 객체이므로 순서가 상관없으므로 다양하게 인자를 다룰수 있다. 아래의 예시 참조 ..

[JavaScript][clean-code] prefix-suffix

* prefix(접두사) - suffix(접미사) prefix와 suffix를 이용해서 다양한 네이밍의 규칙을 만들어 줄 수 있다. 일관성을 가질 수 있는 가장 좋은 방법중 하나이다. * prefix(접두사)가 사용되는 경우 React에 use- 가 붙은 파일이름 혹은 네이밍은 Hook이다.(관습, 약속) React-use라는 파생 라이브러리도 있다. JavaScript의 getter, setter JQuery의 prefix는 $ 이다. - prefix가 다양하게 사용된다. (일종의 약속) * suffix(접미사)가 사용되는 경우 suffix를 사용해서 네트워크 상태를 접미사로 보여주는 예시 const START_REQUEST = 'START_REQUEST' (요청) const START_SUCCESS ..