Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Creating Your First JavaScript Project

Creating Your First JavaScript Project

~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Now let's write the household budget project's first real file and set up the base structure that grows over the coming chapters.

Setting up the project structure

mkdir src
touch src/index.js

Project structure after chapter 3

haushaltsbuch-app/
├── package.json
└── src/
    └── index.js

The first file: src/index.js

src/index.js
console.log('Household budget app started');
node src/index.js
// Output: Household budget app started

Or via the npm script from package.json that we set up in chapter 2:

npm start
// Output: Household budget app started

console.log() and its siblings

console.log() is the most important tool for learning and debugging – it prints values to the command line. Node.js also has other console methods that pay off in practice:

  • console.log(...) – normal output, for general information.
  • console.warn(...) – a warning, usually highlighted in yellow.
  • console.error(...) – error output, usually highlighted in red, goes to stderr instead of stdout.
  • console.table(...) – prints an array of objects as a readable table, very useful for our later transaction list.
console.log('Info: app started');
console.warn('Warning: no budget set for category "Leisure"');
console.error('Error: file not found');
console.table([
  { category: 'Rent', amount: -850 },
  { category: 'Salary', amount: 2400 },
]);

Comments

JavaScript has two comment forms: single-line with // and multi-line with /* ... */. Comments are completely ignored by the engine – they exist purely for humans reading the code.

// This is a single-line comment

/*
 * This is a multi-line comment,
 * e.g. for longer explanations.
 */
console.log('Code after the comment keeps running normally');

Semicolons: Automatic Semicolon Insertion

JavaScript statements usually end with a semicolon ;. In fact, the code would mostly work WITHOUT semicolons too – the engine inserts them automatically via "Automatic Semicolon Insertion" (ASI). But this automatic behavior has a few surprising edge cases (e.g. with return on its own line). This tutorial uses explicit semicolons THROUGHOUT – that's the safest, most widely used convention and avoids any ambiguity.

Achtung: Do NOT rely on ASI. A return followed by a line break and only then the actual return value gets "fixed" by ASI with an invisible semicolon right after return – the function then returns undefined, even though it doesn't look that way syntactically. Always write semicolons explicitly.