Day 2 - JavaScript Essential Training
Tags: javascript, linkedinlearning, jstips, developer
Published: 2024-07-11 23:03:36

## 1. 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!💻