Best Practices in JavaScript Programming

This article explains the best practices in JavaScript programming.

We will introduce key best practices in JavaScript along with concrete code examples.

YouTube Video

Best Practices in JavaScript Programming

In programming, it’s important not just to write "code that works," but to write code that is maintainable, efficient, and reliable. By following "best practices," your code becomes easier for other developers to understand, simpler to maintain and extend, and ultimately leads to fewer bugs and better performance.

With code examples, let’s look at the key best practices in JavaScript.

Use Clear and Descriptive Variable and Function Names

Make it possible to understand what a variable or function means just by reading the code. Prefer descriptive names over shortened names or abbreviations.

Bad example

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Names like x or fn obscure the intent of the code.

Good example

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• Using meaningful names like totalItems or calculateDiscount helps readers understand the code.

Use const / let and avoid var

Because var is prone to scope and redeclaration issues, it’s recommended to always use const or let.

Bad example

1/* Bad Example */
2var count = 5;

• var is function-scoped and can cause unintended redeclarations and hoisting.

Good example

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let and const are block-scoped and safer to use, resulting in more predictable and stable code.

Use Appropriate Comments

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Bad example

1/* Bad Example */
2let a = 100; // assign 100 to a

Good example

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Prefer comments that explain why something is done, rather than what is being done. This is especially useful where the logic is complex.

Follow the DRY (Don't Repeat Yourself) Principle

Instead of repeating the same logic, factor it into functions or classes. Reducing duplication improves maintainability and helps prevent bugs.

Bad example

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Good example

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• By consolidating duplicated logic into a function, changes and fixes can be made in one place. This is especially important in large-scale development.

Keep functions single-responsibility and minimize side effects

Each function should have one clear purpose. Avoid mutating globals or external state to keep side effects to a minimum.

Bad example

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Good example

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• Designing functions to be pure—returning the same result for the same input—makes them easier to test and more reliable. It also improves reusability and ease of debugging.

Perform Error Handling

Ensure the app doesn’t crash on unexpected input or exceptions. Use the try...catch syntax to handle errors appropriately.

Bad example

1/* Bad Example */
2let data = JSON.parse(inputData);

Good example

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Because JSON.parse() can throw, handle it safely with try-catch. Thorough error handling helps you build robust applications.

Produce structured logs

Output logs in a consistent format to make system behavior easier to trace. Using JSON-formatted logs makes them easier to work with in analysis and monitoring tools.

Bad example

1/* Bad Example */
2console.log('Error occurred!');

Good example

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• Plain string logs can lose information; structured logs make log analysis, visualization, and monitoring easier. This is especially effective in server-side JavaScript (Node.js).

Enhance Code Readability

Code is read by others (or your future self). Use proper indentation, line breaks, and spacing to make code easy to read.

Bad example

1/* Bad Example */
2if(a===b){doSomething();}

Good example

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• Well-formatted, readable code is quicker to understand and makes bugs easier to spot. Don’t cram everything onto one line; make structure visually clear.

Always consider security

Because JavaScript often runs in web environments, security awareness is essential. Always validate user input, guard against XSS and CSRF, and keep dependencies up to date.

Bad example

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Good example

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• Handling user input as-is can introduce vulnerabilities like script injection. Use safe APIs and make it a habit to always validate and sanitize data.

Conducting Code Testing

Introducing automated tests makes it easier to detect and prevent bugs. In JavaScript, test frameworks like Jest and Mocha are commonly used.

Example

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• Having tests ensures that bugs don’t reappear when adding features or making changes. Tests are indispensable for continuous quality assurance.

Conclusion

Following best practices can greatly improve code quality, maintainability, and reliability. When learning JavaScript, it’s important to build habits around not just syntax but also "how to write good code.". By learning continuously, you can make your code more readable, secure, and efficient.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video