Differences

This shows you the differences between two versions of the page.

--- java-script:map-method [2023/08/11 16:14] – removed - external edit (Unknown date) 127.0.0.1
+++ java-script:map-method [2023/08/11 16:20] (current) – odefta
@@ Line 1: / Line 1: @@
+====== Java Script Map Method======
+Map is a very common and useful method for creating a new array from an existing one by applying a function to every element. \\
+Syntax:
+<code javascript>
+const newArray = oldArray.map(function(currentValue, index, array) {
+  // Return element for newArray
+});
+</code>
+**currentValue**: The current value being processed. \\
+**index** (Optional): The index of the current value being processed. \\
+**array** (Optional): The original array.
+<note>
+The map method doesn't change the original array but **returns a new array**. It's a pure function (assuming the provided mapping function is pure), and it's an essential part of functional programming in JavaScript.
+</note>
+===== Example 1 =====
+<code javascript>
+const numbers = [1, 2, 3, 4, 5];
+const squares = numbers.map(number => number * number);
+console.log(squares); // [1, 4, 9, 16, 25]
+</code>
+===== Example 2 =====
+Transform an array of strings into an array of objects:
+<code javascript>
+const strings = ['Apple', 'Banana', 'Cherry'];
+const objects = strings.map((str, index) => {
+  return { name: str, id: index };
+});
+console.log(objects);
+</code>
+We can also use an [[java-script:arrow-function-implicit-return|implicit return]] here:
+<code javascript>
+const strings = ['Apple', 'Banana', 'Cherry'];
+const objects = strings.map((str, index) => ({ name: str, id: index }));
+console.log(objects);
+</code>
+Output:
+<code javascript>
+[
+  { name: 'Apple', id: 0 },
+  { name: 'Banana', id: 1 },
+  { name: 'Cherry', id: 2 }
+]
+</code>
+===== Example 3 =====
+Imagine we have a collection of products, and we want to apply a discount to the products in even-indexed positions (0, 2, 4, etc.), and we want to calculate the average price before applying the discount. We'll make use of the value, index, and array parameters to accomplish this:
+<code javascript>
+const products = [
+  { name: 'Laptop', price: 1000 },
+  { name: 'Phone', price: 500 },
+  { name: 'Tablet', price: 300 },
+  { name: 'Monitor', price: 200 },
+  { name: 'Keyboard', price: 50 },
+];
+const averagePrice = products.reduce((sum, product) => sum + product.price, 0) / products.length;
+const discountedProducts = products.map((product, index, array) => {
+  if (index % 2 === 0 && array.length > 2) {
+    return {
+      name: product.name,
+      price: product.price - averagePrice * 0.1, // 10% of average price discount
+    };
+  }
+  return product;
+});
+console.log(discountedProducts);
+</code>
+Output is:
+<code javascript>
+[
+  { name: 'Laptop', price: 860 },
+  { name: 'Phone', price: 500 },
+  { name: 'Tablet', price: 240 },
+  { name: 'Monitor', price: 200 },
+  { name: 'Keyboard', price: 50 }
+]
+</code>
+Here, products at even indexes get a discount of 10% of the average price of all products. The **array** parameter is used to check that there are more than two products to ensure the average price calculation makes sense in context, and the **index** parameter is used to select the items to discount.
+Here's how it works:
+  * The average price of the products is (1000 + 500 + 300 + 200 + 50) / 5 = 410.
+  * The 10% discount of the average price is 410 * 0.1 = 40.
+  * This discount is applied to every second product in the array (i.e., the products at index 0, 2, etc.), so the final prices of the 'Laptop' and 'Tablet' are reduced by 40, resulting in the above output.
+===== Example 4 =====
+Transform an array of objects into an array of strings:
+<code javascript>
+const courses = [
+    { name: 'JavaScript Fundamentals' },
+    { name: 'Angular CLI Basics' },
+    { name: 'JavaScript Fundamentals' },
+    { name: 'JavaScript Fundamentals' },
+];
+const coursesAsArray = courses.map(entry => entry.name);
+console.table(coursesAsArray);
+</code>