Why is it recommended to avoid embedding JavaScript code within HTML code?

It is recommended to avoid embedding JavaScript code within HTML code for better code organization and maintainability. Separating JavaScript code into external files allows for easier debugging, version control, and reusability. It also improves page loading speed by enabling browser caching of the external JavaScript files.

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>External JavaScript Example</h1>
    <button onclick="myFunction()">Click me</button>
</body>
</html>