자바스크립 효율적인 코드 작성 예시(예제)에 대해서 하나씩 보도록 하겠습니다.
코드 작성에 있어 성능을 최적화하고 개선하는 것이 샘플 데이터를 통해 배우거나 하는 경우에는 별거 아닌 것처럼 느껴질 수 있지만 실무에 적용하게 되면 엄청난 차이를 보이게 됩니다.
따라서 아래에서 잘된 예시와 그렇지 않은 예시를 보여주면서 효율적인 코드 작성하는 방법에 대해서 알아보겠습니다.
주석 처리하기
주석은 작성한 코드가 어떤 걸 의미하는지 설명하는 부분입니다. 코드를 실행 시 실제로 작동하지는 않지만 코드를 보는 사람이 쉽게 알 수 있도록 설명을 적어두는 것입니다.
이렇게 해두면 코드를 읽는 가독성이 향상되고 변수의 용도를 쉽게 파악할 수 있습니다.
예를 들어 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);
최신 JavaScript 기능 사용
화살표 함수, 템플릿 리터럴 및 구조 분해와 같은 최신 JavaScript 기능은 코드를 보다 효율적이고 읽기 쉽게 만드는 데 도움이 될 수 있습니다. 최신 JavaScript 기능을 최신 상태로 유지하고 가능할 때마다 코드에서 사용하는 것이 좋습니다.
// Bad Example
let greeting = "Hello, " + firstName + " " + lastName + "!";
console.log(greeting);
// Good Example
let greeting = Hello, ${firstName} ${lastName}!;
console.log(greeting);
잘 작성하고 정돈된 코드일수록 효율적이며 성능을 최적화하고 사용자 경험을 향상시키는 데 중요합니다. 이러한 모범 사례를 따르면 더 안전하고 읽기 쉽고 효율적인 JavaScript 코드를 작성하여 웹사이트를 차별화할 수 있습니다.
'방구석코딩 > 자바스크립트' 카테고리의 다른 글
자바스크립트 디버깅이란, 디버깅 수정 방법 (0) | 2023.05.25 |
---|---|
자바스크립트 이벤트 리스너 종류 (0) | 2023.05.22 |
자바스크립트 DOM이란, 조작(방법) (0) | 2023.05.18 |
자바스크립트 객체 생성, 배열, 추가, 삭제 (0) | 2023.05.15 |
자바스크립트 배열 선언, 추가, 삭제 (0) | 2023.05.11 |
댓글