7 -3 TIL

클린코드

Early Return

if....if...if....if 등을 계속해서 중첩하여 작성하기 보단 중간중간 미리 return등을 통해서 함수를 일찍 종료시킨다
많은 로직을 하게되면 수많은 의존성이 생길 수 있으니 조심하자

부정 조건문 지양하기

• 생각이 여러번 들어가야된다.
• 프로그래밍 언어 자체로 if문은 true부터 실행시키기에

위의 Early Return이나 Form Validation과 같은 유효성 검사, 보안 혹은 검사하는 로직을 사용할때는 부정 조건문을 사용할 수 있다.
하지만 자주 사용하는 것은 지양하자

Default Case 고려하기

function sum(x,y){
  x = x || 1;
  y = y || 1;
  
  return x+y;
}

sum(100,200);

이런식으로 작성할 때 누구나 기본적인 값을 고려하고나 사용자의 입력값을 생각해야할 땐 항상 주의해서 입력해주는 것이 좋다.

명시적인 연산자 사용 지양하기

항상 연산자의 우선순위를 생각해서 개발을 진행하자 ()사용
단순히 숫자 계산 뿐만 아니라 if((isLogin && token) || user)처럼 우선순위를 지정해주면 좀 더 명시적으로 지정할 수 있다
또 코드가 매우 길어질 때 중간중간에 있는 num++이나 ++num같은 증감연산자일 경우 헷갈림이 생길 수 있으니 그냥 num = num +1 과 같이 명시적으로 보여주자

항상 예측 가능하고 디버깅하기 쉽도록 계획할 수 있도록 하자

Nullish coalescing operator

function createElement(type, height, width){
	const element = document.createElement(type || 'div');
  
  	element.style.height = String(height || 10) + 'px';
  	element.style.width = String(width || 10) + 'px';
  
  	return element;
}

const el = createElement('div', 0, 0);
el.style.height // '10px'
el.style.width // '10px'

일단 0은 falsy에 해당되기 때문에 '10px'만 나올 수 밖에 없다
그렇기 때문에 이때 사용될 수 있는 문법이 null연산자로

function createElement(type, height, width){
	const element = document.createElement(type ?? 'div');
  
  	element.style.height = String(height ?? 10) + 'px';
  	element.style.width = String(width ?? 10) + 'px';
  
  	return element;
}
const el = createElement('div', 0, 0);
el.style.height // '0px'
el.style.width // '0px'

null이거나 undefined 일때만 평가할 수 있는 좋은 논리 연산자이다. 하지만 너무 편리해서 falsy를 사용할지 null,undefined를 평가해야 할지 깊은 판단을 하지 않고 사용하다 보니 실수가 일어난다.
Early Return 할때도 이 부분을 조심해주자

드모르간의 법칙

const isValidUser = true; // 서버에서 받아옴
const isValidToken = true; // 서버에서 받아옴

if(isValidToken && isValidUser){
	console.log('로그인 성공!'); // 로그인 성공
}

정말 간단한 로직인데 이걸 변경해야 할 때가 올 수 있다 만약 로그인 실패를 쓴다면 보통

const isValidUser = false; // 서버에서 받아옴
const isValidToken = false; // 서버에서 받아옴

if(!(isValidToken && isValidUser)){
	console.log('로그인 실패!'); // 로그인 실패
}

이런식으로 사용할 수 있다. 하지만 또 추가 된다면 if안에 계속 늘어날지 모른다
if(!(isValidToken && isValidUser)&& some...&)이런식으로 늘어날 수 있다.
이럴 때 드모르간의 법칙을 생각할 수 있다.

const isValidUser = false; // 서버에서 받아옴
const isValidToken = false; // 서버에서 받아옴
// if(!(isValidToken && isValidUser))
if(!isValidToken || !isValidUser){
	console.log('로그인 실패!'); // 로그인 실패
}

한꺼풀 감싸고 있는 부분을 벗겨낼 수 있다.
true is not true // false is not false 이 핵심이다. 물론 항상 맞는 건 아니지만 적절한 상황에 맞춰서 사용해주면 된다