[javascript] 자바스크립트 clean code 작성법

 

클린코드를 만드는 것은 개발할 때 중요합니다. 왜냐하면 개발할 때 여러명의 개발자와 함께 협업하기 때문에 읽기 쉽고 유지보수 하기도 좋아야하기 때문입니다.  오늘은 몇 가지 자바스크립트 클린코드 스니펫을 소개하겠습니다.

 

1. 다중 조건일 때 or연산자 나열한 것 축약하기

if 문 안에 여러 개의 or 조건을 추가해야할 때가 있는데요. 중복된 코드가 한없이 길어집니다. 이것을 include() 메소드를 이용해서 간결하게 만들 수 있습니다. (그러나 include() 메소드를 지원하지 않는 브라우저가 있기 때문에 낮은 버전 브라우저도 대응하는 서비스를 개발한다면 사용전 확인은 꼭 해야합니다.)

// 기존 방법
if (col === "score" || col === "age" || col === "mobile" || col === "email") {
	// 조건에 따른 로직
}

// 개선된 방법
if (["score", "age", "mobile", "email"]).includes(col) {
	// 조건에 따른 로직
}

 

2. 삼항연산자 사용

흔한 if, else 문인데요. 이런 if, else문은 삼항연산자를 사용하면 한줄로 간결하게 정리할 수 있습니다. 

// if문을 사용한 긴 코드
let color = "";
if (score > 90) {
  color = "blue";
} else {
  color = "yellow";
}

// 삼항연산자를 사용해서 축약
let color = (score > 90) ? "blue" : "yellow"

 

3. Null, undefined, 빈 값 체크

자바스크립트는 타입지원이 미흡한 언어이기 때문에 늘 null, undefined, 빈 배열 또는 빈 문자열 등의 falsy 값 체크는 필수입니다. 그렇기 때문에 요즘 프론트 개발할 때 타입스크립트를 많이 사용하는 이유인데요. 이런 falsy값 체크를 여러 개의 조건을 다닥다닥 나열하는 대신
|| 연산자를 사용하면 한줄로 정리할 수 있습니다. 

// if문을 사용한 긴 조건문 나열
if (member !== null || member !== undefined || member !== "") {
  let student = member;
}

// 간단하게 falsy를 평가하고 값을 할당하는 축약버전
let student = member || "";

 

5. for문 심플하게

for문을 작성하다보면 체크해줘야할 조건들 (기본값, 순회할 범위 등)이 괄호 안에 많기 때문에 종종 실수할 수 있습니다. 이런 실수와 오타를 줄이고 간결한 loop문 작정을 for in 문 for of 문으로 해결할 수 있습니다.

// 긴 for문
for (let i = 0; i < arr.length; i++)

// loop문을 이렇게 축약가능
for (let i in arr) 또는 for (let i of arr)

 

또 다른 방법으로는 forEach문 사용이 있습니다.

function arr(el, index, array) { 
  console.log(`test[${index}]=${el}`);
}

[12, 34, 54].forEach(arr);

 

6. 비교해서 return 하기

조건에 따라 함수를 호출해 return 값 줄 때도 || 연산자를 사용해서 단축된 표현식으로 만들 수 있습니다.

let active;
function checkActive() {
  if (!(active === undefined)) {
  	return active;
  } else {
    return helloActive("active");
  }
}

var data = checkActive();
console.log(data); //output test

function helloActive(val) {
  alert(val);
}

// 단축한 함수
function checkActive() {
  return active || helloActive("active");
}

 

7. 삼항연산자로 함수 호출

삼항연산자를 사용해 조건에 따라 함수를 호출 할 수 있습니다. 아래의 단축 버전 함수 호출은 즉시실행 함수를 사용한 것입니다.

function test1() {
  console.log('테스트01');
};
function test2() {
  console.log('테스트02');
};

const test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// 단축한 버전의 함수 호출
(test3 === 1? test1:test2)();

 

8. Switch문 축약하기

체크할 조건이 엄청 많아질 때 우리는 switch문을 사용하는데요. switch문도 가끔 엄청 길어져서 보기 지저분 할 때가 있습니다. 
간단한 조건 식이라면 객체를 이용해서 switch문도 간략하게 단축할 수 있습니다. 객체 안에 key, value 쌍으로 값을 집어넣고
그 중에 맞는 조건만 골라서 실행하게 하면 됩니다. 

// Longhand
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
}

// 축약형
const data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

9. 화살표함수로 function 축약하기

ES6의 가장 유명한 함수 표현 방법인 화살표함수입니다. 긴 기존의 함수호출 return 방식을 화살표 함수를 사용하면 역시 간결하고 보기 좋게 축약할 수 있습니다.

// 기존의 함수
function getSize(width, height) {
	return width * height
};

// 화살표 함수
getSize = (width, height) => (width * height)

 

12. 문자열 여러번 반복하기

가끔 문자열을 단순 반복할 때가 있는데요. 그럴 때 for문을 돌려서 횟수를 반복해 문자열을 합해줄 수 도 있지만 repeat() 메소드를 사용하면 한줄로 만들 수 있습니다. (단 repeat() 역시 지원하지 않는 브라우저가 있기 때문에 사용전에 확인해야합니다.)

// 기존 for문 사용
let str = "";
for(let i = 0; i < 10; i++){
  str += "flower";
}

// repeat() 메소드 사용
"flower".repeat(10);

 

13. Math.pow() 메소드 축약하기

Math 함수는 수학적 연산들을 수행할 때 사용하는 자바스크립드의 내장 메소드인데요. 그 중에서 제곱연산을 하는 pow() 메소드를 단축하는 연산방법입니다. 곱셈기호 *를 두번 사용하면 pow()연산을 수행하게 됩니다. 

Math.pow(2, 5);

// ->
2**5

 

이렇게 여러가지 자바스크립트 클린코드 작성방법을 알아보았는데요. 이 이외에도 많은 스니펫과 방법들이 있는데 다음에도 정리해서 포스팅 하도록 하겠습니다!