[js] javascript 깔끔한 코드를 위한 꿀팁 10

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

** 해당 글은 영문글의 번역본입니다.

 

 

javascript 를 이용해 코딩하다 보면

깔끔하지 않은 코드를 마주할 때 "내가 이렇게 코딩해도 되는건가...?" 싶을 때가 있습니다.

이를 해결하기 위해, javascript 깔끔한 코드를 위한 꿀팁 10가지를 소개하려고 합니다! 

 

 

---

1. OR( || ) 조건문이 여러개 사용되는 경우

if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
    //code
}

 

다중 OR 조건문 대신에 Includes()를 사용하면 가독성을 높일 수 있습니다.

 

const fruitList = ['apple', 'orange', 'banana', 'grapes'];
if (fruitList.includes(fruit)) {
   //code
}

 

2. 객체 level이 깊은 경우, AND(&&) 조건문이 여러개 사용되는 경우

if(obj && obj.address && obj.address.postalCode) {
    console.log(obj.address.postalCode)
}

 

optional chaining(?.)을 사용하면 더 간단하게 표현 가능합니다.

 

console.log(obj?.address?.postalCode);

 

3. null, undefined, empty 체크

if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

 

여러 조건문을 넣는 것보다 OR( || ) operator를 사용하면 간단히 표현할 수 있습니다.

 

const second = first || '';

 

4. switch 문 간결화

switch (number) {
  case 1:
     return 'one';
  case 2:
     return 'two';
  default:
     return;
}

 

object를 활용하면 더 깔끔하게 표현할 수 있습니다.

 

const data = {
  1: 'one',
  2: 'two'
};
//Access it using
data[num]

 

5. 한 줄 함수 간결화

function doubleOf(value) {
  return 2 * value;
}

 

arrow function을 활용해 보세요!

 

const doubleOf = (value) => 2 * value

 

6. 조건에 따라 다른 함수를 호출할 때

function area() {
    console.log('area');
}
function volume() {
    console.log('volume');
}
if(type === 'square') {
    area();
} else {
    volume();
}

 

삼항 연산자 활용하기! 

함수 호출 시 무조건 () 붙여야 하는 건줄 알았는데 이런 방법도 있더라구요~

 

(type === 'square' ? area : volume)()

 

7. default 값 초기화

if(amount === null) {
    amount = 0;
}
if(value === undefined) {
    value = 0;
}
console.log(amount); //0
console.log(value); //0

 

OR( || ) 연산자를 활용하면 더 간단히 표현 가능합니다.

 

console.log(amount || 0); //0
console.log(value || 0); //0

 

8. if..else.. 조건문 간결화

let value;
if (num > 0) {
    value = 'positive';
} else {
    value = 'negative';
}

 

3항 연산자를 활용해 봅시다.

 

const value = num > 0 ? 'positive' : 'negative';

 

9. for loop 간결화

const arr = [11, 22, 33];
for(let i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

 

for를 forEach로 대신하기

 

const arr = [11, 22, 33];
arr.forEach((val) => console.log(val));

 

10. string number를 number로 전환하기

const num1 = parseInt("100");
const num2 =  parseFloat("11.11");

 

parseInt(), parseFloat() 대신에 

간단히 + 연산자를 사용할 수 있습니다.

 

const num1 = +"100";
const num2 =  +"11.11";

---

 

 

[References]

Stop Writing JavaScript Like This