title
JavaScript Higher Order Functions & Arrays

description
In this video we will look at some of the very powerful higher order functions and working with arrays. We will look at forEach, map, filter, reduce and sort. SPONSOR: https://www.bugreplay.com MODERN JAVASCRIPT FROM THE BEGINNING ($10 PROMO): https://www.udemy.com/modern-javascript-from-the-beginning/?couponCode=YOUTUBE10 CODE: JSFiddle https://jsfiddle.net/bradtraversy/e5rb0x0a/ 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'JavaScript Higher Order Functions & Arrays', 'heatmap': [{'end': 295.048, 'start': 251.383, 'weight': 0.709}, {'end': 1554.61, 'start': 1518.805, 'weight': 1}], 'summary': 'Covers javascript higher order array methods, such as map, filter, sort, and reduce, using es6 arrow functions, demonstrating their advantages over standard for loops and the optimization of filter. it also explores data manipulation with higher order functions, showcasing practical examples of filtering, sorting, and reducing data in javascript.', 'chapters': [{'end': 40.531, 'segs': [{'end': 40.531, 'src': 'embed', 'start': 7.421, 'weight': 0, 'content': [{'end': 13.303, 'text': 'This video is sponsored by Bug Replay, which records your browser along with things like debug logs and network traffic.', 'start': 7.421, 'duration': 5.882}, {'end': 21.866, 'text': 'Available as a Chrome extension or Firefox add-on, it facilitates communication between devs and non-devs and between companies and their end users.', 'start': 13.683, 'duration': 8.183}, {'end': 27.128, 'text': "Network requests and response are synced with recordings, and it's just a great tool for any developer.", 'start': 22.266, 'duration': 4.862}, {'end': 30.469, 'text': 'Check out Bug Replay by clicking on the link in the description below.', 'start': 27.428, 'duration': 3.041}, {'end': 32.427, 'text': "hey, what's going on, guys?", 'start': 31.468, 'duration': 0.959}, {'end': 37.69, 'text': 'so I know that a lot of you really like the project videos where we build something from start to finish,', 'start': 32.427, 'duration': 5.263}, {'end': 40.531, 'text': 'and those are the kind of the bread and butter videos of this channel.', 'start': 37.69, 'duration': 2.841}], 'summary': 'Bug replay records browser activity, network traffic, and debug logs, facilitating communication between developers and non-developers. it is available as a chrome extension or firefox add-on and is synced with network requests and responses.', 'duration': 33.11, 'max_score': 7.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE7421.jpg'}], 'start': 7.421, 'title': 'Bug replay: browser recording for developers', 'summary': 'Discusses bug replay tool, a chrome extension and firefox add-on, facilitating communication between developers and non-devs, as well as between companies and end users, by recording browser activity, debug logs, and network traffic. it syncs network requests and responses with recordings, offering a valuable tool for developers.', 'chapters': [{'end': 40.531, 'start': 7.421, 'title': 'Bug replay: browser recording for developers', 'summary': 'Discusses the bug replay tool, a chrome extension and firefox add-on that records browser activity, debug logs, and network traffic to facilitate communication between developers and non-devs, as well as between companies and end users. it syncs network requests and responses with recordings, offering a valuable tool for developers.', 'duration': 33.11, 'highlights': ['The Bug Replay tool records browser activity, debug logs, and network traffic to facilitate communication between developers and non-devs, as well as between companies and end users.', 'It is available as a Chrome extension or Firefox add-on, syncing network requests and responses with recordings, making it a valuable tool for any developer.', 'The tool is sponsored and promoted, and the viewers are encouraged to check it out by clicking on the link in the description below.']}], 'duration': 33.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE7421.jpg', 'highlights': ['The Bug Replay tool records browser activity, debug logs, and network traffic to facilitate communication between developers and non-devs, as well as between companies and end users.', 'It is available as a Chrome extension or Firefox add-on, syncing network requests and responses with recordings, making it a valuable tool for any developer.', 'The tool is sponsored and promoted, and the viewers are encouraged to check it out by clicking on the link in the description below.']}, {'end': 539.31, 'segs': [{'end': 64.798, 'src': 'embed', 'start': 40.531, 'weight': 0, 'content': [{'end': 48.414, 'text': 'but today I want to do something different that may not be as fulfilling visually in the browser, but will really up your vanilla JavaScript game.', 'start': 40.531, 'duration': 7.883}, {'end': 52.075, 'text': 'so what I want to do is talk about some of the higher order array methods,', 'start': 48.414, 'duration': 3.661}, {'end': 59.858, 'text': "as well as writing them in a shorter and more elegant way using ES6 arrow functions, and so we'll be working with methods like map, filter, sort,", 'start': 52.075, 'duration': 7.783}, {'end': 64.798, 'text': "reduce, and i'm sure a lot of you that are, i wouldn't say, new to javascript,", 'start': 59.858, 'duration': 4.94}], 'summary': 'Learn higher order array methods and es6 arrow functions to enhance vanilla javascript skills.', 'duration': 24.267, 'max_score': 40.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE40531.jpg'}, {'end': 103.756, 'src': 'embed', 'start': 79.461, 'weight': 2, 'content': [{'end': 89.245, 'text': "i will explain how they work and what the benefit is, and we'll actually compare them to like a for loop, which you know you would do back in the day.", 'start': 79.461, 'duration': 9.784}, {'end': 92.728, 'text': 'so learning these methods will really help you be a better programmer.', 'start': 89.245, 'duration': 3.483}, {'end': 98.072, 'text': 'I mean you can do react in angular tutorials and you can really master the framework.', 'start': 92.728, 'duration': 5.344}, {'end': 103.756, 'text': "but you want to do stuff like this that you really understand the language it's underneath those frameworks.", 'start': 98.072, 'duration': 5.684}], 'summary': 'Learning these methods will help you be a better programmer, understanding the language underneath the frameworks.', 'duration': 24.295, 'max_score': 79.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE79461.jpg'}, {'end': 162.749, 'src': 'embed', 'start': 115.528, 'weight': 1, 'content': [{'end': 124.197, 'text': "So I'll actually be adding some of this material as well as some new material that has to do with functional programming into that course.", 'start': 115.528, 'duration': 8.669}, {'end': 125.257, 'text': 'all right.', 'start': 124.837, 'duration': 0.42}, {'end': 130.739, 'text': "so, like I said, this isn't going to be like a project where we build something in the UI.", 'start': 125.257, 'duration': 5.482}, {'end': 133.84, 'text': "we're just going to use the Google Chrome console for our output.", 'start': 130.739, 'duration': 3.101}, {'end': 138.622, 'text': "but it's really going to up your programming game if you don't know about these methods.", 'start': 133.84, 'duration': 4.782}, {'end': 144.804, 'text': 'so if you want to follow along, all you have to do is create an index.html file and a main.js file.', 'start': 138.622, 'duration': 6.182}, {'end': 146.425, 'text': 'and the HTML file is very simple.', 'start': 144.804, 'duration': 1.621}, {'end': 148.146, 'text': "it's just basic head body tags.", 'start': 146.425, 'duration': 1.721}, {'end': 151.107, 'text': 'I have an h1 and then a link to the main.js.', 'start': 148.146, 'duration': 2.961}, {'end': 159.469, 'text': "and in the main.js we have two arrays one's called companies, and it has just a bunch of objects with a name,", 'start': 152.407, 'duration': 7.062}, {'end': 162.749, 'text': 'a category and a start and end date for that company.', 'start': 159.469, 'duration': 3.28}], 'summary': 'Adding new material on functional programming, using google chrome console, creating html and js files for practice.', 'duration': 47.221, 'max_score': 115.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE115528.jpg'}, {'end': 295.048, 'src': 'heatmap', 'start': 251.383, 'weight': 0.709, 'content': [{'end': 254.084, 'text': 'So for each we can just take the actual array.', 'start': 251.383, 'duration': 2.701}, {'end': 257.966, 'text': 'So companies and we can just say dot for each.', 'start': 254.164, 'duration': 3.802}, {'end': 262.19, 'text': 'And then what that does is it takes in a callback function.', 'start': 258.906, 'duration': 3.284}, {'end': 263.811, 'text': 'OK And this is synchronous.', 'start': 262.21, 'duration': 1.601}, {'end': 265.712, 'text': 'This is not an asynchronous callback.', 'start': 263.831, 'duration': 1.881}, {'end': 269.854, 'text': 'So this takes in what can take in three different things.', 'start': 266.512, 'duration': 3.342}, {'end': 276.778, 'text': 'So we need, basically like an iterator, something that we can use for each company, or whatever is in the array.', 'start': 269.854, 'duration': 6.924}, {'end': 279.199, 'text': "So I'm just gonna call this company.", 'start': 276.778, 'duration': 2.421}, {'end': 283.281, 'text': 'but you can also get the index and you can also get the entire array.', 'start': 279.199, 'duration': 4.082}, {'end': 290.125, 'text': "Okay. so those are the three things that can be passed in, and that's the same with most of these high-order methods.", 'start': 283.281, 'duration': 6.844}, {'end': 295.048, 'text': "So in here we'll just go ahead and console dot, log and let's just log company.", 'start': 290.125, 'duration': 4.923}], 'summary': 'Using for each method, iterate through array synchronously, logging each company.', 'duration': 43.665, 'max_score': 251.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE251383.jpg'}, {'end': 335.592, 'src': 'embed', 'start': 308.118, 'weight': 5, 'content': [{'end': 316.02, 'text': 'this is much nicer, looking much better, and if we wanted to get just like the name, we could just do company name, and there we go all right.', 'start': 308.118, 'duration': 7.902}, {'end': 316.841, 'text': 'so very simple.', 'start': 316.02, 'duration': 0.821}, {'end': 319.882, 'text': "i'm sure a lot of you guys already know about foreach.", 'start': 316.841, 'duration': 3.041}, {'end': 323.224, 'text': "So let's move on to filter.", 'start': 321.242, 'duration': 1.982}, {'end': 328.587, 'text': 'So what filter does is it allows us to do just that, filter things out from the array.', 'start': 324.004, 'duration': 4.583}, {'end': 335.592, 'text': "So let's say that we want to look at this ages array and we want to get all of the ages that are 21 and over.", 'start': 328.707, 'duration': 6.885}], 'summary': 'Discusses foreach and filter functions for array manipulation.', 'duration': 27.474, 'max_score': 308.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE308118.jpg'}, {'end': 496.105, 'src': 'embed', 'start': 468.177, 'weight': 6, 'content': [{'end': 474.583, 'text': "so we'll go ahead and just comment this out and save and you can see we get the same exact thing, all right.", 'start': 468.177, 'duration': 6.406}, {'end': 476.304, 'text': 'so this looks a lot nicer than this.', 'start': 474.583, 'duration': 1.721}, {'end': 478.666, 'text': 'Now we can even make this better.', 'start': 477.145, 'duration': 1.521}, {'end': 483.31, 'text': 'We can actually put this all into one line using ES6 arrow functions.', 'start': 478.686, 'duration': 4.624}, {'end': 489.314, 'text': "So let's again create the canned drink and set it to ages.filter.", 'start': 483.97, 'duration': 5.344}, {'end': 493.604, 'text': 'and inside here.', 'start': 492.043, 'duration': 1.561}, {'end': 496.105, 'text': 'instead of doing function like we did above,', 'start': 493.604, 'duration': 2.501}], 'summary': 'The transcript discusses converting code to es6 arrow functions for improved efficiency.', 'duration': 27.928, 'max_score': 468.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE468177.jpg'}], 'start': 40.531, 'title': 'Array methods in javascript', 'summary': 'Explores higher order array methods like map, filter, sort, and reduce using es6 arrow functions, comparing them to for loops. it also discusses the advantages of foreach and filter over standard for loops and the optimization of filter using es6 arrow functions.', 'chapters': [{'end': 162.749, 'start': 40.531, 'title': 'Higher order array methods in javascript', 'summary': 'Focuses on explaining higher order array methods such as map, filter, sort, and reduce using es6 arrow functions and compares them to for loops, aiming to enhance understanding of these methods and improve programming skills. the chapter also mentions the addition of related material to an existing udemy course on modern javascript.', 'duration': 122.218, 'highlights': ['Explaining higher order array methods (map, filter, sort, reduce) using ES6 arrow functions and comparing them to for loops to enhance understanding and improve programming skills.', 'Mentioning the addition of related material to an existing Udemy course on Modern JavaScript, including functional programming content.', "Emphasizing the importance of understanding these methods to up one's programming game and the benefit of mastering the fundamental language underneath frameworks like React and Angular.", 'Encouraging the audience to create an index.html file and a main.js file to follow along and practice using the Google Chrome console for output.']}, {'end': 539.31, 'start': 162.749, 'title': 'Array methods comparison: for loop, foreach, filter', 'summary': 'Compares the standard for loop, foreach, and filter array methods, showcasing the advantages of foreach and filter in terms of simplicity, elegance, and efficiency in handling array iterations and filtering, with filter further optimized using es6 arrow functions.', 'duration': 376.561, 'highlights': ['The chapter compares the standard for loop, forEach, and filter array methods Compares different array methods for iteration and filtering', 'showcasing the advantages of forEach and filter in terms of simplicity, elegance, and efficiency Demonstrates the benefits of forEach and filter in terms of simplicity, elegance, and efficiency', 'filter further optimized using ES6 arrow functions Optimization of the filter method using ES6 arrow functions']}], 'duration': 498.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE40531.jpg', 'highlights': ['Explaining higher order array methods (map, filter, sort, reduce) using ES6 arrow functions and comparing them to for loops to enhance understanding and improve programming skills.', 'Mentioning the addition of related material to an existing Udemy course on Modern JavaScript, including functional programming content.', "Emphasizing the importance of understanding these methods to up one's programming game and the benefit of mastering the fundamental language underneath frameworks like React and Angular.", 'Encouraging the audience to create an index.html file and a main.js file to follow along and practice using the Google Chrome console for output.', 'Comparing the standard for loop, forEach, and filter array methods Compares different array methods for iteration and filtering', 'Showcasing the advantages of forEach and filter in terms of simplicity, elegance, and efficiency Demonstrates the benefits of forEach and filter in terms of simplicity, elegance, and efficiency', 'Filter further optimized using ES6 arrow functions Optimization of the filter method using ES6 arrow functions']}, {'end': 922.121, 'segs': [{'end': 589.509, 'src': 'embed', 'start': 539.31, 'weight': 0, 'content': [{'end': 544.495, 'text': "so we're going to do a couple more examples of filter, just in case it's still not registering.", 'start': 539.31, 'duration': 5.185}, {'end': 548.578, 'text': "So let's go ahead and actually I'm going to put some comments in here.", 'start': 545.015, 'duration': 3.563}, {'end': 558.647, 'text': "We'll say get 21 and older just so it's clear what's going on because I'm going to put this code in the description for you guys.", 'start': 548.598, 'duration': 10.049}, {'end': 563.19, 'text': "This next one, let's go ahead and filter the retail.", 'start': 559.848, 'duration': 3.342}, {'end': 570.498, 'text': 'companies OK, each company has a category and we want to get just an array or not an array.', 'start': 564.091, 'duration': 6.407}, {'end': 571.8, 'text': 'Well, yes, an array.', 'start': 570.699, 'duration': 1.101}, {'end': 575.544, 'text': "But we're not creating a new one like we would with map, which we'll get to.", 'start': 572.12, 'duration': 3.424}, {'end': 578.708, 'text': "But we're just going to filter the ones out that are retail.", 'start': 575.885, 'duration': 2.823}, {'end': 589.509, 'text': "So we'll create a variable called retail companies and we'll set that to companies dot filter.", 'start': 579.875, 'duration': 9.634}], 'summary': 'Demonstrating filter method for filtering retail companies in javascript', 'duration': 50.199, 'max_score': 539.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE539310.jpg'}, {'end': 729.559, 'src': 'embed', 'start': 700.185, 'weight': 3, 'content': [{'end': 704.71, 'text': "So let's comment this out and save and we get the same thing.", 'start': 700.185, 'duration': 4.525}, {'end': 712.913, 'text': "Okay So let's do let's do all the companies that started in the 80s.", 'start': 704.73, 'duration': 8.183}, {'end': 716.634, 'text': 'So you can see we have 81, we have 89.', 'start': 713.233, 'duration': 3.401}, {'end': 719.355, 'text': 'So we want to filter all of the companies from the 80s.', 'start': 716.634, 'duration': 2.721}, {'end': 720.076, 'text': "Let's do that.", 'start': 719.395, 'duration': 0.681}, {'end': 726.938, 'text': "So we'll go ahead and say get 80s companies.", 'start': 721.256, 'duration': 5.682}, {'end': 727.378, 'text': "I don't know.", 'start': 727.038, 'duration': 0.34}, {'end': 729.559, 'text': "And we'll create a variable.", 'start': 728.378, 'duration': 1.181}], 'summary': 'Filtering companies from the 80s, including 81 and 89.', 'duration': 29.374, 'max_score': 700.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE700185.jpg'}, {'end': 850.125, 'src': 'embed', 'start': 820.373, 'weight': 4, 'content': [{'end': 822.493, 'text': "they're all in the 80s.", 'start': 820.373, 'duration': 2.12}, {'end': 823.673, 'text': 'all right.', 'start': 822.493, 'duration': 1.18}, {'end': 825.314, 'text': "so let's do one more with filter.", 'start': 823.673, 'duration': 1.641}, {'end': 829.335, 'text': "let's get all the companies that lasted at least ten years.", 'start': 825.314, 'duration': 4.021}, {'end': 844.003, 'text': 'okay, so some of these guys lasted more, some lasted less than ten years, for instance, 99 to 2007, 2011 to 2016..', 'start': 829.335, 'duration': 14.668}, {'end': 846.283, 'text': "So some of these didn't last 10 years.", 'start': 844.003, 'duration': 2.28}, {'end': 847.664, 'text': 'So we want the ones that did.', 'start': 846.343, 'duration': 1.321}, {'end': 848.864, 'text': 'All right.', 'start': 847.684, 'duration': 1.18}, {'end': 850.125, 'text': "So let's put a comment here.", 'start': 848.904, 'duration': 1.221}], 'summary': 'Filter companies lasting at least 10 years; examples from 80s, 99-2007, 2011-2016.', 'duration': 29.752, 'max_score': 820.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE820373.jpg'}], 'start': 539.31, 'title': 'Filtering companies in javascript', 'summary': 'Explains filtering retail companies and demonstrates the process using es5 syntax and arrow functions. it also covers filtering companies that started in the 80s and those that lasted at least ten years in javascript, yielding 5 and 4 companies respectively.', 'chapters': [{'end': 700.125, 'start': 539.31, 'title': 'Filtering retail companies', 'summary': 'Explains the concept of filtering retail companies from a list based on a specific condition, demonstrating the process using both es5 syntax and arrow functions.', 'duration': 160.815, 'highlights': ['The process of filtering retail companies is demonstrated using both ES5 syntax and arrow functions. The transcript provides examples of filtering retail companies using both ES5 syntax and arrow functions, showcasing the versatility of different coding approaches.', 'The example demonstrates filtering out retail companies from an array, resulting in three objects meeting the specified condition. The demonstration of filtering out retail companies from the array results in three objects (company two, four, and nine) meeting the specified condition of having the category of retail.', 'Explanation of using arrow functions with a single parameter for filtering retail companies. The transcript explains the usage of arrow functions with a single parameter for filtering retail companies, emphasizing the syntax without parentheses for a single parameter and providing clear coding conventions.']}, {'end': 922.121, 'start': 700.185, 'title': 'Filtering companies in javascript', 'summary': 'Demonstrates how to filter companies that started in the 80s and those that lasted at least ten years in javascript, yielding 5 and 4 companies respectively.', 'duration': 221.936, 'highlights': ['The chapter guides on filtering companies that started in the 80s, resulting in 5 companies.', 'It explains how to filter companies that lasted at least ten years, yielding 4 companies.', "The demonstration involves using JavaScript's filter method to achieve the desired results.", 'The tutorial includes step-by-step code explanations and console logs for verification.']}], 'duration': 382.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE539310.jpg', 'highlights': ['The process of filtering retail companies is demonstrated using both ES5 syntax and arrow functions.', 'The example demonstrates filtering out retail companies from an array, resulting in three objects meeting the specified condition.', 'Explanation of using arrow functions with a single parameter for filtering retail companies.', 'The chapter guides on filtering companies that started in the 80s, resulting in 5 companies.', 'It explains how to filter companies that lasted at least ten years, yielding 4 companies.', "The demonstration involves using JavaScript's filter method to achieve the desired results.", 'The tutorial includes step-by-step code explanations and console logs for verification.']}, {'end': 1266.761, 'segs': [{'end': 984.34, 'src': 'embed', 'start': 922.121, 'weight': 4, 'content': [{'end': 926.994, 'text': "So now that's included, Alright.", 'start': 922.121, 'duration': 4.873}, {'end': 928.477, 'text': "so I think that's enough with filter.", 'start': 926.994, 'duration': 1.483}, {'end': 937.273, 'text': 'You can see how elegant it is and how easy it is to just kind of pick out certain things from the array or certain values.', 'start': 928.517, 'duration': 8.756}, {'end': 940.145, 'text': 'in this case, company objects.', 'start': 938.464, 'duration': 1.681}, {'end': 942.126, 'text': "But let's move on to map.", 'start': 940.685, 'duration': 1.441}, {'end': 942.806, 'text': 'All right.', 'start': 942.446, 'duration': 0.36}, {'end': 945.447, 'text': 'So map works a little bit differently.', 'start': 942.866, 'duration': 2.581}, {'end': 953.271, 'text': 'Instead of just filtering things out, we can create new arrays of anything really from a current array.', 'start': 945.828, 'duration': 7.443}, {'end': 960.615, 'text': "So let's do let's just grab all of the company names and put them into their own array.", 'start': 953.991, 'duration': 6.624}, {'end': 976.719, 'text': "OK, so we'll say create array of company names, all right, so we'll create a variable called company names,", 'start': 960.635, 'duration': 16.084}, {'end': 984.34, 'text': "we'll set it to companies dot map and then all we have to do is pass in our company.", 'start': 976.719, 'duration': 7.621}], 'summary': 'Introduction to using filter and map methods in javascript for manipulating arrays.', 'duration': 62.219, 'max_score': 922.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE922121.jpg'}, {'end': 1080.221, 'src': 'embed', 'start': 1049.24, 'weight': 2, 'content': [{'end': 1053.846, 'text': "All right, if we wanted to, let's call this test map actually.", 'start': 1049.24, 'duration': 4.606}, {'end': 1062.195, 'text': "If we wanted to, let's say each, we wanted an array with the name and then the start to end year.", 'start': 1055.648, 'duration': 6.547}, {'end': 1063.857, 'text': 'So we could do return.', 'start': 1062.336, 'duration': 1.521}, {'end': 1069.865, 'text': "Let's actually use a template string here.", 'start': 1067.141, 'duration': 2.724}, {'end': 1076.056, 'text': 'So with ES6 template strings, this is the syntax for a variable.', 'start': 1071.431, 'duration': 4.625}, {'end': 1077.878, 'text': "So we'll say company name.", 'start': 1076.577, 'duration': 1.301}, {'end': 1080.221, 'text': "And then we'll just do some brackets.", 'start': 1078.319, 'duration': 1.902}], 'summary': 'Using es6 template strings, create an array with company name and start to end year.', 'duration': 30.981, 'max_score': 1049.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1049240.jpg'}, {'end': 1135.81, 'src': 'embed', 'start': 1103.887, 'weight': 3, 'content': [{'end': 1115.454, 'text': "so you can format it however you want and then, if we wanted to do this the shorthand way, we could go ahead and let's remove function,", 'start': 1103.887, 'duration': 11.567}, {'end': 1117.695, 'text': 'remove the parentheses as well.', 'start': 1115.454, 'duration': 2.241}, {'end': 1122.116, 'text': "So we'll say company, use an arrow function.", 'start': 1119.833, 'duration': 2.283}, {'end': 1127.201, 'text': 'We no longer need the return or the curly braces.', 'start': 1122.136, 'duration': 5.065}, {'end': 1135.81, 'text': "So on this side, we'll get rid of these two as well, or just the curly braces and that semicolon, and that should work.", 'start': 1128.342, 'duration': 7.468}], 'summary': 'Converting a function to an arrow function resulted in shorter, simplified code.', 'duration': 31.923, 'max_score': 1103.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1103887.jpg'}, {'end': 1266.761, 'src': 'embed', 'start': 1210.981, 'weight': 0, 'content': [{'end': 1215.244, 'text': 'Oops, what I do forgot the parentheses.', 'start': 1210.981, 'duration': 4.263}, {'end': 1216.826, 'text': 'And there we go.', 'start': 1216.245, 'duration': 0.581}, {'end': 1219.067, 'text': "So we're going to have each number times two.", 'start': 1216.846, 'duration': 2.221}, {'end': 1227.798, 'text': "And if we wanted to actually use two maps, let's say we wanted to square it and then times it by two,", 'start': 1221.014, 'duration': 6.784}, {'end': 1233.001, 'text': 'we could get rid of this semicolon and then just go ahead and add another dot map.', 'start': 1227.798, 'duration': 5.203}, {'end': 1237.964, 'text': 'And when you do this, usually you would put these on separate lines like this to format it.', 'start': 1233.422, 'duration': 4.542}, {'end': 1241.206, 'text': "So let's see what that gives us.", 'start': 1238.825, 'duration': 2.381}, {'end': 1245.229, 'text': "Let's just call this, I don't know, age map.", 'start': 1241.387, 'duration': 3.842}, {'end': 1252.296, 'text': "It'll change this to age map and save, see what we get.", 'start': 1248.295, 'duration': 4.001}, {'end': 1255.197, 'text': 'So what it did is it first squared all the,', 'start': 1252.296, 'duration': 2.901}, {'end': 1261.319, 'text': 'all the numbers and then it? Multiplied them by two and we could keep going like this and we can manipulate our data.', 'start': 1255.197, 'duration': 6.122}, {'end': 1266.761, 'text': "So map is is very very powerful So now let's take a look at sort.", 'start': 1261.819, 'duration': 4.942}], 'summary': 'Demonstrating the use of map function to manipulate data, showcasing power and versatility of the function.', 'duration': 55.78, 'max_score': 1210.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1210981.jpg'}], 'start': 922.121, 'title': 'Array transformation and arrow functions in javascript', 'summary': 'Explores the map method in javascript and its ability to create new arrays, demonstrating its usage to transform an array of company objects into names, alongside showcasing the simplification of code and effective data manipulation through arrow functions and array methods like map and sort.', 'chapters': [{'end': 1103.887, 'start': 922.121, 'title': 'Array transformation with map method', 'summary': 'Explains the map method in javascript, showcasing its ability to create new arrays and demonstrating the usage through examples, including transforming an array of company objects into an array of company names and another array of names and start-end dates.', 'duration': 181.766, 'highlights': ['The map method in JavaScript creates new arrays from a current array, allowing for transformation of data. The transcript explains how the map method in JavaScript works, showcasing its ability to create new arrays from a current array, thus allowing for the transformation of data.', 'Demonstration of transforming an array of company objects into an array of company names using the map method. The transcript provides an example of using the map method to transform an array of company objects into an array of company names, showcasing the practical application of the map method.', 'Example of creating an array with names and start-end dates using the map method and ES6 template strings. The transcript demonstrates the usage of the map method with ES6 template strings to create an array containing company names and their corresponding start-end dates, highlighting the versatility of the map method.']}, {'end': 1266.761, 'start': 1103.887, 'title': 'Javascript arrow functions and array methods', 'summary': 'Demonstrates the usage of arrow functions and array methods like map and sort in javascript, showcasing how to simplify code and manipulate data effectively.', 'duration': 162.874, 'highlights': ['The chapter demonstrates the usage of arrow functions and array methods like map and sort in JavaScript, showcasing how to simplify code and manipulate data effectively.', "The speaker explains the shorthand way of using arrow functions by removing the 'function' keyword, parentheses, return statement, and curly braces, which simplifies the code and makes it more concise.", "An example using the 'map' method on an array to square each element and another example to multiply each element by two is presented, highlighting the versatility and power of the 'map' method.", "The demonstration of using multiple 'map' methods in sequence to first square all the numbers and then multiply them by two showcases the flexibility and composability of array methods in JavaScript."]}], 'duration': 344.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE922121.jpg', 'highlights': ["The demonstration of using multiple 'map' methods in sequence to first square all the numbers and then multiply them by two showcases the flexibility and composability of array methods in JavaScript.", "An example using the 'map' method on an array to square each element and another example to multiply each element by two is presented, highlighting the versatility and power of the 'map' method.", 'The transcript demonstrates the usage of the map method with ES6 template strings to create an array containing company names and their corresponding start-end dates, highlighting the versatility of the map method.', "The speaker explains the shorthand way of using arrow functions by removing the 'function' keyword, parentheses, return statement, and curly braces, which simplifies the code and makes it more concise.", 'Demonstration of transforming an array of company objects into an array of company names using the map method. The transcript provides an example of using the map method to transform an array of company objects into an array of company names, showcasing the practical application of the map method.', 'The map method in JavaScript creates new arrays from a current array, allowing for transformation of data. The transcript explains how the map method in JavaScript works, showcasing its ability to create new arrays from a current array, thus allowing for the transformation of data.']}, {'end': 1554.61, 'segs': [{'end': 1325.87, 'src': 'embed', 'start': 1267.221, 'weight': 1, 'content': [{'end': 1273.966, 'text': 'Okay, so for sort It works similar to the rest of these functions.', 'start': 1267.221, 'duration': 6.745}, {'end': 1275.967, 'text': "We're going to create a variable.", 'start': 1273.986, 'duration': 1.981}, {'end': 1277.608, 'text': "Let's call it sorted companies.", 'start': 1275.987, 'duration': 1.621}, {'end': 1283.854, 'text': 'And what I want to do here is sort the companies by the start year, okay, from the earliest year to the latest.', 'start': 1278.049, 'duration': 5.805}, {'end': 1287.136, 'text': 'So we say equals companies dot sort.', 'start': 1284.374, 'duration': 2.762}, {'end': 1290.879, 'text': 'And sort will take in a function.', 'start': 1287.977, 'duration': 2.902}, {'end': 1295.083, 'text': "And what we'll do here is, oops.", 'start': 1291.86, 'duration': 3.223}, {'end': 1301.958, 'text': "What we'll do here is we need to pass in two values.", 'start': 1299.537, 'duration': 2.421}, {'end': 1309.842, 'text': "It basically takes two, in this case, two companies and it'll compare them in a way however we want to.", 'start': 1301.998, 'duration': 7.844}, {'end': 1319.906, 'text': "We're going to compare the start dates and then we return either one or negative one to kind of move it up and down uh..", 'start': 1309.902, 'duration': 10.004}, {'end': 1321.147, 'text': 'in the in the array.', 'start': 1319.906, 'duration': 1.241}, {'end': 1325.87, 'text': 'okay. so for each iteration it will take two companies and compare them.', 'start': 1321.147, 'duration': 4.723}], 'summary': 'Sorting companies by start year in javascript using sort function.', 'duration': 58.649, 'max_score': 1267.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1267221.jpg'}, {'end': 1505.317, 'src': 'embed', 'start': 1473.772, 'weight': 2, 'content': [{'end': 1475.793, 'text': "Alright, so hopefully that's helpful guys.", 'start': 1473.772, 'duration': 2.021}, {'end': 1477.674, 'text': "Let's do one more with sort.", 'start': 1476.293, 'duration': 1.381}, {'end': 1480.336, 'text': "Let's sort ages.", 'start': 1477.714, 'duration': 2.622}, {'end': 1483.378, 'text': 'So we just have a simple numbers array.', 'start': 1480.656, 'duration': 2.722}, {'end': 1487.38, 'text': 'We want to sort that from lowest to highest.', 'start': 1483.418, 'duration': 3.962}, {'end': 1491.162, 'text': "So I'm going to say const sort ages.", 'start': 1488.32, 'duration': 2.842}, {'end': 1495.244, 'text': "And we're going to set this to ages.sort.", 'start': 1492.143, 'duration': 3.101}, {'end': 1498.086, 'text': 'And I want to show you what happens if we just do this.', 'start': 1495.605, 'duration': 2.481}, {'end': 1505.317, 'text': "So let's do console.log, Sort ages and save.", 'start': 1499.087, 'duration': 6.23}], 'summary': 'Demonstrating sorting an array of ages in javascript using the sort method.', 'duration': 31.545, 'max_score': 1473.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1473772.jpg'}, {'end': 1554.61, 'src': 'heatmap', 'start': 1518.805, 'weight': 1, 'content': [{'end': 1531.477, 'text': 'so to fix this, we need to again pass in a and B, or whatever you want to call it, and then we just simply need to say a and minus B and save.', 'start': 1518.805, 'duration': 12.672}, {'end': 1533.44, 'text': "And now you'll see five is at the beginning.", 'start': 1531.597, 'duration': 1.843}, {'end': 1538.788, 'text': 'If you wanted this in descending order, then you could just do B minus A.', 'start': 1533.841, 'duration': 4.947}, {'end': 1540.23, 'text': 'Sorry about the yelling upstairs.', 'start': 1538.788, 'duration': 1.442}, {'end': 1543.054, 'text': 'And now you can see that five is at the end.', 'start': 1541.112, 'duration': 1.942}, {'end': 1544.076, 'text': 'All right.', 'start': 1543.074, 'duration': 1.002}, {'end': 1545.338, 'text': "So that's that.", 'start': 1544.296, 'duration': 1.042}, {'end': 1554.61, 'text': "So let's talk about reduce a little bit now reduce is I mean it can be used for a lot of things and it can get quite complicated.", 'start': 1547.481, 'duration': 7.129}], 'summary': "Using 'a' and 'b' to sort numbers, 5 at the start and end.", 'duration': 35.805, 'max_score': 1518.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1518805.jpg'}, {'end': 1559.777, 'src': 'embed', 'start': 1531.597, 'weight': 0, 'content': [{'end': 1533.44, 'text': "And now you'll see five is at the beginning.", 'start': 1531.597, 'duration': 1.843}, {'end': 1538.788, 'text': 'If you wanted this in descending order, then you could just do B minus A.', 'start': 1533.841, 'duration': 4.947}, {'end': 1540.23, 'text': 'Sorry about the yelling upstairs.', 'start': 1538.788, 'duration': 1.442}, {'end': 1543.054, 'text': 'And now you can see that five is at the end.', 'start': 1541.112, 'duration': 1.942}, {'end': 1544.076, 'text': 'All right.', 'start': 1543.074, 'duration': 1.002}, {'end': 1545.338, 'text': "So that's that.", 'start': 1544.296, 'duration': 1.042}, {'end': 1554.61, 'text': "So let's talk about reduce a little bit now reduce is I mean it can be used for a lot of things and it can get quite complicated.", 'start': 1547.481, 'duration': 7.129}, {'end': 1559.777, 'text': "We're going to keep it simple and we're going to use it to let's add all of the ages together.", 'start': 1554.63, 'duration': 5.147}], 'summary': 'Demonstrating sorting and reducing in a simple, introductory way.', 'duration': 28.18, 'max_score': 1531.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1531597.jpg'}], 'start': 1267.221, 'title': 'Sorting and reducing in javascript', 'summary': 'Covers sorting companies by start year using various methods and demonstrates sorting ages in javascript, while also explaining the versatility and potential complexity of the reduce function in javascript.', 'chapters': [{'end': 1385.983, 'start': 1267.221, 'title': 'Sorting companies by start year', 'summary': 'Explains how to sort companies by start year using the sort function and a comparison method, resulting in a sorted list of companies from the earliest start year to the latest.', 'duration': 118.762, 'highlights': ["The 'sort' function is used to arrange the companies by start year, from the earliest year to the latest, resulting in a sorted list of companies.", 'Comparison of start dates is done by passing two companies into a function, comparing the start dates, and returning either 1 or -1 based on the comparison, enabling the sorting process.', 'The process involves iterating through the companies, comparing their start dates, and returning 1 or -1 based on the comparison, to effectively organize the list in ascending order of start year.']}, {'end': 1505.317, 'start': 1387.024, 'title': 'Sorting companies and ages in javascript', 'summary': 'Covers sorting companies by start year using a ternary operator and demonstrates sorting ages from lowest to highest using the sort method in javascript.', 'duration': 118.293, 'highlights': ['Demonstrates sorting companies by start year using a ternary operator, illustrating the use of a.start > b.start and the return values of 1 and -1.', 'Illustrates sorting ages from lowest to highest using the sort method in JavaScript and showcases the use of the console.log to display the sorted ages array.']}, {'end': 1554.61, 'start': 1505.317, 'title': 'Understanding reduce function in javascript', 'summary': 'Explains how to use the reduce function in javascript to manipulate arrays, such as sorting in ascending or descending order, and highlights its versatility and potential complexity.', 'duration': 49.293, 'highlights': ['The reduce function in JavaScript can be used to manipulate arrays and perform operations such as sorting (asc/desc) and can become complex (quantifiable).', "When using the reduce function to sort in ascending order, the expression 'a - b' can be used, and for descending order, 'b - a' can be used (quantifiable).", 'The reduce function has the potential to be quite complicated and versatile, allowing for a wide range of manipulations on arrays (quantifiable).']}], 'duration': 287.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1267221.jpg', 'highlights': ['The reduce function in JavaScript can be used to manipulate arrays and perform operations such as sorting (asc/desc) and can become complex (quantifiable).', 'The process involves iterating through the companies, comparing their start dates, and returning 1 or -1 based on the comparison, to effectively organize the list in ascending order of start year.', 'Illustrates sorting ages from lowest to highest using the sort method in JavaScript and showcases the use of the console.log to display the sorted ages array.', 'Demonstrates sorting companies by start year using a ternary operator, illustrating the use of a.start > b.start and the return values of 1 and -1.', 'Comparison of start dates is done by passing two companies into a function, comparing the start dates, and returning either 1 or -1 based on the comparison, enabling the sorting process.', "When using the reduce function to sort in ascending order, the expression 'a - b' can be used, and for descending order, 'b - a' can be used (quantifiable).", "The 'sort' function is used to arrange the companies by start year, from the earliest year to the latest, resulting in a sorted list of companies."]}, {'end': 2094.748, 'segs': [{'end': 1707.742, 'src': 'embed', 'start': 1644.607, 'weight': 2, 'content': [{'end': 1655.317, 'text': "Actually, I'm sorry, with reduce, we need to do total and then age and then we'll go down here and we'll just return total.", 'start': 1644.607, 'duration': 10.71}, {'end': 1659.733, 'text': 'plus age.', 'start': 1657.492, 'duration': 2.241}, {'end': 1660.494, 'text': 'All right.', 'start': 1660.274, 'duration': 0.22}, {'end': 1664.777, 'text': "And it's also going to take in a second parameter of the total, which is going to be zero.", 'start': 1660.614, 'duration': 4.163}, {'end': 1666.258, 'text': "It's going to start at zero.", 'start': 1664.797, 'duration': 1.461}, {'end': 1670.941, 'text': "So let's take this and comment this out and save.", 'start': 1666.878, 'duration': 4.063}, {'end': 1672.422, 'text': 'And we still get 460.', 'start': 1671.001, 'duration': 1.421}, {'end': 1673.642, 'text': 'Now, this is kind of long.', 'start': 1672.422, 'duration': 1.22}, {'end': 1677.805, 'text': "It's actually just as long or longer than the for loop.", 'start': 1674.543, 'duration': 3.262}, {'end': 1682.448, 'text': "So to shorten this up, we'd use an arrow function.", 'start': 1678.306, 'duration': 4.142}, {'end': 1684.55, 'text': 'So go ahead and take away the function.', 'start': 1682.568, 'duration': 1.982}, {'end': 1690.88, 'text': "We'll add our arrow and let's get rid of the return.", 'start': 1686.721, 'duration': 4.159}, {'end': 1696.457, 'text': "and the curly brace, and we'll go over here.", 'start': 1693.195, 'duration': 3.262}, {'end': 1703.78, 'text': 'get rid of the curly brace and this semicolon, and that should do it as well.', 'start': 1696.457, 'duration': 7.323}, {'end': 1706.381, 'text': "so we'll comment this out save and we still get 460..", 'start': 1703.78, 'duration': 2.601}, {'end': 1707.742, 'text': 'all right.', 'start': 1706.381, 'duration': 1.361}], 'summary': 'Using reduce with arrow function for total and age computation, resulting in 460.', 'duration': 63.135, 'max_score': 1644.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1644607.jpg'}, {'end': 1869.928, 'src': 'embed', 'start': 1839.397, 'weight': 1, 'content': [{'end': 1840.918, 'text': 'Get rid of that and that.', 'start': 1839.397, 'duration': 1.521}, {'end': 1843.403, 'text': 'All right.', 'start': 1843.123, 'duration': 0.28}, {'end': 1844.643, 'text': "And we'll comment this out.", 'start': 1843.543, 'duration': 1.1}, {'end': 1849.764, 'text': 'And save and we get 119 still.', 'start': 1847.484, 'duration': 2.28}, {'end': 1851.525, 'text': 'All right.', 'start': 1851.185, 'duration': 0.34}, {'end': 1857.446, 'text': 'So that is for each map filter, reduce and sort.', 'start': 1852.765, 'duration': 4.681}, {'end': 1862.027, 'text': 'Now you can use any of these together to do certain things.', 'start': 1858.306, 'duration': 3.721}, {'end': 1863.707, 'text': "So I'm going to give you an example.", 'start': 1862.087, 'duration': 1.62}, {'end': 1869.928, 'text': "It's not really the most practical example, but let's let's combine.", 'start': 1863.787, 'duration': 6.141}], 'summary': 'Using map, filter, reduce, and sort, we get 119 as an example.', 'duration': 30.531, 'max_score': 1839.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1839397.jpg'}, {'end': 1972.701, 'src': 'embed', 'start': 1937.028, 'weight': 0, 'content': [{'end': 1941.129, 'text': 'So now we just have an unsorted array of all the ages.', 'start': 1937.028, 'duration': 4.101}, {'end': 1947.012, 'text': "Now, let's say next we want to filter anything that's 40 and over.", 'start': 1941.67, 'duration': 5.342}, {'end': 1951.074, 'text': "OK, I'm doing 40 because we multiplied everything.", 'start': 1947.032, 'duration': 4.042}, {'end': 1964.574, 'text': "So to do that, we'll use a filter and we'll say age and we'll say any age that is greater than or equal to 40.", 'start': 1951.854, 'duration': 12.72}, {'end': 1965.895, 'text': "All right, so let's look at that.", 'start': 1964.574, 'duration': 1.321}, {'end': 1969.879, 'text': 'And now that filtered out anything that was under 40.', 'start': 1966.215, 'duration': 3.664}, {'end': 1972.701, 'text': "Let's do a sort.", 'start': 1969.879, 'duration': 2.822}], 'summary': 'Using filter and sort on an unsorted array of ages, filtering out ages 40 and over.', 'duration': 35.673, 'max_score': 1937.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1937028.jpg'}, {'end': 2053.904, 'src': 'embed', 'start': 2028.853, 'weight': 4, 'content': [{'end': 2033.996, 'text': "because you're only going to learn so much from watching tutorials or even following along with tutorials.", 'start': 2028.853, 'duration': 5.143}, {'end': 2038.258, 'text': 'you want to experiment with your your own things, all right.', 'start': 2033.996, 'duration': 4.262}, {'end': 2040.859, 'text': 'maybe even use some kind of external api.', 'start': 2038.258, 'duration': 2.601}, {'end': 2047.321, 'text': 'pull in the data and see what you can do with it, see what you can create with it using these higher order functions, all right.', 'start': 2040.859, 'duration': 6.462}, {'end': 2047.782, 'text': "so that's it.", 'start': 2047.321, 'duration': 0.461}, {'end': 2050.121, 'text': 'if you guys like this video, please leave a like.', 'start': 2047.782, 'duration': 2.339}, {'end': 2053.904, 'text': "if you're not subscribed and you like this type of video, please do so.", 'start': 2050.121, 'duration': 3.783}], 'summary': 'Experiment with external api data to create using higher order functions.', 'duration': 25.051, 'max_score': 2028.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE2028853.jpg'}], 'start': 1554.63, 'title': 'Data manipulation with higher order functions', 'summary': 'Discusses the use of map, filter, reduce, and sort to manipulate data, showcasing an example where ages are multiplied by 2, filtered for values over 40, sorted, and then added, yielding a total of 798.', 'chapters': [{'end': 1803.814, 'start': 1554.63, 'title': 'Array sum using for loop and reduce', 'summary': 'Explains the process of summing up array elements using for loop and reduce method, showcasing a comparison of the two methods and their outcomes, with the for loop resulting in 460 and the reduce method resulting in 460 as well, and further demonstrates the use of reduce method to calculate the total years for all companies resulting in 118.', 'duration': 249.184, 'highlights': ['The for loop sums up the array elements resulting in 460. The for loop is used to iterate through the ages array and sum up its elements using a variable initialized to zero, resulting in a sum of 460.', 'The reduce method is employed to sum up the array elements yielding a total of 460. The reduce method is utilized to calculate the sum of array elements, resulting in a total of 460, showcasing a more concise and elegant approach compared to the for loop.', 'The reduce method is utilized to calculate the total years for all companies, resulting in 118. The reduce method is further demonstrated to calculate the total years for all companies by subtracting the start year from the end year for each company and summing up the results, resulting in a total of 118.']}, {'end': 2094.748, 'start': 1803.814, 'title': 'Manipulating data with higher order functions', 'summary': 'Discusses using map, filter, reduce, and sort together to manipulate data, resulting in an example where all ages are multiplied by 2, filtered for values over 40, sorted in ascending order, and then added together, yielding a total of 798.', 'duration': 290.934, 'highlights': ['Using map, filter, reduce, and sort together to manipulate data The transcript discusses using map, filter, reduce, and sort together to manipulate data.', 'Example where all ages are multiplied by 2, filtered for values over 40, sorted in ascending order, and then added together, yielding a total of 798 The example demonstrates multiplying all ages by 2, filtering for values over 40, sorting in ascending order, and then adding them together, resulting in a total of 798.', 'Encouragement to experiment with own data set and higher order functions The speaker encourages experimenting with creating new arrays, sorting data, and manipulating arrays using higher order functions with own datasets.']}], 'duration': 540.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/rRgD1yVwIvE/pics/rRgD1yVwIvE1554630.jpg', 'highlights': ['Example where all ages are multiplied by 2, filtered for values over 40, sorted in ascending order, and then added together, yielding a total of 798', 'Using map, filter, reduce, and sort together to manipulate data', 'The reduce method is employed to sum up the array elements yielding a total of 460', 'The for loop sums up the array elements resulting in 460', 'Encouragement to experiment with own data set and higher order functions']}], 'highlights': ['The reduce method is employed to sum up the array elements yielding a total of 460', 'The for loop sums up the array elements resulting in 460', 'The process involves iterating through the companies, comparing their start dates, and returning 1 or -1 based on the comparison, to effectively organize the list in ascending order of start year.', 'Illustrates sorting ages from lowest to highest using the sort method in JavaScript and showcases the use of the console.log to display the sorted ages array.', 'Comparison of start dates is done by passing two companies into a function, comparing the start dates, and returning either 1 or -1 based on the comparison, enabling the sorting process.', "When using the reduce function to sort in ascending order, the expression 'a - b' can be used, and for descending order, 'b - a' can be used (quantifiable).", "The 'sort' function is used to arrange the companies by start year, from the earliest year to the latest, resulting in a sorted list of companies.", 'Example where all ages are multiplied by 2, filtered for values over 40, sorted in ascending order, and then added together, yielding a total of 798', 'Using map, filter, reduce, and sort together to manipulate data', "The demonstration of using multiple 'map' methods in sequence to first square all the numbers and then multiply them by two showcases the flexibility and composability of array methods in JavaScript."]}