-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIntroduction to Arrays.html
401 lines (293 loc) · 11.1 KB
/
Introduction to Arrays.html
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Arrays</title>
</head>
<body>
<h1>Introduction to Arrays</h1>
<script>
"use strict";
// ============================= Arrays Definition
/*
In JS, an array is a special object data type that may contain
a collection of multiple data types at numeric indices.
In other words, an array allows us to store and access multiple values (elements)
through one variable name (array name) and a specific index number.
Array of animals...
_______ _______ _______ _______
| || || || |
| DOG || CAT || EGG || EMU |
| || || || |
------- ------- ------- -------
Index 0 Index 1 Index 2 Index 3
Arrays may contain no defined elements, one, or many.
Arrays in JS may contain elements of mixed types.
Several array methods and properties are built in to JS to work with arrays.
*/
// ============================= Declaring/Initializing an Array with Array Literal Syntax
// empty arrays may be declared...
// let pies = [];
// console.log(pies);
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
// console.log(pies);
// declaring and initializing a large array
// let students = [
// "Justin",
// "Javier",
// "Laura",
// "Isaac",
// "Trevor",
// "Dane",
// "Ryan",
// "Vivian"
// ];
// let lastStudent = students.length - 1;
// console.log(students[1]);
// console.log(students[lastStudent]);
// console.log(students.length);
// console.log(students[8]); // will be undefined because vivian is the last index.
// students[0] = 'Overlord';
// console.log(students)
// 3
// console.log(students[students.length - 1]);
//
//
//
// console.log(students[100]);
// !! What index is student 1 at? 0
// Student 7?
// Student 8?
// separate declaration and initialization
// let pies = [];
// pies[0] = "apple";
// pies[1] = "cherry";
// pies[10]= 'vanilla';
//
// console.log(pies);
// declaring and initializing a high index number
// pies[10] = "huckleberry";
// console.log(pies);
//
// console.log(pies[0]);
//
// pies[0] = 'vanilla';
//
// console.log(pies);
// ============================= Counting Array Items
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
// let numberOfPies = pies.length;
// console.log(numberOfPies);
// ============================= Accessing Array Elements
// console.log(pies[100]);
// console.log(pies[3]);
// ============================= !! MINI-EXERCISE 1 !!
// 1. Create an array of three of your classmates.
// let students = [
// "Luke",
// "Will",
// "Robert",
// ];
//
// //2. Practice console logging each classmate separately.
// console.log(students[0]);
// console.log(students[1]);
// console.log(students[2]);
//
// //3. Reassign the second element to be the string "Justin".
// students[1] = "Justin";
// console.log(students);
// ============================= For Loop
/* SYNTAX
for (let i = 0; i < someArray.length; i += 1) {
console.log(someArray[i]);
}
- in the above context "someArray[i]" will access the next array element in each iteration
- PROS: variety of traversals
- CONS: more complicated syntax
- USE: when you need to iterate partially or backwards through an array
*/
// example
//my practice
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
//
// // for (let i = 0; i < pies.length; i += 1) { //< will always end on the .length of an array
// // console.log(i);
// // console.log(pies[i]);
// // }
// //
// for (let i = pies.length - 1; i >= 0; i -= 1) { //pies.length - 1, the -1 removes the "undefined" when in reverse order.
// console.log(pies[i]);
// }
// console.log(pies);
//
// for (let i = 0; i < pies.length; i += 1) {
// console.log("I like " + pies[i]);
// }
// backwards
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
// for (let i = pies.length - 1; i >= 0; i -= 1) {
// console.log("I like " + pies[i]);
// }
//
// console.log(pies);
// !! How could we print out every other pie from the beginning of the array to the end? !!
// ============================= ForEach Loop
/* SYNTAX
//the forEach is a function that takes in an argument that does not take in a boolean or string, they take in functions.
someArray.forEach(function(element, index, array){
console.log(element);
console.log(index);
});
- PROS: simpler syntax, easier to read
- CONS: can only increment through entire array
- USE: when you need to iterate through entire array
REMINDERS...
- the parameters are optional to pass in to the anonymous function
- parameters may be semantically named but order matters
WORKS KINDA LIKE THIS:
let theArray = [some elements...];
function forEach(callback) {
for (let i = 0; i < elements.length; i += 1) {
callback(element[i], i, theArray);
}
}
*/
//notes***************
// const numbers = ['ken', 'Bob', 3, 4, 5, 6];
//ken = element
//ken = '0' index
//[all] = array
// function logEvenOddMessage(number) {
// let isEven = (number % 2 === 0) ? 'even' : 'odd';
// console.log(isEven);
// }
//
// numbers.forEach(logEvenOddMessage);
//
// numbers.forEach(function(number) {
// let isEven = (number % 2 === 0) ? 'even' : 'odd';
// console.log(isEven);
// });
// numbers.forEach(function(element, index, array){
// console.log(element, index, array);
// })
//example for a forEach************
// const numbers = [3, 2, 4];
// let total = 0;
// numbers.forEach(function(number){
// total += number;
// });
// console.log(total);
// standard syntax
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
// for (let i = 0; i < pies.length; i += 1) {
// console.log(pies[i]);
// }
// pies.forEach(function(element, index, array){
// console.log(element);
// console.log(index);
// console.log(array);
// console.log('==================');
// });
// pies.forEach(function(pie){
// console.log(pie);
// });
// pies.forEach(function(pie){
// console.log(pie);
// });
// defining all three parameters
// pies.forEach(function(element, index, array){
// console.log("Element " + element + " is at index " + index);
// console.log(pies);
// console.log(array);
// });
// with different parameter names
// pies.forEach(function(pie, index, array){
// console.log("Element " + pie + " is at index " + index);
// console.log(pies);
// console.log(array);
// });
// with only one parameter
// pies.forEach(function(element){
// console.log("Element " + element);
// });
//
//
// console.log("----------------");
// callback function syntax
// let pies = ["apple", "cherry", "key lime", "huckleberry"];
// function logElements(element) {
// console.log("Element " + element);
// }
// pies.forEach(logElements);
//
// function alertElements(element) {
// alert(element);
// }
//
// pies.forEach(alertElements);
// ============================= !! MINI-EXERCISE 2 !!
// 1. Loop through your classmates array with a for loop to log each classmate.
//const classmates = ["Ken", "Bob", "Jeff", "Sam", "Chris"];
// for (let i = 0; i < classmates.length; i += 1) {
// console.log(classmates[i]);
// }
// 2. Loop through your classmates array with a forEach loop.
// classmates.forEach(function(element, index, array){
// console.log(element);
// console.log(index);
// console.log(array);
// });
// numbers.forEach(function(element, index, array){
// console.log(element, index, array);
// })
// ============================= ARRAYS AND FUNCTIONS EXAMPLES
// !! Write a function, logNums, that takes in an array and logs each number in the array !!
// const thisArr = [1, 2, 3, 4, 5];
//
// function logNums(input) {
// thisArr.forEach(function (input) {
// console.log(input);
// });
// }
// logNums(thisArr);
//titus example
// !! Write a function, returnLongString, that takes in an array of strings and returns all strings concatenated together !!
// const longStr = ['hat', 'house', 'cabin', 'bats'];
//
// function returnLongString(input) {
// return input.join('');
// }
// console.log(returnLongString(longStr));
//titus example
// !! Write a function, returnArrSum, that takes in an array of values and returns the sum of all number elements !!
// const array = [1, 2, 3, 4, 10];
// function returnArrSum(arr) {
// let sum = 0
// for(let i = 0; i < arr.length; i += 1) {
// sum += arr[i];
// }
// return sum;
// }
// console.log(returnArrSum(array));
//titus example
// 1) Find a partner
// 2) Take 15 minutes to work together to find a solution to the following logic puzzle(s)...
// TWO STICKS AND A LIGHTER
// You are confined in a room with only two sticks and a lighter. You know that each stick will take exactly 1 hour to burn up but the rate at which each stick burns is unpredictable. How can you measure exactly 45 minutes.
// If you find the solution, work on the second logic puzzle.
// two stick
//
// burn the 1 hr candle at both ends taking 30 mins for the first candle, at the same burn the second candle on one end, as the second candle burns you allow candle 1 to burn all the way down (totally 30 mins of burn).
// THE DOUBLE JEOPARDY DOORS
// You are trapped in a room with two doors. One leads to certain doom and the other leads to freedom. You don’t know which is which. There are two robots guarding the doors. They will let you choose one door but upon doing so you must go through it. You can, however, ask one robot one question. The problem is one robot always tells the truth ,the other always lies and you don’t know which is which.
// What is the question you ask?
// HINT: Each robot knows everything about the other robot.
//
</script>
</body>
</html>