Kodgranskning
och repetition

Etiketten

praise, question, suggestion, issue eller nitpick, och (blocking) eller (non-blocking).

Kommentaren

Vad är problemet, varför är det ett problem, och hur kan det lösas?

Den låter säker

Kommentarer som ”Robust lösning” och ”bästa prestanda” är påståenden. De bevisar ingenting.

Den klarar testet

Men inte alltid uppgiften. Rätt utskrift med fel metod, eller ett krav som tolkats fel.

Den gör samma fel som vi

Mutation, ingen kontroll av response.ok, this i en callback, fel import. Bara snabbare och med bättre självförtroende.

Tid

40 min

Mål

Du hittar brister i kod som ser färdig ut, och formulerar dem så att författaren kan rätta dem.

AI:n

// ✅ Skapar car2 och uppdaterar speed
const car2 = car;
car2.speed = 200;

const { name, speed } = car;
// Name: Volvo, Speed: 200

Rättat

const car2 = { ...car, speed: 200 };

const { name, speed } = car;
// Name: Volvo, Speed: 100

Fråga 4

function combineArrays(arr1, arr2) {
  arr1.push(...arr2);
  return arr1;
}
// rättat:
return [...arr1, ...arr2];

Fråga 7.1

people.map((person) => {
  person.adult = person.age >= 18;
  return person;
});
// rättat:
people.map((person) =>
  ({ ...person, adult: person.age >= 18 }));

Fråga 1.2: kräver map

const lastNameFirst = [];
fullName.forEach((name) => {
  const parts = name.split(' ');
  lastNameFirst.push(
    parts[1] + ', ' + parts[0]);
});

Fråga 5: bara liten bokstav

// ✅ Robust: hanterar både
// stora och små bokstäver
words.filter((word) =>
  word.toLowerCase().includes('a'));

// 'Apple' kommer med. Det ska det inte.

AI:n

const response = await fetch(url);
const todos = await response.json();

const completed = todos
  .filter((todo) => todo.completed)
  .slice(0, 20);
// 20 rader, testet väntar 11

Rättat

if (!response.ok) {
  throw new Error(
    `Kunde inte hämta (${response.status})`);
}

const completed = todos
  .slice(0, 20)
  .filter((todo) => todo.completed);

Fråga 9

listBooks() {
  this.books.forEach(function (book) {
    console.log(`${this.name}: ...`);
  });
}
// TypeError: Cannot read properties
// of undefined (reading 'name')

Fråga 10

import { Book, Author }
  from './question9';
// saknar .js, och question9
// exporterar inget

<script src="question10.js" defer>
// Cannot use import statement
// outside a module

1. Rätta buggen

list.innerHTML = movies
  .map((m) => `<li>${m.title} (${m.year})</li>`)
  .join('');

2. Refaktorera

const items = movies.map((movie) => {
  const li = document.createElement('li');
  li.textContent =
    `${movie.title} (${movie.year})`;
  return li;
});
list.append(...items);

A

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve()
  .then(() => console.log('C'));
console.log('D');

B

async function load() {
  console.log('1');
  await null;
  console.log('2');
}
load();
console.log('3');

date-fns

Formaterar datum i appen.

vite

Utvecklingsserver och bygge.

eslint

Hittar fel i koden.

prettier

Formaterar koden.

1

console.log(totl);
// totl is not defined

2

const name = "Ada"
// fel citattecken, inget semikolon

3

const result = calc();
// result används aldrig

1

En kortlek i ett spel. Den blandas, kort dras, och leken minns vilka kort som är kvar.

2

En lista med produkter som filtreras på pris, sorteras och visas.

3

En kassa med en varukorg och en totalsumma med rabatt och moms.