클린코드를 만드는 것은 개발할 때 중요합니다. 왜냐하면 개발할 때 여러명의 개발자와 함께 협업하기 때문에 읽기 쉽고 유지보수 하기도 좋아야하기 때문입니다. 오늘은 몇 가지 자바스크립트 클린코드 스니펫을 소개하겠습니다.
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
이렇게 여러가지 자바스크립트 클린코드 작성방법을 알아보았는데요. 이 이외에도 많은 스니펫과 방법들이 있는데 다음에도 정리해서 포스팅 하도록 하겠습니다!
'Frontend' 카테고리의 다른 글
[quasar] 정말 유용한 q-table 컴포넌트 (0) | 2021.04.29 |
---|---|
[Vue] Computed의 다양한 사용법 (0) | 2021.04.28 |
[Javascript] 객체를 다루는 Javascript 메소드 (0) | 2021.04.26 |
[Javascript] 배열을 다루는 Javascript 메소드 (map, filter, reduce) (0) | 2021.04.22 |
[quasar] quasar config에서 경로 alias 설정하기 (0) | 2021.04.21 |
댓글