JS 좋은 코드에 대한 고민 - 1

안녕하세요.

오늘은 좋은 JS 코드에 대해 고민했던 과정을 포스팅 해 보겠습니다. 

 

첫번째 질문: 조건이 두가지로 주어졌을 때 어떻게 작성해야 할까요?

 

방법 1 : if ~ else if

방법 2 : if ~ else

방법 3 : 삼항연산자

 

---

 

정답은 방법 3. 삼항연산자 입니다. 

 

조건이 두가지인 경우, else if 까지 사용할 필요가 없으며

if문 대신 삼항 연산자를 쓴다면 더 간결하고 깔끔한 코드가 될 수 있을 것 같습니다. 

 

코드 작성 예시를 들어 보도록 하겠습니다. 

 

ternary-operator.js

 

// Good Code

function getResult(score) {
	return scroe > 5 ? good : bad;
}

---

두번째 질문 : 변수가 null과 undefined 경우를 어떻게 대비해야 할까요?

 

방법 1 : if문 사용 

function-if.js

 

function printMessage(text) {
	let message = text;
    if(text == null || text == undefined) {
    	message = 'Nothing to display'
   }
   	console.log(message);
 }

 

방법 2 : nullish-coalescing 사용

 

nullish-coalescing.js

 

function printMessage(text) {
	const message = text ?? 'Nothing to display';
   	console.log(message);
 }

 

방법 3 : 함수의 매개변수값이 없을 때 지정

 

function.js

 

function printMessage(text='Nothing to display'){
	console.log(text);
}

 

정답은 방법 2 : nulish-coalescing 입니다.

 

leftExpr ?? rightExpr

 

nulishing-coalescing을 사용하면, 

leftExpr 이 null과 undefined 일때, rightExpr 이 리턴됩니다. 

따라서, null 과 undiefined 를 효과적으로 필터링 할 수 있습니다. 

 

여기서, 질문!

방법 3 이 안되는 이유는 무엇일까요?

 

 

방법 3과 같은 경우는 undefined 의 경우에는 잘 필터링 해주지만, null 인 경우에는 

그대로 null을 변수가 가지게 되니 잘 기억해 주세요!

 

개발을 하면서 logicla OR operator 도 상당히 많이 사용하게 되는데요,

간단히 말하면 다음과 같이 동작합니다. 

Logical OR operator ||

leftExpr || rightExpr 

leftExpr 이 falsy 일때, rightExpr 가 리턴됩니다. 

 

이때 falsy 값에는 

1. NaN
2. null
3. undefined
4. -0, 0
5. false
6. '', "", ``

등이 해당됩니다.