Skip to content

Commit

Permalink
advancements
Browse files Browse the repository at this point in the history
  • Loading branch information
FX committed Aug 10, 2024
1 parent 82183fe commit 792c973
Show file tree
Hide file tree
Showing 3 changed files with 759 additions and 0 deletions.
242 changes: 242 additions & 0 deletions Arrays/Advanced/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
## **JavaScript Arrays Course**

### **1. Introduction to Arrays**

**Definition:** An array is a special type of object in JavaScript used to store multiple values in a single variable. Arrays are ordered collections where each item is accessible by its index.

**Syntax:**

```javascript
let array = [element1, element2, element3, ...];
```

**Examples:**

```javascript
let fruits = ['Apple', 'Banana', 'Cherry']
let numbers = [1, 2, 3, 4, 5]
```

### **2. Creating Arrays**

**Using Array Literals:**

```javascript
let colors = ['Red', 'Green', 'Blue']
```

**Using the Array Constructor:**

```javascript
let emptyArray = new Array()
let numbers = new Array(1, 2, 3, 4, 5) // Array with specific elements
let lengthArray = new Array(10) // Array with 10 empty slots
```

### **3. Accessing and Modifying Arrays**

**Accessing Elements:**

```javascript
let fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits[0]) // "Apple"
console.log(fruits[2]) // "Cherry"
```

**Modifying Elements:**

```javascript
fruits[1] = 'Blueberry'
console.log(fruits) // ["Apple", "Blueberry", "Cherry"]
```

**Array Length:**

```javascript
let numbers = [1, 2, 3, 4, 5]
console.log(numbers.length) // 5
```

### **4. Array Methods**

**Adding and Removing Elements:**

- `push(element1, element2, ...)` – Adds elements to the end of an array.
- `pop()` – Removes the last element from an array.
- `unshift(element1, element2, ...)` – Adds elements to the beginning of an array.
- `shift()` – Removes the first element from an array.

**Examples:**

```javascript
let numbers = [1, 2, 3]
numbers.push(4) // [1, 2, 3, 4]
numbers.pop() // [1, 2, 3]
numbers.unshift(0) // [0, 1, 2, 3]
numbers.shift() // [1, 2, 3]
```

**Finding Elements:**

- `indexOf(element)` – Returns the first index at which a given element can be found.
- `includes(element)` – Checks if an array contains a specified element.

**Examples:**

```javascript
let fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits.indexOf('Banana')) // 1
console.log(fruits.includes('Cherry')) // true
```

**Iterating Over Arrays:**

- `forEach(callback)` – Executes a provided function once for each array element.
- `map(callback)` – Creates a new array with the results of calling a function on every element.
- `filter(callback)` – Creates a new array with all elements that pass the test implemented by the provided function.
- `reduce(callback, initialValue)` – Applies a function against an accumulator and each element to reduce it to a single value.

**Examples:**

```javascript
let numbers = [1, 2, 3, 4, 5]

numbers.forEach(num => console.log(num)) // Logs each number

let squared = numbers.map(num => num * num) // [1, 4, 9, 16, 25]

let evenNumbers = numbers.filter(num => num % 2 === 0) // [2, 4]

let sum = numbers.reduce((acc, num) => acc + num, 0) // 15
```

**Sorting and Reversing:**

- `sort(compareFunction)` – Sorts the elements of an array in place and returns the array.
- `reverse()` – Reverses the elements of an array in place.

**Examples:**

```javascript
let numbers = [4, 2, 5, 1, 3]
numbers.sort() // [1, 2, 3, 4, 5]

let letters = ['b', 'a', 'c']
letters.reverse() // ["c", "a", "b"]
```

### **5. Advanced Array Methods**

**Joining and Splitting:**

- `join(separator)` – Joins all elements of an array into a string.
- `split(separator)` – Splits a string into an array of substrings.

**Examples:**

```javascript
let fruits = ['Apple', 'Banana', 'Cherry']
let fruitString = fruits.join(', ') // "Apple, Banana, Cherry"

let string = 'Red, Green, Blue'
let colors = string.split(', ') // ["Red", "Green", "Blue"]
```

**Array of Arrays (Multidimensional Arrays):**

```javascript
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
]

console.log(matrix[1][2]) // 6
```

**Flattening Arrays:**

- `flat(depth)` – Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

**Examples:**

```javascript
let nestedArray = [1, [2, [3, 4]], 5]
let flatArray = nestedArray.flat(2) // [1, 2, 3, 4, 5]
```

### **6. Real-World Usage of Arrays**

**1. Managing User Data:**

```javascript
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 },
]

let names = users.map(user => user.name) // ["Alice", "Bob", "Charlie"]
```

**2. Handling Dynamic Lists:**

```javascript
let tasks = []

function addTask(task) {
tasks.push(task)
}

function removeTask(index) {
tasks.splice(index, 1)
}

addTask('Buy groceries')
addTask('Clean the house')
console.log(tasks) // ["Buy groceries", "Clean the house"]
removeTask(0)
console.log(tasks) // ["Clean the house"]
```

**3. Data Transformation and Visualization:**

```javascript
let sales = [200, 300, 250, 400, 500]
let totalSales = sales.reduce((total, sale) => total + sale, 0) // 1650
let averageSales = totalSales / sales.length // 330

console.log(`Total Sales: ${totalSales}`)
console.log(`Average Sales: ${averageSales}`)
```

**4. Filtering and Sorting Data:**

```javascript
let products = [
{ name: 'Laptop', price: 999 },
{ name: 'Smartphone', price: 599 },
{ name: 'Tablet', price: 399 },
]

let affordableProducts = products.filter(product => product.price < 600) // Products with price less than 600
let sortedProducts = products.sort((a, b) => a.price - b.price) // Sort by price
```

### **7. Performance Considerations**

**1. Avoiding Array Reallocation:**

- Use `push` and `pop` instead of `concat` to avoid frequent reallocation.

**2. Efficient Search:**

- Use `Set` or `Map` for faster lookups if you need to frequently check for the existence of an element.

**3. Minimizing Side Effects:**

- Prefer functional methods like `map`, `filter`, and `reduce` to avoid mutating the original array.

### **8. Conclusion**

Arrays are a fundamental and versatile data structure in JavaScript. Understanding how to use array methods effectively will help you manage and manipulate collections of data efficiently. From basic operations to advanced techniques, mastering arrays will enable you to tackle a wide range of programming tasks and build robust applications.
Loading

0 comments on commit 792c973

Please sign in to comment.