Skip to content

Commit 7bf5121

Browse files
Evavic44Evavic44
committed
complete data-transformations (maps, filter & reduce) section
1 parent c163917 commit 7bf5121

File tree

5 files changed

+200
-128
lines changed

5 files changed

+200
-128
lines changed

‎11_Working_with_Arrays/README.md‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,32 @@ The names does not matter but the order has to be `element, index, array`
175175
`for of (index, element)`
176176
`forEach (element, index, array)`
177177
178-
## forEach or for of Loop?
178+
### forEach or for of Loop?
179179
180180
- The forEach method does not have the `continue` and `break` keywords, so use the for of loop if you absolutely want to break or continue a looping operation.
181+
182+
# Data Transformations (Maps, Filter & Reduce)
183+
184+
The Map, Filter, and Reduce array methods are the three biggest array methods in JavaScript for data transformations. They allow us manipulate and change arrays and store them into newer arrays.
185+
186+
In recent years, these tools have become really popular because of their importance.
187+
188+
## Map Method (Array.prototype.map())
189+
190+
The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array.
191+
192+
This method is similar to the `forEach` method but the difference is that the `Map` methods creates a brand new array based on the original array.
193+
194+
![map](https://user-images.githubusercontent.com/62628408/226436590-6e16b20e-89b4-4e7f-883e-cef00552d67a.png)
195+
196+
## Filter Method (Array.prototype.filter())
197+
198+
The `filter()` method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function (a certain condition).
199+
200+
![filter](https://user-images.githubusercontent.com/62628408/226436576-7fa26cd8-0f97-42e0-9f01-4acd6eafe9e3.png)
201+
202+
## Reduce Method (Array.prototype.reduce())
203+
204+
The `reduce()` method executes a 'reducer' callback function on each element of an array and returns the sum of all the elements in the array to a single value.
205+
206+
![reduce](https://user-images.githubusercontent.com/62628408/226436582-8618c570-cb79-40b4-b1dd-096320b5b385.png)

‎11_Working_with_Arrays/challenge.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
------------Coding Challenge 1------------
3+
4+
Julia and Kate are doing a study on dogs. So each of them asked 5 dog owners about their dog's age, and stored the data into an array (one array for each). For now, they are just interested in knowing wether a dog is an adult or a puppy. A dog is an adult if it is at least 3 years old, and it's a puppy if it's less than 3 years old.
5+
6+
Create a function `checkDogs`, which accepts 2 arrays of dog's ages (`dogJulia` and `dogKate`), and does the following things:
7+
8+
1. Julia found out that the owners of the FIRST and the LAST two dogs actually have cats, not dogs! So create a shallow copy of Julia's array, and remove the cat ages from that copied array (because it's bad practice to mutate function parameters)
9+
10+
2. Create an array with both Julia's (corrected) and kate's data
11+
3. For each remaining dog, log to the console wether it's an adult ('Dog number 1 is an adult, and is 5 years old') or a puppy ('Dog number 2 is still a puppy 🐶')
12+
4. Run the function for both test datasets.
13+
14+
HINT: Use tools from all lectures in this section so far. 🙂
15+
16+
TEST DATA 1:
17+
-- Julia's data [3, 5, 2, 12, 17],
18+
-- Kate's data [4, 1, 15, 8, 3],
19+
20+
TEST DATA 2:
21+
-- Julia's data [9, 16, 6, 8, 3],
22+
-- Kate's data [10, 5, 6, 1, 4],
23+
24+
GOOD LUCK 🙂
25+
*/
26+
27+
const checkDogs = function (dogJulia, dogKate) {
28+
const dogJuliaCorrected = dogJulia.slice(1, -2);
29+
const dogsJoined = dogJuliaCorrected.concat(dogKate);
30+
console.log(dogsJoined);
31+
dogsJoined.forEach(function (dogAge, id) {
32+
if (dogAge >= 3) {
33+
console.log(
34+
`Dog number ${id + 1} is an adult, and is ${dogAge} years old`
35+
);
36+
} else {
37+
console.log(`Dog number ${id + 1} is still a puppy 🐶`);
38+
}
39+
});
40+
};
41+
42+
checkDogs([3, 5, 2, 12, 17], [4, 1, 15, 8, 3]);
43+
console.log('TEST DATA 2');
44+
checkDogs([9, 16, 6, 8, 3], [10, 5, 6, 1, 4]);

‎11_Working_with_Arrays/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<link rel="shortcut icon" type="image/png" href="/icon.png" />
88
<link
9-
href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic"
9+
href="https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900"
1010
rel="stylesheet"
1111
/>
1212
<link rel="stylesheet" href="style.css" />
@@ -22,7 +22,7 @@ <h2 class="welcome">Log in to get started</h2>
2222
Enter Username
2323
<input
2424
type="text"
25-
placeholder="Username"
25+
placeholder="JS"
2626
id="username"
2727
required
2828
class="login__input login__input--user"
@@ -33,22 +33,22 @@ <h2 class="welcome">Log in to get started</h2>
3333
Enter Pin
3434
<input
3535
type="text"
36-
placeholder="Pin"
36+
placeholder="1111"
3737
id="pin"
3838
required
3939
maxlength="4"
4040
class="login__input login__input--pin"
4141
/>
4242
</label>
43-
<button class="login__btn">Log in</button>
43+
<button class="login__btn">Log In</button>
4444
</form>
4545
</nav>
4646

4747
<main class="app">
4848
<!-- BALANCE -->
4949
<div class="balance">
5050
<div>
51-
<p class="balance__label">Current balance</p>
51+
<h2 class="balance__label">Current Balance</h2>
5252
<p class="balance__date">
5353
As of <span class="date">05/03/2037</span>
5454
</p>

‎11_Working_with_Arrays/script.js‎

Lines changed: 98 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,26 @@ const inputLoanAmount = document.querySelector('.form__input--loan-amount');
6161
const inputCloseUsername = document.querySelector('.form__input--user');
6262
const inputClosePin = document.querySelector('.form__input--pin');
6363

64+
const displayMovements = function (movements) {
65+
containerMovements.innerHTML = 0;
66+
67+
movements.forEach(function (mov, i) {
68+
const type = mov > 0 ? 'deposit' : 'withdrawal';
69+
70+
const html = `
71+
<div class="movements__row">
72+
<div class="movements__type movements__type--${type}">${
73+
i + 1
74+
} ${type}</div>
75+
<div class="movements__value">${mov}</div>
76+
</div>
77+
`;
78+
79+
containerMovements.insertAdjacentHTML('afterbegin', html);
80+
});
81+
};
82+
displayMovements(account1.movements);
83+
6484
/////////////////////////////////////////////////
6585
/////////////////////////////////////////////////
6686
// LECTURES
@@ -75,81 +95,81 @@ const currencies = new Map([
7595

7696
/////////////////////////////////////////////////
7797

78-
// SLICE
79-
console.log('🔸 SLICE 🔸');
80-
let arr = ['a', 'b', 'c', 'd', 'e'];
81-
console.log(arr.slice(2)); // ['c', 'd', 'e']
82-
console.log(arr.slice(2, 4)); // ['c', 'd']
83-
console.log(arr.slice(-2)); // Last two elements ['d', 'e']
84-
console.log(arr.slice(-1)); // Last element of the array ['e']
85-
console.log(arr.slice(1, -2)); // ['b', 'c']
86-
console.log(arr.slice()); // ['a', 'b', 'c', 'd', 'e']
87-
console.log([...arr]); // ['a', 'b', 'c', 'd', 'e']
88-
89-
console.log('🔸 SPLICE 🔸');
90-
// SPLICE
91-
// console.log(arr.splice(2)); // ['c', 'd', 'e']
92-
// console.log(arr); // leftover elements after splice ['a', 'b']
93-
// console.log(arr.splice(1, 2)); // ['b', 'c']
94-
// console.log(arr.splice(-1)); // returns last ['a', 'b' 'c', 'd']
95-
// console.log(arr); // returns mutated array without last element ['a', 'b', 'c' 'd']
96-
97-
arr.splice(1, 2);
98-
console.log(arr); // ['b', 'c'] extract 2 elements starting from position [1].
99-
100-
// REVERSE
101-
arr = ['a', 'b', 'c', 'd', 'e'];
102-
const arr2 = ['j', 'i', 'h', 'g', 'f'];
103-
console.log(arr2.reverse()); // ['f', 'g', 'h', 'i', 'j']
104-
console.log(arr2); // ['f', 'g', 'h', 'i', 'j']
105-
106-
// CONCAT
107-
const joinedArr = arr.concat(arr2);
108-
console.log(joinedArr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
109-
console.log([...arr, ...arr2]); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
110-
111-
// JOIN
112-
console.log(joinedArr.join(' - '));
113-
114-
// 🔸 Looping Arrays forEach 🔸
115-
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
116-
117-
// Looping using for of loop
118-
for (const transactions of movements) {
119-
transactions < 1
120-
? console.log(`You withdrew ${Math.abs(transactions)}`)
121-
: console.log(`You deposited ${transactions}`);
122-
}
123-
124-
// Used the `Math.abs` method to provide only the absolute value and remove any commas.
125-
126-
// Looping using forEach
127-
console.log('🔸 forEach 🔸');
128-
movements.forEach(function (transactions) {
129-
transactions < 1
130-
? console.log(`You withdrew ${Math.abs(transactions)}`)
131-
: console.log(`You deposited ${transactions}`);
132-
});
133-
// 0: function(200)
134-
// 1: function(450)
135-
// 2: function(400)
136-
// ...
137-
138-
// Accessing Index in for of loop
139-
console.log('🔸 Accessing index in for of loop 🔸');
140-
for (const [i, transact] of movements.entries()) {
141-
transact < 1
142-
? console.log(`Transaction ${i}: You withdrew ${Math.abs(transact)}`)
143-
: console.log(`Transaction ${i}: You deposited ${transact}`);
144-
}
145-
146-
// Accessing Index in forEach method
147-
console.log('🔸 Accessing index in forEach 🔸');
148-
movements.forEach(function (transaction, i, array) {
149-
transaction < 1
150-
? console.log(
151-
`Transaction ${i}: You withdrew ${Math.abs(transaction)}`,
152-
array
153-
)
154-
: console.log(`Transaction ${i}: You deposited ${transaction}`, array);
155-
});
98+
// // SLICE
99+
// console.log('🔸 SLICE 🔸');
100+
// let arr = ['a', 'b', 'c', 'd', 'e'];
101+
// console.log(arr.slice(2)); // ['c', 'd', 'e']
102+
// console.log(arr.slice(2, 4)); // ['c', 'd']
103+
// console.log(arr.slice(-2)); // Last two elements ['d', 'e']
104+
// console.log(arr.slice(-1)); // Last element of the array ['e']
105+
// console.log(arr.slice(1, -2)); // ['b', 'c']
106+
// console.log(arr.slice()); // ['a', 'b', 'c', 'd', 'e']
107+
// console.log([...arr]); // ['a', 'b', 'c', 'd', 'e']
108+
109+
// console.log('🔸 SPLICE 🔸');
110+
// // SPLICE
111+
// // console.log(arr.splice(2)); // ['c', 'd', 'e']
112+
// // console.log(arr); // leftover elements after splice ['a', 'b']
113+
// // console.log(arr.splice(1, 2)); // ['b', 'c']
114+
// // console.log(arr.splice(-1)); // returns last ['a', 'b' 'c', 'd']
115+
// // console.log(arr); // returns mutated array without last element ['a', 'b', 'c' 'd']
116+
117+
// arr.splice(1, 2);
118+
// console.log(arr); // ['b', 'c'] extract 2 elements starting from position [1].
119+
120+
// // REVERSE
121+
// arr = ['a', 'b', 'c', 'd', 'e'];
122+
// const arr2 = ['j', 'i', 'h', 'g', 'f'];
123+
// console.log(arr2.reverse()); // ['f', 'g', 'h', 'i', 'j']
124+
// console.log(arr2); // ['f', 'g', 'h', 'i', 'j']
125+
126+
// // CONCAT
127+
// const joinedArr = arr.concat(arr2);
128+
// console.log(joinedArr); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
129+
// console.log([...arr, ...arr2]); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
130+
131+
// // JOIN
132+
// console.log(joinedArr.join(' - '));
133+
134+
// // 🔸 Looping Arrays forEach 🔸
135+
// const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
136+
137+
// // Looping using for of loop
138+
// for (const transactions of movements) {
139+
// transactions < 1
140+
// ? console.log(`You withdrew ${Math.abs(transactions)}`)
141+
// : console.log(`You deposited ${transactions}`);
142+
// }
143+
144+
// // Used the `Math.abs` method to provide only the absolute value and remove any commas.
145+
146+
// // Looping using forEach
147+
// console.log('🔸 forEach 🔸');
148+
// movements.forEach(function (transactions) {
149+
// transactions < 1
150+
// ? console.log(`You withdrew ${Math.abs(transactions)}`)
151+
// : console.log(`You deposited ${transactions}`);
152+
// });
153+
// // 0: function(200)
154+
// // 1: function(450)
155+
// // 2: function(400)
156+
// // ...
157+
158+
// // Accessing Index in for of loop
159+
// console.log('🔸 Accessing index in for of loop 🔸');
160+
// for (const [i, transact] of movements.entries()) {
161+
// transact < 1
162+
// ? console.log(`Transaction ${i}: You withdrew ${Math.abs(transact)}`)
163+
// : console.log(`Transaction ${i}: You deposited ${transact}`);
164+
// }
165+
166+
// // Accessing Index in forEach method
167+
// console.log('🔸 Accessing index in forEach 🔸');
168+
// movements.forEach(function (transaction, i, array) {
169+
// transaction < 1
170+
// ? console.log(
171+
// `Transaction ${i}: You withdrew ${Math.abs(transaction)}`,
172+
// array
173+
// )
174+
// : console.log(`Transaction ${i}: You deposited ${transaction}`, array);
175+
// });

0 commit comments

Comments
 (0)