본문 바로가기
방구석코딩/자바스크립트

자바스크립트 효율적인 코드 작성 예시(예제)

by 석세상 2023. 5. 29.
반응형

자바스크립 효율적인 코드 작성 예시(예제)에 대해서 하나씩 보도록 하겠습니다.

자바스크립트 효율적인 코드 작성법

코드 작성에 있어 성능을 최적화하고 개선하는 것이 샘플 데이터를 통해 배우거나 하는 경우에는 별거 아닌 것처럼 느껴질 수 있지만 실무에 적용하게 되면 엄청난 차이를 보이게 됩니다.

 

따라서 아래에서 잘된 예시와 그렇지 않은 예시를 보여주면서 효율적인 코드 작성하는 방법에 대해서 알아보겠습니다.

 

주석 처리하기

주석은 작성한 코드가 어떤 걸 의미하는지 설명하는 부분입니다. 코드를 실행 시 실제로 작동하지는 않지만 코드를 보는 사람이 쉽게 알 수 있도록 설명을 적어두는 것입니다.

 

이렇게 해두면 코드를 읽는 가독성이 향상되고 변수의 용도를 쉽게 파악할 수 있습니다.

 

예를 들어 x 및 y와 같은 변수를 사용하는 대신 firstName 및 lastName과 같은 변수를 사용하여 코드를 보다 설명적으로 만들 수 있습니다.

// Bad Example
let x = 10;
let y = 20;
let result = x + y;

// Good Example
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

 

전역 변수 사용 피하기

전역 변수 사용은 가능한 피하는게 좋습니다. 전역 변수는 애플리케이션의 전체 런타임 동안 메모리에 저장되기 때문에 JavaScript 코드 속도를 저하시킬 수 있습니다.

 

대신 함수 내에서 지역 변수를 사용하고 가능하면 전역 변수를 사용하지 않는 것이 가장 좋습니다.

// Bad Example
let count = 0;
function incrementCount() {
count++;
console.log(count);
}

// Good Example
function incrementCount() {
let count = 0;
count++;
console.log(count);
}

 

Strict 모드 사용

Strict 모드는 보다 안전하고 효율적인 코드를 작성하는 데 도움이 되는 JavaScript의 기능입니다.

 

일반적인 코딩 실수를 포착하고 더 엄격한 구문 규칙을 적용합니다. JavaScript 파일 또는 함수 시작 부분에 "use strict" 지시문을 추가하여 Strict 모드를 활성화할 수 있습니다.

// Bad Example
a = 10; // This will not throw an error
console.log(a);

// Good Example
'use strict';
a = 10; // This will throw a ReferenceError
console.log(a);

 

eval() 사용 피하기

JavaScript의 eval() 함수는 문자열로 전달된 모든 코드를 실행할 수 있으며 이는 주요 보안 위험이 될 수 있습니다. 가능하면 eval() 사용을 피하고 동일한 기능을 수행하는 다른 방법을 찾는 것이 가장 좋습니다.

// Bad Example
let code = "alert('Hello World!');";
eval(code);

// Good Example
let message = "Hello World!";
alert(message);
728x90

 

최신 JavaScript 기능 사용

화살표 함수, 템플릿 리터럴 및 구조 분해와 같은 최신 JavaScript 기능은 코드를 보다 효율적이고 읽기 쉽게 만드는 데 도움이 될 수 있습니다. 최신 JavaScript 기능을 최신 상태로 유지하고 가능할 때마다 코드에서 사용하는 것이 좋습니다.

// Bad Example
let greeting = "Hello, " + firstName + " " + lastName + "!";
console.log(greeting);

// Good Example
let greeting = Hello, ${firstName} ${lastName}!;
console.log(greeting);

 

잘 작성하고 정돈된 코드일수록 효율적이며 성능을 최적화하고 사용자 경험을 향상시키는 데 중요합니다. 이러한 모범 사례를 따르면 더 안전하고 읽기 쉽고 효율적인 JavaScript 코드를 작성하여 웹사이트를 차별화할 수 있습니다.

728x90
반응형

댓글