Bästa praxis inom JavaScript-programmering

Den här artikeln förklarar bästa praxis inom JavaScript-programmering.

Vi kommer att introducera viktiga bästa praxis i JavaScript tillsammans med konkreta kodexempel.

YouTube Video

Bästa praxis inom JavaScript-programmering

Inom programmering är det viktigt att inte bara skriva ”kod som fungerar”, utan att skriva kod som är lättunderhållen, effektiv och tillförlitlig. Genom att följa ”bästa praxis” blir din kod lättare för andra utvecklare att förstå, enklare att underhålla och utöka, och leder i slutändan till färre buggar och bättre prestanda.

Med kodexempel tittar vi på de centrala bästa praxis i JavaScript.

Använd tydliga och beskrivande namn för variabler och funktioner

Gör det möjligt att förstå vad en variabel eller funktion betyder bara genom att läsa koden. Föredra beskrivande namn framför korta namn eller förkortningar.

Dåligt exempel

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

• Namn som x eller fn döljer syftet med koden.

Bra exempel

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

• Att använda meningsfulla namn som totalItems eller calculateDiscount hjälper läsare att förstå koden.

Använd const / let och undvik var

Eftersom var är benäget att orsaka problem med scope och omdeklarationer rekommenderas att du alltid använder const eller let.

Dåligt exempel

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

• var har funktionsscope och kan orsaka oavsiktliga omdeklarationer och hoisting.

Bra exempel

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

• let och const har blockscope och är säkrare att använda, vilket ger mer förutsägbar och stabil kod.

Använd lämpliga kommentarer

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

Dåligt exempel

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

Bra exempel

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

• Föredra kommentarer som förklarar varför något görs, snarare än vad som görs. Detta är särskilt användbart där logiken är komplex.

Följ principen DRY (Don’t Repeat Yourself)

Istället för att upprepa samma logik, bryt ut den i funktioner eller klasser. Att minska duplicering förbättrar underhållbarheten och hjälper till att förebygga buggar.

Dåligt exempel

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

Bra exempel

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);

• Genom att samla duplicerad logik i en funktion kan ändringar och rättelser göras på ett ställe. Detta är särskilt viktigt i storskalig utveckling.

Ge funktioner ett enda ansvar och minimera bieffekter

Varje funktion ska ha ett tydligt syfte. Undvik att mutera globala eller externa tillstånd för att hålla bieffekter till ett minimum.

Dåligt exempel

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

Bra exempel

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

• Att utforma funktioner som är rena—som ger samma resultat för samma indata—gör dem enklare att testa och mer tillförlitliga. Det förbättrar också återanvändbarhet och gör felsökning enklare.

Utför felhantering

Säkerställ att appen inte kraschar vid oväntad indata eller undantag. Använd syntaxen try...catch för att hantera fel på rätt sätt.

Dåligt exempel

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

Bra exempel

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

• Eftersom JSON.parse() kan kasta undantag, hantera det säkert med try-catch. Noggrann felhantering hjälper dig att bygga robusta applikationer.

Skapa strukturerade loggar

Skriv ut loggar i ett konsekvent format för att göra systemets beteende lättare att spåra. Att använda JSON-formaterade loggar gör dem lättare att arbeta med i analys- och övervakningsverktyg.

Dåligt exempel

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

Bra exempel

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

• Enkla strängloggar kan tappa information; strukturerade loggar gör loganalyser, visualisering och övervakning enklare. Detta är särskilt effektivt på serversidan i JavaScript (Node.js).

Förbättra kodens läsbarhet

Kod läses av andra (eller ditt framtida jag). Använd korrekt indentering, radbrytningar och mellanrum för att göra koden lättläst.

Dåligt exempel

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

Bra exempel

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

• Välformaterad, läsbar kod är snabbare att förstå och gör buggar lättare att upptäcka. Tryck inte in allt på en rad; gör strukturen visuellt tydlig.

Tänk alltid på säkerhet

Eftersom JavaScript ofta körs i webbmiljöer är säkerhetsmedvetenhet avgörande. Validera alltid användarinmatning, skydda mot XSS och CSRF och håll beroenden uppdaterade.

Dåligt exempel

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

Bra exempel

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

• Att hantera användarinmatning som den är kan introducera sårbarheter som skriptinjektion. Använd säkra API:er och gör det till en vana att alltid validera och sanera data.

Genomföra kodtestning

Att införa automatiserade tester gör det lättare att upptäcka och förebygga buggar. I JavaScript används ofta testramverk som Jest och Mocha.

Exempel

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});

• Att ha tester säkerställer att buggar inte återkommer när du lägger till funktioner eller gör ändringar. Tester är oumbärliga för kontinuerlig kvalitetssäkring.

Slutsats

Att följa bästa praxis kan avsevärt förbättra kodkvalitet, underhållbarhet och tillförlitlighet. När du lär dig JavaScript är det viktigt att bygga vanor inte bara kring syntaxen utan också kring ”hur man skriver bra kod”. Genom att lära dig kontinuerligt kan du göra din kod mer läsbar, säker och effektiv.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video