JS Basic - Modern vs. Traditional Ways

Modern JS Loading

Async vs. Defer

When adding scripts to the head of your HTML document, it's crucial to ensure they don't block the page rendering. This is where async and defer attributes come into play.

• Async: Scripts with async load in parallel with the HTML parsing and execute as soon as they’re downloaded. Use async for scripts that don't rely on others or the DOM.
  <script src="example.js" async></script>

• Defer: Scripts with defer also load in parallel but execute in the order they appear in the document after the HTML is fully parsed. Use defer for scripts that depend on the DOM or other scripts.
  <script src="example.js" defer></script>

2. Use of type="module"

Using type="module" allows you to leverage ES6 modules, enabling better organization and modularization of your code.

• Modules: By using type="module", you can import and export functions, objects, or primitives between different files. This makes your code more maintainable and reusable.

<script type="module">
  import { myFunction } from './module.js';
  myFunction();
</script>

3. Use of Object

Objects are fundamental in JavaScript for storing collections of data and more complex entities.

• Object Syntax: An object is a collection of key-value pairs, where values can be properties or methods.

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};
person.greet();

4. Class + Constructor

ES6 introduced classes, providing a clearer and more concise syntax for creating objects and handling inheritance.

• Class and Constructor: A class in JavaScript is essentially a blueprint for creating objects, and the constructor method initializes new objects.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const john = new Person('John', 30);
john.greet(); 

5. Extends + Super

Classes can extend other classes, inheriting their properties and methods. The super keyword is used to call the constructor of the parent class.

• Extends and Super: This allows for hierarchical class structures and code reuse.

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }
  work() {
    console.log(`${this.name} is working as a ${this.jobTitle}`);
  }
}
const jane = new Employee('Jane', 28, 'Software Developer');
jane.greet(); 
jane.work();

6. getElementById() → querySelector() & getElementsByClassName() → querySelectorAll()

Modern JavaScript provides more powerful and flexible ways to select DOM elements.

• querySelector() and querySelectorAll(): These methods allow you to use CSS selectors, providing a consistent and concise way to select elements.

// Old way
const elementById = document.getElementById('myId');
const elementsByClassName = document.getElementsByClassName('myClass');

// New way
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');

The modern methods are preferred because they provide a more uniform way to select elements and support complex selectors.

Conclusion

Today's exploration of JavaScript concepts like async/defer, modules, objects, classes, and modern DOM methods has been enlightening. These concepts are crucial for writing efficient, organized, and maintainable code.

I hope this summary helps all readers remember these key points, including me when I'll come back here to recall them in the future. Stay tuned for more updates as I continue my journey towards full-stack development.

Happy coding!💻