모든 개발자가 알아야 할 7가지 자바스크립트 클린 코딩 팁 😎

깨끗한 코드를 작성하면 애플리케이션의 유지 관리 용이성이 향상되고 개발자의 생산성이 향상됩니다. 그러나 일부 개발자는 코드를 더욱 향상시키는 데 사용할 수 있는 언어 기능을 인식하지 못합니다.

이 기사에서는 JavaScript의 기능을 활용하여 깨끗한 코드를 작성하는 방법에 대해 설명합니다.

1. 객체 분해 사용

개체 구조 분해를 사용하면 개체에서 특정 필드를 가져와 즉시 변수에 할당할 수 있습니다. 개체 속성을 추출하는 데 필요한 코드 줄 수를 줄이고 코드를 이해하기 쉽게 만듭니다.

객체 구조 분해는 많은 양의 명시적 변수 선언을 저장하며 다음과 같은 상황에서 정말 유용합니다.

개체의 여러 속성 사용.

동일한 속성을 여러 번 사용합니다.

개체에 깊이 중첩된 속성을 사용합니다.

const employee = {name: ‘jsbro’, email: ‘[email protected]’, phone:’0112–345–6789'};

//with destucturing
const {name, email, phone} = employee;

//without destucturing
const name = employee.name;
const email = employee.email;
const phone = employee.phone;

위의 두 예제(destructuring 포함 및 제외)의 출력은 동일합니다. 그러나 객체 분해를 사용하면 코드가 훨씬 간단하고 이해하기 쉬워집니다.

2. 단일 개체 매개변수보다 여러 매개변수 사용

함수를 선언할 때 단일 개체 입력 대신 항상 여러 입력 매개 변수를 사용해야 합니다. 이 접근 방식은 개발자가 메서드 서명을 보고 전달해야 하는 최소 매개 변수 수를 쉽게 이해할 수 있도록 도와줍니다.

Also, it improves the application performance since there is no need to create object parameters or collect garbage.

//recommended
function CustomerDetail (CustomerName, CustomerType, Order){    
  console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');
} 

//not-recommended
function CustomerDetail (User){    
  console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');
}

그러나 입력 매개변수의 수가 증가하면 불필요한 코드 복잡성을 피하기 위해 객체 매개변수를 사용하는 것으로 다시 전환해야 합니다.

Note: If you use TypeScript and have number of parameters, its easier to define the interface of the parameters to benefit from type checking and auto-suggestions.

3. 화살표 기능 활용

화살표 함수는 콜백 내에서 이 속성에 액세스하는 문제를 해결하면서 JavaScript 함수를 작성하는 간결한 방법을 제공합니다.

화살표 함수를 사용하는 경우 중괄호, 괄호, 함수 및 반환 키워드는 선택 사항이 됩니다. 가장 중요한 것은 코드가 더 이해하기 쉽고 명확해진다는 것입니다.

아래 예는 괄호가 없는 한 줄 화살표 함수와 일반 함수를 비교한 것입니다.

// Arrow function
const myOrder = order => console.log(`Customer need ${order}`);

// Regular Function
function(order){
   console.log(`Customer need ${order}`);
}

화살표 함수가 훨씬 간단하지만 언제 어떻게 사용해야 하는지 이해해야 합니다.

For example, using arrow functions is not the best approach when working with object prototypes, classes, or object literals.

또한 화살표 함수는 함수 생성자로 사용할 수 없습니다. new 키워드를 사용하여 화살표 함수에서 새 개체를 만들면 오류가 발생합니다.

4. 문자열 연결에 템플릿 리터럴 사용

템플릿 리터럴은 백틱(`)으로 구분된 리터럴입니다. 여러 줄 문자열을 만들고 문자열 보간을 수행하는 쉬운 방법을 제공합니다.

예를 들어 문자열에 자리 표시자를 정의하여 불필요한 연결을 모두 제거할 수 있습니다.
`
//before
var name = 'Peter';
var message = 'Hi'+ name + ',';

//after
var name = 'Peter';
var message = Hi ${name}, ;
`

5. 확산 확장 연산자

The spread extension operator (…) is another feature introduced with ES6. It is capable of expanding the literals like arrays into individual elements with a single line of code.

This operator is really useful when we need to put an array or object into a new array or object or to combine multiple parameters in the array.

The below code shows how to combine 2 arrays using the spread operator. As you can see, it makes the code clean and easy to understand since we don’t need to use loops or conditions.


let x = [car, bus,van];
let y = [bike, truck, ..x, lorry]
console.log (y);
// bike, truck, car, bus, van, lorry


6. 콜백 피하기

Callbacks used to be the most popular way to express and handle asynchronous functions in JavaScript programs. However, if you are still using it, I hope you already know the pain of handling multiple nested callbacks.

For example, the following code contains 4 callback functions, and it will become even harder as the code start to grow.

`
function1(function (err, data) {
...

function2(user, function (err, data) {
...
function3(profile, function (err, data) {
...
function4(account, function (err, data) {
....
});
});
});
});

`

As a solution, ES6 and ES7 introduced, Promises and Async/Await to handle asynchronous functions, and they are much easier to use and makes your code easily understandable to others.

But, if you use Promises or Async/Await, your code will be clean and much easy to understand.


// Promises
function1()
.then(function2)
.then(function3)
.then(function2)
.catch((err) => console.error(err));
// Async/Await
async function myAsyncFunction() {
try {
const data1= await function1();
const data2= await function2(data1);
const data3= await function3(data2);
return function4(data4);
}
catch (e) {
console.error(err);
}}


7. 가능할 때마다 속기 사용

When working with conditions, the shorthand method can save you a lot of time and space.

For example, if you write a condition to check empty, null and undefined conditions for a variable, you must write 2 conditions within the if statement.


if (x !== “” && x !== null && x !== undefined) { ... }


However, if you are using the shorthand operator, you just need to write a single condition like below:


if ( !!x ) { ... }


Final Thoughts

In this article, I discuss how we can utilize the features of JavaScript to write clean code.

As developers, we should always write clean code since it increases readability and makes it easier for you and your team to understand the code.

I hope those suggestions will help you improve the readability of your code, and if you have any suggestions, please share them with others in the comments section.

Thank you for reading!

Visit braincube.com for more info