Does Your JavaScript Code Sucks?

JavaScript, the language that makes websites work, was created in 1995 by Brendan Eich in just 10 days. It quickly became popular, even though many people criticized its strange features. Over time, JavaScript has grown into a strong and flexible language that is crucial for modern web development. However, many programmers still write JavaScript code that is slow, risky, and poorly designed.

Let's looks at some common mistakes that programmers can make when writing JavaScript code. And also show you the fix of these mistakes, to make your code safer and easier to understand.

1. Global Variables and Polluted Namespace

JavaScript is very flexible, which can sometimes lead to problems. Programmers might accidentally create variables that can be used anywhere in the code, which can cause unexpected errors, especially in big projects.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

Using an IIFE (Immediately Invoked Function Expression) keeps variables hidden within a specific part of the code, preventing them from interfering with other parts of the code. This makes the code safer and easier to manage.

(() => {
    let user = "Admin"; // Scoped to this block
    function setUser() {
        user = "Guest";
    }
    setUser();
    console.log(user); // "Guest" - Intended behavior
})();

2. Insecure Data Handling

Poorly written JavaScript code can sometimes reveal secret information or fail to properly clean user input, which can lead to security problems like Cross-Site Scripting (XSS) attacks.

const userInput = "<script>alert('Hacked!')</script>";
document.getElementById("output").innerHTML = userInput; // Wrong!

Using textContent or properly sanitizing input prevents malicious scripts from being executed.

const userInput = "<script>alert('Hacked!')</script>";
const sanitizedInput = userInput.replace(/</g, "<").replace(/>/g, ">");
document.getElementById("output").textContent = sanitizedInput;

3. Over-Reliance on eval()

The eval() function is dangerous because it allows running code from a string. This can be used by hackers to sneak in malicious code.

const userCode = "alert('Hacked!')";
eval(userCode); // Wrong!

Avoid using eval() entirely, instead, rely on safer alternatives like Function with strict control.

const userCode = "alert('Hacked!')";
// Avoid eval(); implement safer alternatives
try {
    const safeFunction = new Function(userCode); // Limited scope execution
    safeFunction();
} catch (e) {
    console.error("Execution failed:", e);
}

4. Weak Error Handling

Ignoring or mishandling errors can cause your app to crash or even leak private information.

const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    return response.json(); // Assuming API always returns valid JSON
};

Always validate responses and implement structured error handling.

const fetchData = async () => {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Network response was not ok");
        return await response.json();
    } catch (error) {
        console.error("Fetch failed:", error.message);
        return null; // Graceful degradation
    }
};

5. Hardcoded Secrets

Now this is where lot of beginner developer do mistakes. Storing secret information like API keys or passwords directly in JavaScript files is a bad idea because it can easily be accessed by anyone who looks at the code.

const API_KEY = "12345-SECRET";
fetch(`https://api.example.com/data?key=${API_KEY}`);

Utilize environment variables (.env or .env.local) or secure storage solutions to keep secrets out of your codebase.

var user = "Admin"; // Declared in the global scope
function setUser() {
    user = "Guest"; // Accidentally overwrites the global variable
}
setUser();
console.log(user); // "Guest" - Unintended behavior

Writing good JavaScript code isn't just about making it work. It's also important to make sure it's safe, fast, and easy to understand and change. By fixing common mistakes and following good practices, you can turn your messy JavaScript into clean, professional code.

The next time you write JavaScript, ask yourself: "Does my code suck?" If the answer is "yes," it's time to improve it pal!

The above is the detailed content of Does Your JavaScript Code Sucks?. For more information, please follow other related articles on the PHP Chinese website!