0% found this document useful (0 votes)
3 views

webdev report

Uploaded by

ronncalunsages
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views

webdev report

Uploaded by

ronncalunsages
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Absolutely! I'll include an explanation of `console.log` in the script.

Here's the updated version:

---

**Slide 1: Introduction to JavaScript Array Sorting Methods**

*Script:*

"Welcome, everyone. Today, we'll be exploring various methods for sorting arrays in JavaScript. Sorting
is a fundamental operation in programming that helps us manage and display data efficiently. Before we
dive into the sorting methods, let's briefly talk about ECMAScript, which is the specification that
JavaScript is based on.

**ECMAScript** is a scripting language specification standardized by the European Computer


Manufacturers Association (ECMA). It ensures that JavaScript has consistent and predictable behavior
across different environments. ECMAScript versions include ES6 (2015), ES2019, and ES2023, each
bringing new features and improvements to JavaScript."

---

**Slide 2: Alphabetic Sort**

*Script:*

"First, we have the `sort()` method, which sorts an array alphabetically. Here’s an example with fruits:

```javascript

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

console.log(fruits); // Output: ["Apple", "Banana", "Mango", "Orange"]

```

The `sort()` method rearranges the array elements in alphabetical order. This method modifies the
original array. The `console.log` function is used to print the sorted array to the console, allowing us to
see the result."
---

**Slide 3: Reversing an Array**

*Script:*

"Next, the `reverse()` method. It reverses the elements in an array. For example:

```javascript

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();

console.log(fruits); // Output: ["Mango", "Apple", "Orange", "Banana"]

```

This method also modifies the original array. By combining `sort()` and `reverse()`, you can sort an array
in descending order:

```javascript

const fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.sort();

fruits.reverse();

console.log(fruits); // Output: ["Orange", "Mango", "Banana", "Apple"]

```

Here, we first sort the array alphabetically and then reverse the order. Again, `console.log` is used to
display the final sorted array in the console."

---

**Slide 4: New Methods (ES2023)**

*Script:*

"ES2023 introduced two new methods: `toSorted()` and `toReversed()`. Unlike `sort()` and `reverse()`,
these methods do not alter the original array.
For `toSorted()`:

```javascript

const months = ["Jan", "Feb", "Mar", "Apr"];

const sorted = months.toSorted();

console.log(sorted); // Output: ["Apr", "Feb", "Jan", "Mar"]

console.log(months); // Output: ["Jan", "Feb", "Mar", "Apr"] (original array unchanged)

```

For `toReversed()`:

```javascript

const months = ["Jan", "Feb", "Mar", "Apr"];

const reversed = months.toReversed();

console.log(reversed); // Output: ["Apr", "Mar", "Feb", "Jan"]

console.log(months); // Output: ["Jan", "Feb", "Mar", "Apr"] (original array unchanged)

```

These methods create new arrays with the sorted or reversed elements, preserving the original array.
`console.log` helps us verify the outputs by displaying the new and original arrays."

---

**Slide 5: Numeric Sort**

*Script:*

"By default, `sort()` sorts values as strings. This can be problematic with numbers. For example:

```javascript

const points = [40, 100, 1, 5, 25, 10];

points.sort();

console.log(points); // Output: [1, 10, 100, 25, 40, 5]

```
Here, '100' comes before '5' because it compares strings.

To sort numbers correctly, use a compare function:

```javascript

points.sort((a, b) => a - b); // Ascending

console.log(points); // Output: [1, 5, 10, 25, 40, 100]

points.sort((a, b) => b - a); // Descending

console.log(points); // Output: [100, 40, 25, 10, 5, 1]

```

The compare function ensures numerical sorting. `console.log` displays the sorted arrays for us to see
the correct order."

---

**Slide 6: Random Sort**

*Script:*

"To sort an array in random order, you can use:

```javascript

points.sort(() => 0.5 - Math.random());

console.log(points); // Output: [25, 1, 100, 10, 5, 40] (example output, will vary each time)

```

However, this method isn't perfectly accurate. For a more reliable shuffle, use the Fisher-Yates method:

```javascript

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length - 1; i > 0; i--) {

let j = Math.floor(Math.random() * (i + 1));

[points[i], points[j]] = [points[j], points[i]];


}

console.log(points); // Output: [10, 40, 1, 100, 5, 25] (example output, will vary each time)

```

This correctly shuffles the array. `console.log` allows us to see the shuffled array."

---

**Slide 7: Finding Min/Max Values**

*Script:*

"To find the minimum or maximum value in an array, you can sort the array and check the first or last
element:

```javascript

points.sort((a, b) => a - b);

const min = points[0];

const max = points[points.length - 1];

console.log(min, max); // Output: 1, 100

```

Or use `Math.min()` and `Math.max()` with `apply`:

```javascript

console.log(Math.min.apply(null, points)); // Output: 1

console.log(Math.max.apply(null, points)); // Output: 100

```

For custom functions, you can loop through the array:

```javascript

function myArrayMin(arr) {

let min = Infinity;

arr.forEach(num => { if (num < min) min = num; });

return min;
}

function myArrayMax(arr) {

let max = -Infinity;

arr.forEach(num => { if (num > max) max = num; });

return max;

console.log(myArrayMin(points)); // Output: 1

console.log(myArrayMax(points)); // Output: 100

```

These methods ensure you get the correct minimum and maximum values. Using `console.log`, we can
print and verify these values."

---

**Slide 8: Sorting Object Arrays**

*Script:*

"JavaScript arrays often contain objects. To sort by a numeric property:

```javascript

const cars = [{ type: 'Volvo', year: 2016 }, { type: 'Saab', year: 2001 }, { type: 'BMW', year: 2010 }];

cars.sort((a, b) => a.year - b.year);

console.log(cars); // Output: [{type: 'Saab', year: 2001}, {type: 'BMW', year: 2010}, {type: 'Volvo', year:
2016}]

```

To sort by a string property:

```javascript

cars.sort((a, b) => a.type.localeCompare(b.type));

console.log(cars); // Output: [{type: 'BMW', year: 2010}, {type: 'Saab', year: 2001}, {type: 'Volvo', year:
2016}]
```

This way, you can sort objects based on their properties. `console.log` helps us to see the sorted
objects."

---

**Slide 9: Stable Sorting (ES2019)**

*Script:*

"ES2019 revised the `sort()` method to use a stable sorting algorithm, ensuring elements with the same
value retain their relative positions. For example:

```javascript

const items = [{ name: 'X00', price: 100 }, { name: 'X01', price: 100 }, { name: 'X02', price: 100 }];

items.sort((a, b) => a.price - b.price);

console.log(items); // Output: [{name: 'X00', price: 100}, {name: 'X01', price: 100}, {name: 'X02', price:
100}]

```

This guarantees consistent sorting results. `console.log` allows us to verify the stable sorting."

---

**Slide 10: Conclusion**

*Script:*

"In conclusion, JavaScript offers various methods to sort arrays, each with specific functionalities and use
cases. Understanding these methods helps manage data effectively, whether sorting alphabetically,
numerically, or shuffling randomly. Thank you for your attention, and I hope this overview enhances
your understanding of JavaScript array sorting methods."

---
Feel free to adjust the script as needed to match your presentation style and the specific details you
want to emphasize. 📊✨

You might also like