codeup-web-exercises/map-filter-reduce.html at main · John-Alejandro/codeup-web-exercises · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map ~ Filter ~ Reduce</title>
</head>
<body>

<script>

//~ * Map * ~

//TODO Together: Let's see a common approach we might have done in the past: our goal is to increase each element of an array by 1 [element + 1], then get an array back with those values

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var numbersAddOne = [];

for (var i = 0; i < numbers.length; i += 1) {
    numbersAddOne.push(numbers[i] + 1);
}
// console.log(numbersAddOne); // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

//TODO Together: Now, let's achieve the same result with the first part of our lesson: the MAP method~

let numbersAddOneMap = numbers.map(function (number) {
    return number + 1;
})

console.log(numbersAddOneMap);
//As you can see, .map() accepts a callback function - that callback function is applied to each element in the collection. What about a dive into a deeper, more complicated collection?

const favoriteRestaurants = [
    {
        name: "India Palace",
        address: "8474 Fredericksburg Rd, San Antonio, TX 78229",
        phone: "(210) 692-5262",
        restaurantFeatures: ["buffet", "party room", "to-go"]
    },
    {
        name: "Taqueria Jalisco",
        address: "7094 Bandera Rd, San Antonio, TX 78238",
        phone: "(210) 543-9400" ,
        restaurantFeatures: ["to-go", "breakfast"]
    },
    {
        name: "Sukhothai Thai Restaurant Express",
        address: "7664 Tezel Rd Suite 105, San Antonio, TX 78250",
        phone: "(210) 314-1106",
        restaurantFeatures: ["to-go", "limited seating"]
    }
]


//TODO Together: Let's get all these restaurant names out of this array of objects with .map()!

// let restaurantNames = favoriteRestaurants.map(function (restaurant) {
//
//     return restaurant.name;
// })
//
// console.log(restaurantNames);

//TODO: Create your own array of (up to 3 and at least 2) restaurant objects building off of the basic list you created during the MapBox exercise (or build one anew!) ~5 mins

var favRestaurantBites = [
    {
        name: "Carraba's",
        address: "12507 I-10 West, San antonio, Texas 78230",
        entree: "Chicken Bryan"
    },
    {
        name: "Max and Louies",
        address: "226 W Bitters Ste 126, San antonio, Texas 78216",
        entree: "Meatlovers Pizza"
    },
    {
        name: "Jacala Mexican Restaurant",
        address: "606 West Ave, San antonio, Texas 78201",
        entree: "Fajita's"
    }
];
//TODO: Now, having created a personal array of restaurant objects for yourself, use .map() to get your favorite restaurant's names out of that collection, into another array, and out into the console! ~5 mins
let restaurantBites = favRestaurantBites.map(function (restaurant) {

    return restaurant.name;
})

console.log(restaurantBites);
//~ * Filter * ~

//TODO Together: Once again, let's take a look at the old way we might approach an issue: getting only one type of values out of an array (for example: even numbers only from an array of nums!)

// var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// var evens = [];

// for (var i = 0; i < numbers.length; i += 1) {
//     if (numbers[i] % 2 === 0) {
//         evens.push(numbers[i]);
//     }
// }
// console.log(evens); // [2, 4, 6, 8, 10]


//TODO Together: Now, let's refactor the above using the ES6 .filter() method with the same goal: even numbers only!

let evens = numbers.filter(function (number) {
    return number % 2 === 0;

})

console.log("es6 version of evens:");
console.log(evens);
//TODO Together: Using my favoriteRestaurants list, let's filter out all of the non-buffet restaurants
let hasBuffet = favoriteRestaurants.filter(function (restaurant) {
    return restaurant.restaurantFeatures.includes("buffet");
})

console.log(hasBuffet);

//TODO: Each one of your restaurant arrays is unique, but, in that array, identify something to filter by - it could be as simple as "well, let me filter out all of the restaurants with names shorter than 8 characters" or get as complicated as you'd like!
// TODO: Once you've figured our what you want to filter, go ahead and write the necessary code to achieve what you wanted - remember to practice with .filter() and our ES6 verbiage!

// filtering restaurants with less tha 17 letters

let namelessthan17 = favoriteRestaurants.filter(function (restaurant) {
    return restaurant.name.length < 17;

})
console.log("Name with fewer than 17 characters:")
console.log(namelessthan17)

//~ * Reduce * ~

//Reduce is an interesting animal in and of itself: it's a way to reduce a collection down to, typically, a single value of some kind:

//TODO Together: Let's sum up some numbers with the .reduce() method and a number array!

let numbersReduce = [1, 2, 3, 4, 5];

//in the past: we would have built out a loop, probably used a var of sum, and had a look inside of the loop of sum += numbers[i], spit out sum with the sum of our numbers

let sum = numbersReduce.reduce(function (total,number) {
    return total + number;
},100)

console.log("Here's our SUM from our first .reduce example");
console.log(sum);

//In ES6 with .reduce(). .reduce() has a couple of components to it: .reduce(callbackFunction, initialValue)


//TODO Together: Let's take a step a bit deeper with .reduce() - .reduce()'s output can take many forms and shapes. For example, let's say we wanted to have a little Javascript that would count the length of the strings in an array and return that info back to us in an object. For example: ["Codeup", "San", Antonio", "Dallas", "Quasar", Cohort", "ES6"] would get us: Object { Codeup: 6, San: 3, Antonio: 7, Dallas: 6, Quasar: 6, Cohort: 6, ES6: 3 }

let stringArr = ["Codeup", "San", "Antonio", "Dallas", "Quasar", "Cohort", "ES6"];

let strLengthObj = stringArr.reduce(function (objectProp, element) {
    objectProp[element] = element.length; // assign the length as a value of the property named element {element: elementLength}
    return objectProp;
}, {})

console.log(strLengthObj);
//TODO: Let's make a new array of objects to use - make an array of objects [{},{},{}] consisting of a number of family members as objects with their name and ages as properties. Use .reduce() to sum up the age of those family members and see what it is! e.g. [{name: "Thurston Howell III", age: 50}, {name: "William Dean Howells", age: 83}] would be 133 by adding those two age properties together (50 + 83).

let family = [{name:"D. Howell", age: 80} , { name: "J. Howell", age: 77},{name:"A. G.", age: 27}];

let totalAge = family.reduce(function (result,individual) {
    return result + individual.age;
}, 0)

console.log(totalAge);

// let famMembersObj = [
//     {
//         name: "Thurston Howell III",
//         age: 50
//     },
//     {
//         name: "William Dean Howells",
//         age: 83
//     }
// ]
//
// let famMemberAgeSum = famMembersObj.reduce(function (result, individual) {
//     return result + individual.age;
// })
//
// console.log(famMemberAgeSum);
</script>
</body>
</html>