Clean JavaScript: write code people can safely change

Apply practical clean code principles in JavaScript through naming, function boundaries, cohesion and refactors that improve maintainability instead of chasing clever syntax.

How much do you know about JavaScript?

📘 Theory

Name things by intent, not by implementation trivia

A variable or function name should explain why it exists in the flow.

Names such as `data`, `value` or `temp` often hide the role that a piece of code plays. The reader then has to reverse-engineer the purpose from the internals.

Better names reduce the amount of comment-like explanation the code needs.

Prefer domain names such as `activeUsers`, `orderTotal` or `loadProfile`.
Use verbs for actions and nouns for data.
Rename aggressively when the purpose changes during refactoring.

Keep functions small enough to explain one responsibility

A function that validates, transforms, fetches and renders is usually too much for one place.

Long functions often hide multiple responsibilities and make failure handling harder to isolate.

Splitting work into smaller functions also makes tests, debugging and reuse more straightforward.

Make side effects visible and deliberate

The hardest bugs often come from hidden mutations and surprising external changes.

Pure transformations are easier to test because the same input produces the same output with no hidden state change.

When a function does cause side effects, such as DOM updates, logs or storage writes, that should be obvious from its role.

1 Name things by intent, not by implementation trivia 2 Keep functions small enough to explain one responsibility 3 Make side effects visible and deliberate

🧪 Learn by doing

Example Guided example: rename a vague flow into a readable one Improve readability by replacing generic names with domain-focused names.

⌄

Example Interactive demo: normalize input through focused functions See how a small form becomes easier to read when normalization and rendering are separated.

⌄

🏁 Challenges

Challenge Challenge: extract a reusable normalization function Move a text transformation into its own clearly named helper and log the final value.

⌄

🧰 Resources

Useful links

MDN: JavaScript Guide javascript.info web.dev: Learn JavaScript

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 41

Real-time basics: WebSocket versus SSE

Lesson 43

Practical JavaScript patterns without overengineering

›