Complete JavaScript Guide: Basics to Advanced
1. Introduction to JavaScript
**Definition:** JavaScript is a versatile programming language used for web development, game
development, and backend services.
**How to Include JavaScript in HTML:**
```html
<script>
console.log('Hello, JavaScript!');
</script>
```
2. Data Types in JavaScript
**Definition:** JavaScript has two categories of data types:
**1. Primitive Data Types** (Immutable values)
**2. Non-Primitive (Reference) Data Types**
**Primitive Data Types:**
```javascript
// 1. Number
let num = 100;
// 2. String
let text = 'Hello World';
// 3. Boolean
let isActive = true;
// 4. Null
let emptyValue = null;
// 5. Undefined
let notDefined;
// 6. Symbol
let uniqueId = Symbol('id');
```
**Non-Primitive Data Types:**
```javascript
// 1. Object
let person = { name: 'Alice', age: 25 };
// 2. Array
let numbers = [1, 2, 3, 4, 5];
// 3. Function
function greet() {
return 'Hello!';
}
```
3. Operators in JavaScript
**Definition:** Operators perform operations on variables and values.
**Types of Operators:**
```javascript
// Arithmetic Operators
let sum = 5 + 3;
let product = 5 * 3;
// Comparison Operators
console.log(5 == '5'); // true (Loose equality)
console.log(5 === '5'); // false (Strict equality)
// Logical Operators
let isAvailable = true && false; // false
let isNotAvailable = !isAvailable; // true
```
4. Control Statements: If, Else, Switch
**Definition:** Control flow statements help execute code based on conditions.
**Syntax:**
```javascript
// If-Else
if (age >= 18) {
console.log('You are an adult');
} else {
console.log('You are a minor');
}
```
**Switch Case:**
```javascript
let day = 'Monday';
switch (day) {
case 'Monday':
console.log('Start of the week');
break;
default:
console.log('Another day');
}
```
5. Functions in JavaScript
**Definition:** Functions are reusable blocks of code.
**Syntax:**
```javascript
// Function Declaration
function greet(name) {
return 'Hello, ' + name;
}
console.log(greet('Alice'));
// Arrow Function
const add = (a, b) => a + b;
console.log(add(3, 5));
```
6. Objects in JavaScript
**Definition:** Objects are collections of key-value pairs.
**Syntax:**
```javascript
let person = {
name: 'Alice',
age: 25,
greet: function() {
return 'Hello, ' + this.name;
}
};
console.log(person.greet());
```
7. Asynchronous JavaScript (Callbacks, Promises, Async/Await)
**Definition:** Asynchronous programming allows tasks to run without blocking execution.
**Syntax:**
```javascript
// Callback Example
function fetchData(callback) {
setTimeout(() => callback('Data received'), 2000);
}
fetchData(console.log);
// Promise Example
let promise = new Promise((resolve) => {
setTimeout(() => resolve('Promise resolved!'), 2000);
});
promise.then(console.log);
// Async/Await Example
async function fetchData() {
let response = await fetch('https://jsonplaceholder.typicode.com/posts');
let data = await response.json();
console.log(data);
}
fetchData();
```
8. Error Handling in JavaScript
**Definition:** JavaScript handles errors using `try...catch` blocks.
**Syntax:**
```javascript
try {
let result = someUndefinedVariable;
} catch (error) {
console.log('Error caught:', error.message);
}
```
9. ES6 Features in JavaScript
**Definition:** ES6 (ECMAScript 2015) introduced new JavaScript features.
**Key Features:**
```javascript
// 1. Let & Const
let name = 'John';
const PI = 3.14;
// 2. Template Literals
let message = `Hello, ${name}`;
// 3. Destructuring
let [a, b] = [1, 2];
// 4. Spread Operator
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
// 5. Default Parameters
function greet(name = 'Guest') {
return `Hello, ${name}`;
}
```
