6-29 (클린코드-2)

클린코드

타입검사

JS는 동적인 언어이기 때문에 타입 검사가 어려우니 검색을 통해 각 타입별 타입 검사를 잘 찾아서 진행할 수 있도록 하자

typeof는 무적이 아니며 instanceof또는 Object.prototype.toString.call()등도 있으니 잘 활용해서 타입이 올바른지 확인할 수 있게 하자

undefined & null

!null //true
!!null // false

null === false // false
!null === false//true

null +123 // 123 //null=>math=>0

!하나는 값을 뒤집고 !!두개면 값을 bollean으로 형변환을 시도한다

undefined는?
선언했지만 값은 정의되지 않고 할당 X

let varb;

typeof varb //undefined

varb = null;

typeof varb //object

undefined + 10 // NaN
!undefined // true

undefined == null // true
undefined ===null //false
!undefined === !null //true

null은 0이라고 됐지만 undeifned는 또 다르며 !에는 또 true가 나온다
위처럼 많은 혼란을 줄 수 있는데 이는 업무를 할 때 컨벤션이 있으면 좋고 아니면 스스로의 컨벤션을 만들어 나가는 게 좋다.

정리
undefined,null은 값이 없거나 정의되지 않은 명시적인 표현

• undefined
  • NaN , typeof undefined
• null
  • 0 typeof Object

조심해서 사용하자

eqeq 줄이기

동등 연산자는 ==일때부터 쓰는데 ===는 엄격한 동등연산자로 무시할 수 없는 굉장한 차이가 있다

'1' == 1 // true
1 == true // true

'1' === 1 //false
1 === true // false

동등연산자를 사용할 경우 자동적인 타입 변환(type casting)이 일어나서 문제가 생길 수 있으니 ===와 같은 엄격한 동등 연산자를 쓰는 걸 추천한다.

const ticketNum = $('#ticketNum')
console.log(ticketNum) // 0
ticketNum.value > 1000 // false
ticketNum.value ===0 // false

위의 예시는 tickenNum이라는 id의 input창에 입력된 값을 가져온 것이다.
그럴 때 간혹 == 이러한 시도로 느슨한 검사를 역이용할 수도 있지만 팀 동료들이 볼 때 위험할 수 있다.

팀원들과 함께 사용하며 가독성이 있고 활용하기 쉽게 하려면 Number(ticketNum.value) ===0와 같이 직접적인 형변환을 해주는 게 훨씬 좋다

이것과 비슷하게 자동으로 형변환 되는 부분을 항상 주의하고 조심해야한다. 최대한 명시적으로 변환하자
추가로 짤막하게 parseInt를 사용할 때 뒤에 몇진수로 할 것인지 꼭 값을 넣어주자 기본값이 10진수가 아니다
parseInt(9.9999,10);과 같이 지정해줘야 오류를 많이 줄일 수 있다

isNaN

Number.MAX_SAFE_INTEGER //9007199254740991
Number.isInteger // f isInteger()isNaN

isNaN => is Not A Number 로 숫자가 아니다란 뜻으로 계속 답을 뒤집어서 반환하기 때문에 헷갈림이 늘어날 수 있다

isNaN // 느슨한 검사
Number.isNaN // 엄격한 검사

ES2015+ 부터 추가됐으니 Number를 꼭 붙여주자

경계 다루기

function genRandomNumber(min,max) {
	return Math.floor(Math.random() * (max - min + 1)) + min ;
}

//상수
const MIN_NUMBER = 1;
const MAX_NUMBER = 45;

genRandomNumber(MIN_NUMBER, MAX_NUMBER);
//이 부분만 떼고 확인한다 하더라도 gen만든다 random 랜덤한 number 숫자를 min_number 최소 ~ Max_number 최대 사이의 라는 한 눈에 명시적으로 확인 가능한다.

하지만 팀마다 경계가 애매하게 느껴질 수 있는데 이상인지 초과인지 이하인지 미만인지와 같이 팀이나 조건마다 애매해질 수 있다
그러니 경계값을 설정할 때 이상인지 초과인지 경계값을 포함하는 지등을 명확하게 정하는 것이 좋다.

경계 다루기
1. 최소값과 최대값을 다룬다.
2. 최소값과 최대값 포함 여부를 결정해야 한다 (이상-초과/ 이하-미만)
3. 혹은 네이밍에 최소값과 최대값 포함 여부를 표현한다

Begin-End

function reservationDate(beginDate, endDate){
 // ...some code 
}
reservationDate('YYY-MM-DD','YYY-MM-DD')

이러한 간단한 코드를 만들 때도 왼쪽이 시작이고 오른쪽이 끝지점이구나 하는 암묵적인 규칙등이 있을 수 있으니 신경쓰자

first-last

포함된 양 끝을 의미한다 부터~~~까지

const students = ['포코','존','현석']

function getStudents(first,last){
	//...some code
}
getStudents('포코','현석)

양 끝점이 존재하나 규칙이나 연속성 등이 보장 되지 않으니 이런 간단한 것들도 신경써서 하자

prefix-suffix

아주 간단하지만 네이밍을 할 때 하나의 규칙성을 가지고 네이밍 할 수 있도록 하자
React에서 훅은 전부 use를 사용하는 것이나 폴더 구조를 가질 때 안에 파일이 여러개면 s를 붙인다는 등의 것처럼!

매개변수의 순서가 경계다

호출하는 함수의 네이밍과 인자의 순서의 연광성을 고려하자

function someFunc(someArg,someArg){
  
}

genRandomNumber(1,50);
getDates('2021-10-01','2021-10-31');
genShuffleArray(1,5);

위와 같은 랜덤 번호 1부터 50까지에서 처럼 함수의 네이밍과 인자들만 보고 유추할 수 있는 연관성을 고려해주는 것이 좋다

1. 매개변수를 2개가 넘지 않도록 만든다.
2. arguments, rest parameter 사용 (넘는다면)
3. 매개변수를 객체에 담아서 넘긴다.
4. 랩핑하는 함수를 만들어낸다