전체 글
[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 ..
[JavaScript][clean-code] first-last
* 만약 숫자의 연속성이 없고 규칙성이 없다면??? - first와 last를 고려해야한다. * first와 last 양끝점이 존재하나 안에 있는 요소에 대한 규칙이나 연속성에 대해서는 보장이 되지 않는경우 이런 경우 first, last를 이용하면 된다. * 예시코드 const students = ['hyeonwoo', 'latte', 'poodle'] function getStudents(first, last) { // ...some code } getStudents('hyeonwoo', 'poodle') * HTML요소도 생각해볼 수 있다. DOM요소에도 firstChild, lastChild라는 DOM Api가 있다.
[JavaScript][clean-code] min - max & begin - end
* min - max 최소값과 최대값을 다룬다. 최소값과 최대값의 포함여부를 항상 결정해야한다. (초과 ~ 미만 / 이상 ~ 이하) 혹은 네이밍에 최소값과 최대값 포함 여부를 표현해야한다. 코드를 작성할 때 명시적인 코드를 작성할 수 있다. * 예시 함수를 통해서 min, max에 대해서 확인 및 판단 해보기 function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 상수 const MIN_NUMBER =1; const MAX_NUMBER =45; // 상수만 할당 해주어 함수를 실행 getRandomNumber(MIN_NUMBER, MAX_NUMBER); 최소값과 최대값에 대한 값을 ..