10 Effective Techniques to Optimize Your JavaScript Code

// Concatenate and minify your JavaScript files
const jsFiles = [
    'file1.js',
    'file2.js',
    'file3.js'
];

const concatenatedJS = jsFiles.map(file => {
    const content = fs.readFileSync(file, 'utf8');
    return content;
}).join('\n');

const minifiedJS = minify(concatenatedJS);
fs.writeFileSync('minified.js', minifiedJS);

// Bad example: using global variables
const name = 'John';

function sayHello() {
    console.log(`Hello, ${name}!`);
}

// Good example: using local variables
function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

const name = 'John';
sayHello(name);

<!-- Async loading with the defer attribute -->
<script defer src="script.js"></script>

<!-- Async loading with dynamic script creation -->
<script>
      const script = document.createElement('script');
      script.src = 'script.js';
      document.body.appendChild(script);
</script>

// Bad example: using an object for a list of elements
const elements = {
    'element1': {},
    'element2': {},
    'element3': {}
};

// Good example: using an array for a list of elements
const elements = [
    {},
    {},
    {}
];

// Bad example: using a for loop with unnecessary iterations
const items = ['item1', 'item2', 'item3', 'item4'];

for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
}

// Good example: using a for...of loop
const items = ['item1', 'item2', 'item3', 'item4'];

for (const item of items) {
    console.log(item);
}

const element = document.querySelector('.my-element');
element.style.backgroundColor = 'red';
element.style.color = 'white';
element.style.fontSize = '20px';

// Good example: caching the element and changing its class
const element = document.querySelector('.my-element');
element.classList.add('active');

// Bad example: accessing the DOM repeatedly
for (let i = 0; i < 10; i++) {
    const element = document.getElementById(`element-${i}`);
    element.style.color = 'red';
}

// Good example: caching the elements
const elements = [];

for (let i = 0; i < 10; i++) {
    elements[i] = document.getElementById(`element-${i}`);
}

for (const element of elements) {
    element.style.color = 'red';
}

// Bad example: adding an event listener to every element
const buttons = document.querySelectorAll('button');

for (const button of buttons) {
    button.addEventListener('click', () => {
        console.log('Button clicked!');
    });
}

// Good example: using event delegation
const container = document.querySelector('.container');
container.addEventListener('click', event => {
    if (event.target.tagName === 'BUTTON') {
        console.log('Button clicked!');
    }
});

// Bad example: using string concatenation
const firstName = 'John';
const lastName = 'Doe';
const fullName = firstName + ' ' + lastName;

// Good example: using template literals
const firstName = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;

// Original code
function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet('John');

// Compiled code with Closure Compiler
function a(b) {
    console.log('Hello, ' + b + '!');
}
a('John');