Styrflöde: if, else, switch, for och while
Skapa grenar med if/else och switch, upprepa med for och while och använd break och continue för att styra iterationen.
Styrflöde: if, else, switch, for och while är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är kontrollflöde?
Kontrollflödet avgör vilken kod som körs och hur många gånger. JavaScript tillhandahåller villkorssatser (if/else, switch) och loopar (for, while, do/while) för att styra körningsvägen utifrån villkor och data.
if / else if / else
Det mest grundläggande villkoret. Villkoret inom parentesen utvärderas som truthy/falsy. Flera villkor kan kedjas med else if. Det avslutande else fungerar som ett reservfall.
const score = 75;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else {
console.log('F');
}Den ternära operatorn
Den ternära operatorn är en kompakt if/else på samma rad: condition ? trueValue : falseValue. Använd den för enkla tilldelningar och JSX-uttryck. Undvik nästlade ternära operatorer – de blir snabbt svårlästa.
const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';
// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>switch-satsen
switch jämför ett värde med flera fall genom strikt likhet. Använd break efter varje fall för att förhindra att körningen fortsätter till nästa fall. default hanterar värden som inte matchar något fall.
const day = 'Monday';
switch (day) {
case 'Saturday':
case 'Sunday':
console.log('Weekend');
break;
case 'Monday':
console.log('Start of work week');
break;
default:
console.log('Weekday');
}for-loop
Den klassiska for-loopen i C-stil: initiering; villkor; inkrementering. Den passar bäst när du ska upprepa något ett känt antal gånger eller gå igenom arrayer med hjälp av index.
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}for...of-loop
for...of går igenom värdena i alla itererbara objekt, till exempel arrayer, strängar, Maps och Sets. Den är tydligare än en indexbaserad for-loop när du inte behöver indexet.
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
for (const char of 'hello') {
console.log(char); // h e l l o
}for...in-loop
for...in går igenom de uppräkningsbara egenskapsnycklarna i ett objekt. Använd den inte med arrayer – använd i stället for...of eller arraymetoder.
const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
console.log(`${key}: ${user[key]}`);
}while-loop
while-loopen körs så länge villkoret är truthy. Använd den när antalet upprepningar inte är känt i förväg – till exempel när du läser indata tills användaren anger ett giltigt värde.
let attempts = 0;
let success = false;
while (!success && attempts < 3) {
// try something
attempts++;
success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);do...while-loop
do...while kör kodblocket minst en gång innan villkoret kontrolleras. Den är användbar när kodblocket måste köras innan du kan utvärdera avslutningsvillkoret.
let input;
do {
input = prompt('Enter a number:');
} while (isNaN(Number(input)));break och continue
break avslutar den aktuella loopen omedelbart. continue hoppar över resten av den aktuella iterationen och går vidare till nästa. Båda fungerar i for-, while- och do/while-loopar.
for (let i = 0; i < 10; i++) {
if (i === 3) continue; // skip 3
if (i === 7) break; // stop at 7
console.log(i); // 0 1 2 4 5 6
}Kortslutningsutvärdering
&& returnerar det första falsy-värdet eller det sista värdet. || returnerar det första truthy-värdet eller det sista värdet. ?? (nullish coalescing) returnerar höger sida endast om vänster sida är null eller undefined.
const name = user && user.name; // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000; // 3000 only if port is null/undefinedSnabb kontroll
Vilken loop garanteras köra sitt kodblock minst en gång?
Sammanfattning: JavaScripts kontrollflöde
if/else för förgreningar. switch för flera diskreta värden. for-loop för ett känt antal iterationer. for...of för itererbara objekt. while för ett okänt antal iterationer. do...while när kodblocket måste köras minst en gång. break avslutar loopar. continue hoppar över iterationer. Kortslutningsoperatorer för kortfattade villkor.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Styrflöde: if, else, switch, for och while” gratis?
Ja – hela texten till ”Styrflöde: if, else, switch, for och while” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Styrflöde: if, else, switch, for och while”?
Skapa grenar med if/else och switch, upprepa med for och while och använd break och continue för att styra iterationen. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Styrflöde: if, else, switch, for och while”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Variabler: let, const, var och räckvidd
- Datatyper: string, number, boolean, null och undefined
- Funktioner: deklarationer, uttryck och arrow functions
- Styrflöde: if, else, switch, for och while