title
JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge (Full Course)

description
This course will teach you the most modern features of JavaScript, also known as ES6+. You can also take the interactive version of the course here: https://scrimba.com/g/gintrotoes6 JavaScript is one of the most popular programming languages in the world. It’s used almost everywhere: from large-scale web applications to complex servers to mobile and IoT devices. ⭐️ Course content ⭐️ ⌨️ Template Literals (1:06) ⌨️ Destructuring (5:32) ⌨️ Object Literal (9:42) ⌨️ For of loop (13:44) ⌨️ Spread operator (17:51) ⌨️ Rest operator (20:57) ⌨️ Arrow Functions (23:02) ⌨️ Default Params (25:50) ⌨️ Array.includes() (27:44) ⌨️ Let & const (28:58) ⌨️ Export & import (32:53) ⌨️ String.padStrart(), String.padEnd() (35:29) ⌨️ Classes (38:05) ⌨️ Trailing commas (49:59) ⌨️ Async/Await (51:27) ⌨️ Sets (1:01:19) ⌨️ What's Next (1:04:08) Follow the instructor Dylan Israel on Twitter here: https://twitter.com/PizzaPokerGuy Check out Dylan's intro to JavaScript course: https://youtu.be/_y9oxzTGERs Check out Dylan's YouTube channel: https://www.youtube.com/channel/UC5Wi_NYysX-LfcqT3Hq9Faw If you want to learn more about JavaScript, check out these playlists on our channel: ▶JavaScript Basics: https://www.youtube.com/playlist?list... ▶ES6: https://www.youtube.com/playlist?list... ▶Design Patterns: https://www.youtube.com/playlist?list... ▶Data Structures and Algorithms: https://www.youtube.com/playlist?list... ▶Clean Code: https://www.youtube.com/playlist?list... -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'JavaScript ES6, ES7, ES8: Learn to Code on the Bleeding Edge (Full Course)', 'heatmap': [], 'summary': 'The course covers es6, es7, and es8 features over 17 lessons and four challenges. it discusses javascript string manipulation, es6 object literals, for of loop, variable hoisting, modular coding, javascript classes, async programming, and more, delivered by dylan israel, a content creator, and full-time front-end engineer.', 'chapters': [{'end': 64.501, 'segs': [{'end': 64.501, 'src': 'embed', 'start': 5.482, 'weight': 0, 'content': [{'end': 9.267, 'text': 'All right, ladies and gentlemen, welcome to Introduction to ES6.', 'start': 5.482, 'duration': 3.785}, {'end': 12.33, 'text': 'And you know, we might want to actually call this ES6 Plus,', 'start': 9.647, 'duration': 2.683}, {'end': 20.98, 'text': "because I'm going to throw in some ES7 and ES8 features that I think are good and exciting and that you should know as a JavaScript developer.", 'start': 12.33, 'duration': 8.65}, {'end': 29.728, 'text': "If you're a little unfamiliar with how JavaScript gets new additions to its programming language, the ECMAScript Foundation, who runs JavaScript.", 'start': 21.3, 'duration': 8.428}, {'end': 34.392, 'text': 'at the end of the day, every year they do an update and they release new content.', 'start': 29.728, 'duration': 4.664}, {'end': 37.034, 'text': 'ES6 was 2015, ES7 2016, ES8 2017.', 'start': 34.772, 'duration': 2.262}, {'end': 44.641, 'text': "And so we're going to be talking about some of the latest additions to the language.", 'start': 37.034, 'duration': 7.607}, {'end': 48.205, 'text': 'over 17 lessons and four challenges.', 'start': 45.963, 'duration': 2.242}, {'end': 51.248, 'text': 'I will be your host, if you will, for this course.', 'start': 48.625, 'duration': 2.623}, {'end': 52.249, 'text': 'My name is Dylan Israel.', 'start': 51.288, 'duration': 0.961}, {'end': 54.171, 'text': 'I am a content creator on YouTube.', 'start': 52.329, 'duration': 1.842}, {'end': 56.634, 'text': 'I also have Udemy courses, Scrimba courses.', 'start': 54.532, 'duration': 2.102}, {'end': 58.956, 'text': "I'm also a full-time front-end engineer.", 'start': 57.034, 'duration': 1.922}, {'end': 62.66, 'text': 'And if you click this icon, you can go find some of my videos and check it out.', 'start': 58.996, 'duration': 3.664}, {'end': 64.501, 'text': "But let's go ahead and dive into all the fun.", 'start': 62.76, 'duration': 1.741}], 'summary': 'Introduction to es6 plus covering es7 and es8 features, led by dylan israel, a full-time front-end engineer.', 'duration': 59.019, 'max_score': 5.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI5482.jpg'}], 'start': 5.482, 'title': 'Es6 plus introduction', 'summary': 'Introduces the es6 plus course, covering es6, es7, and es8 features over 17 lessons and four challenges, delivered by dylan israel, a content creator, and full-time front-end engineer.', 'chapters': [{'end': 64.501, 'start': 5.482, 'title': 'Es6 plus introduction', 'summary': 'Introduces the es6 plus course, covering es6, es7, and es8 features over 17 lessons and four challenges, delivered by dylan israel, a content creator, and full-time front-end engineer.', 'duration': 59.019, 'highlights': ['Dylan Israel will cover ES6, ES7, and ES8 features over 17 lessons and four challenges.', 'ECMAScript Foundation releases new content annually, with ES6 in 2015, ES7 in 2016, and ES8 in 2017.', 'Dylan Israel, a content creator on YouTube and full-time front-end engineer, will be the host for the course.']}], 'duration': 59.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI5482.jpg', 'highlights': ['Dylan Israel will cover ES6, ES7, and ES8 features over 17 lessons and four challenges.', 'ECMAScript Foundation releases new content annually, with ES6 in 2015, ES7 in 2016, and ES8 in 2017.', 'Dylan Israel, a content creator on YouTube and full-time front-end engineer, will be the host for the course.']}, {'end': 572.152, 'segs': [{'end': 91.137, 'src': 'embed', 'start': 70.242, 'weight': 2, 'content': [{'end': 79.549, 'text': "Strings historically in JavaScript have been sort of a second class citizen and haven't got as much love as other programming languages might have in the past.", 'start': 70.242, 'duration': 9.307}, {'end': 82.831, 'text': "So what we're going to be talking about right now is template literals.", 'start': 79.589, 'duration': 3.242}, {'end': 86.934, 'text': "And what that's going to allow us to do is going to first, I guess.", 'start': 82.871, 'duration': 4.063}, {'end': 91.137, 'text': "first let's go ahead and showcase how what the issue might've been with strings in the past.", 'start': 86.934, 'duration': 4.203}], 'summary': 'Javascript strings historically received less attention than in other languages, but template literals offer a solution.', 'duration': 20.895, 'max_score': 70.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI70242.jpg'}, {'end': 197.048, 'src': 'embed', 'start': 169.15, 'weight': 0, 'content': [{'end': 178.516, 'text': "And you'll see when we save now we're able to print it out and we can do this much easier easier rather than having to repeat ourselves with pluses and spaces.", 'start': 169.15, 'duration': 9.366}, {'end': 179.356, 'text': "But that's not it.", 'start': 178.856, 'duration': 0.5}, {'end': 181.678, 'text': "There's a lot more that we can do with template literals as well.", 'start': 179.376, 'duration': 2.302}, {'end': 187.301, 'text': 'Template literals also give us an easy way of having variables.', 'start': 182.959, 'duration': 4.342}, {'end': 197.048, 'text': "Say we wanted to have, you know, let num1 equal to 2 and let num2 equal to three, and we didn't know what they were gonna be.", 'start': 187.341, 'duration': 9.707}], 'summary': 'Using template literals for easier variable handling and printing.', 'duration': 27.898, 'max_score': 169.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI169150.jpg'}, {'end': 506.798, 'src': 'embed', 'start': 476.889, 'weight': 4, 'content': [{'end': 480.591, 'text': "Destructuring arrays is another great feature that's been added to JavaScript in recent years.", 'start': 476.889, 'duration': 3.702}, {'end': 484.493, 'text': "It's very similar to how we destructured the objects earlier.", 'start': 481.011, 'duration': 3.482}, {'end': 496.899, 'text': 'So we have this name array and what we want is to essentially create a pointer element to destructure our array so that we can get the first name,', 'start': 484.733, 'duration': 12.166}, {'end': 498.639, 'text': 'the middle name, the last name in this instance.', 'start': 496.899, 'duration': 1.74}, {'end': 502.141, 'text': 'How might we do that? Well, we can go ahead and wrap it.', 'start': 498.98, 'duration': 3.161}, {'end': 506.798, 'text': "Remember how we wrapped it with the object? We wrap it and we'll get first name like so.", 'start': 502.341, 'duration': 4.457}], 'summary': 'Javascript now supports destructuring arrays, allowing easy extraction of specific elements.', 'duration': 29.909, 'max_score': 476.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI476889.jpg'}], 'start': 70.242, 'title': 'Javascript string manipulation', 'summary': 'Discusses the limitations of traditional string concatenation, and introduces template literals as a more efficient and flexible approach, showcasing how they simplify string concatenation and enable easy variable integration. it also demonstrates how to create and display multi-line strings in javascript using slash and template literals, as well as the benefits of destructuring objects and arrays, including shorthand code and reassigning values.', 'chapters': [{'end': 209.855, 'start': 70.242, 'title': 'Template literals in javascript', 'summary': 'Discusses the limitations of traditional string concatenation in javascript, and introduces template literals as a more efficient and flexible approach, showcasing how they simplify string concatenation and enable easy variable integration.', 'duration': 139.613, 'highlights': ['Template literals simplify string concatenation by allowing the use of backticks and placeholders, reducing the need for repetitive concatenation with pluses and spaces.', 'Template literals enable easy integration of variables within strings, providing a flexible way to concatenate variable values directly within the template.', 'Traditional string concatenation in JavaScript using pluses and empty characters can lead to unwieldy and messy code, creating a need for a more efficient approach.']}, {'end': 572.152, 'start': 211.315, 'title': 'Javascript multi-line strings and destructuring', 'summary': 'Demonstrates how to create and display multi-line strings in javascript using slash and template literals, as well as the benefits of destructuring objects and arrays, including shorthand code and reassigning values.', 'duration': 360.837, 'highlights': ['The chapter demonstrates how to create and display multi-line strings in JavaScript using slash and template literals.', 'The benefits of destructuring objects and arrays, including shorthand code and reassigning values.']}], 'duration': 501.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI70242.jpg', 'highlights': ['Template literals simplify string concatenation by allowing the use of backticks and placeholders, reducing the need for repetitive concatenation with pluses and spaces.', 'Template literals enable easy integration of variables within strings, providing a flexible way to concatenate variable values directly within the template.', 'Traditional string concatenation in JavaScript using pluses and empty characters can lead to unwieldy and messy code, creating a need for a more efficient approach.', 'The chapter demonstrates how to create and display multi-line strings in JavaScript using slash and template literals.', 'The benefits of destructuring objects and arrays, including shorthand code and reassigning values.']}, {'end': 821.918, 'segs': [{'end': 668.435, 'src': 'embed', 'start': 641.652, 'weight': 2, 'content': [{'end': 650.349, 'text': "However, object literals give us the ability to, if these keys are the same as the value that they're passing in, we don't actually have to set it.", 'start': 641.652, 'duration': 8.697}, {'end': 651.57, 'text': "It's going to make the assumption.", 'start': 650.449, 'duration': 1.121}, {'end': 656.651, 'text': "So in this case, let's say instead of new city, the key was city.", 'start': 651.63, 'duration': 5.021}, {'end': 659.272, 'text': 'Instead of new state, the key was state.', 'start': 657.032, 'duration': 2.24}, {'end': 668.435, 'text': "What's gonna happen here is it's going to assign the value of city to city and of state to state.", 'start': 659.692, 'duration': 8.743}], 'summary': 'Object literals allow keys to be set as their values, eliminating the need for explicit setting.', 'duration': 26.783, 'max_score': 641.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI641652.jpg'}, {'end': 729.9, 'src': 'embed', 'start': 688.688, 'weight': 0, 'content': [{'end': 694.193, 'text': "Don't try to change your object or change your properties so much so that it doesn't make sense.", 'start': 688.688, 'duration': 5.505}, {'end': 699.558, 'text': 'But object literals is an excellent way for us not to have to write duplicate code.', 'start': 694.534, 'duration': 5.024}, {'end': 704.783, 'text': "that doesn't help in explaining it, but allows us to write less code while still being very descriptive.", 'start': 699.558, 'duration': 5.225}, {'end': 716.986, 'text': "All right, in this challenge, we're going to try and combine the template literal, the object literal, and the object destructuring.", 'start': 710.959, 'duration': 6.027}, {'end': 725.215, 'text': "How might we do this with the setup that we have here? You'll see we have this address maker function taking in a city and state key in the object.", 'start': 717.026, 'duration': 8.189}, {'end': 729.9, 'text': "We then have this new address where we're applying the values that we're passing in.", 'start': 725.595, 'duration': 4.305}], 'summary': 'Using object literals reduces duplicate code, making it more descriptive and concise.', 'duration': 41.212, 'max_score': 688.688, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI688688.jpg'}, {'end': 777.337, 'src': 'embed', 'start': 751.731, 'weight': 6, 'content': [{'end': 757.934, 'text': "So what we're going to do here is we're going to create a constant and we're going to destructure our object.", 'start': 751.731, 'duration': 6.203}, {'end': 765.194, 'text': "We're going to pass in the city, we're going to pass in the state, and we're going to set the reference to the address object that we're passing in.", 'start': 758.612, 'duration': 6.582}, {'end': 770.375, 'text': 'This is going to give us the ability to no longer need to say address.city.', 'start': 766.134, 'duration': 4.241}, {'end': 775.016, 'text': "We could, in theory, say city, city, but that wouldn't use the object literal.", 'start': 770.735, 'duration': 4.281}, {'end': 777.337, 'text': "And so what we're going to do is we're going to get rid of the city.", 'start': 775.296, 'duration': 2.041}], 'summary': 'Creating a constant, destructuring an object to eliminate the need for address.city.', 'duration': 25.606, 'max_score': 751.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI751731.jpg'}, {'end': 821.918, 'src': 'embed', 'start': 787.904, 'weight': 5, 'content': [{'end': 795.629, 'text': "And last but not least, we're just going to console.log our new address using interpolation or template literals.", 'start': 787.904, 'duration': 7.725}, {'end': 802.533, 'text': "And we're going to say new address, city, space, or comma.", 'start': 796.049, 'duration': 6.484}, {'end': 808.217, 'text': "And then we'll say new address, state.", 'start': 803.074, 'duration': 5.143}, {'end': 811.099, 'text': 'And then finally, one more comma.', 'start': 808.857, 'duration': 2.242}, {'end': 816.222, 'text': "And then we'll do a last one here of new address, country.", 'start': 811.399, 'duration': 4.823}, {'end': 818.103, 'text': 'Save it.', 'start': 817.722, 'duration': 0.381}, {'end': 819.81, 'text': "And we're a good go.", 'start': 819.007, 'duration': 0.803}, {'end': 821.918, 'text': "So you'll see Austin, Texas, United States.", 'start': 819.83, 'duration': 2.088}], 'summary': 'Console.log new address with city, state, and country: austin, texas, united states.', 'duration': 34.014, 'max_score': 787.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI787904.jpg'}], 'start': 572.212, 'title': 'Es6 object literals and combining template literal, object literal, and object destructuring', 'summary': 'Discusses es6 object literals, highlighting code reduction and descriptiveness, and demonstrates combining template literals, object literals, and object destructuring to create and log a new address.', 'chapters': [{'end': 704.783, 'start': 572.212, 'title': 'Es6 object literals', 'summary': 'Discusses es6 object literals, emphasizing writing less code while still being descriptive and maintainable, demonstrating how object literals allow for shorthand notation in assigning values to keys, thereby reducing code duplication and maintaining descriptiveness.', 'duration': 132.571, 'highlights': ['Object literals allow for shorthand notation in assigning values to keys, reducing code duplication and maintaining descriptiveness.', 'ES6 emphasizes writing less code while still being readable and maintainable.', 'Object literals in ES6 enable the assignment of values to keys without explicitly specifying the key, reducing the need for duplicate code.', 'Object literals provide a way to structure an array and maintain descriptiveness, highlighting the emphasis on writing less code in ES6.']}, {'end': 821.918, 'start': 710.959, 'title': 'Combining template literal, object literal, and object destructuring', 'summary': 'Demonstrates combining template literals, object literals, and object destructuring to create a new address with city, state, and country values and then log it using destructuring and template literals.', 'duration': 110.959, 'highlights': ['The chapter demonstrates creating a new address by combining template literals, object literals, and object destructuring.', 'It shows how to destructure an object to get the city and state values, allowing for the use of city and state directly without referring to the address object.', "The example output 'Austin, Texas, United States' showcases the successful combination of the three concepts."]}], 'duration': 249.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI572212.jpg', 'highlights': ['Object literals in ES6 enable shorthand notation, reducing code duplication and maintaining descriptiveness.', 'ES6 emphasizes writing less code while still being readable and maintainable.', 'Object literals allow for assigning values to keys without explicitly specifying the key, reducing duplicate code.', 'Object literals provide a way to structure an array and maintain descriptiveness, emphasizing writing less code in ES6.', 'The chapter demonstrates combining template literals, object literals, and object destructuring to create and log a new address.', "The example output 'Austin, Texas, United States' showcases the successful combination of the three concepts.", 'It shows how to destructure an object to get the city and state values, allowing for the use of city and state directly.']}, {'end': 1722.804, 'segs': [{'end': 856.634, 'src': 'embed', 'start': 828.666, 'weight': 0, 'content': [{'end': 832.868, 'text': 'The for of loop is a great addition to the JavaScript language.', 'start': 828.666, 'duration': 4.202}, {'end': 836.41, 'text': 'And let me showcase a little bit of what it does.', 'start': 833.509, 'duration': 2.901}, {'end': 843.735, 'text': 'So we wanted to iterate over all these values in the array and perhaps add it to this total value.', 'start': 836.831, 'duration': 6.904}, {'end': 849.638, 'text': 'And at the end here, all we wanted to do was console log the total of the incomes.', 'start': 844.075, 'duration': 5.563}, {'end': 854.093, 'text': 'we could use the for of loop.', 'start': 852.352, 'duration': 1.741}, {'end': 856.634, 'text': "And it's going to start off as a simple for loop.", 'start': 854.953, 'duration': 1.681}], 'summary': 'The for of loop in javascript iterates through an array and adds values to find the total income.', 'duration': 27.968, 'max_score': 828.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI828666.jpg'}, {'end': 940.013, 'src': 'embed', 'start': 912.722, 'weight': 4, 'content': [{'end': 917.546, 'text': "we're able to do something with it, and so that's really what the for loop for of loop does.", 'start': 912.722, 'duration': 4.824}, {'end': 921.43, 'text': 'is allows us to iterate through an entire entire iterable.', 'start': 917.546, 'duration': 3.884}, {'end': 925.925, 'text': 'So you may have been wondering why is Dylan keep saying iterable and not array??', 'start': 922.443, 'duration': 3.482}, {'end': 931.248, 'text': 'Well, because we can actually use the for of loop with various iterables.', 'start': 926.285, 'duration': 4.963}, {'end': 940.013, 'text': "What is another example of a popular iterable? Let's start off by get rid of our previous logic here because they're no longer going to use total.", 'start': 931.668, 'duration': 8.345}], 'summary': 'The for of loop allows iteration through various iterables, not just arrays.', 'duration': 27.291, 'max_score': 912.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI912722.jpg'}, {'end': 1098.132, 'src': 'embed', 'start': 1075.834, 'weight': 1, 'content': [{'end': 1084.921, 'text': 'So what is the spread operator? This is another great addition to JavaScript and one I use almost on a daily basis at work.', 'start': 1075.834, 'duration': 9.087}, {'end': 1091.787, 'text': "So the spread operator, you'll see here in our setup is we have an array of values and then we're just printing out the values.", 'start': 1086.082, 'duration': 5.705}, {'end': 1092.888, 'text': 'Nothing special here.', 'start': 1092.127, 'duration': 0.761}, {'end': 1096.15, 'text': "Let's go ahead and create this example two.", 'start': 1093.388, 'duration': 2.762}, {'end': 1098.132, 'text': 'And this is going to be an array.', 'start': 1096.891, 'duration': 1.241}], 'summary': 'The spread operator is a useful addition to javascript, employed daily at work, for manipulating arrays.', 'duration': 22.298, 'max_score': 1075.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1075834.jpg'}, {'end': 1402.237, 'src': 'embed', 'start': 1371.977, 'weight': 3, 'content': [{'end': 1378.759, 'text': 'but I find it much more intuitive than having to convert the arguments to an array and get the values that way.', 'start': 1371.977, 'duration': 6.782}, {'end': 1380.74, 'text': 'So the rest operator is a great addition to ES6.', 'start': 1378.799, 'duration': 1.941}, {'end': 1392.585, 'text': "We're going to recycle a little bit of our code from the rest operator section.", 'start': 1387.739, 'duration': 4.846}, {'end': 1395.048, 'text': 'So just a reminder here we have our function.', 'start': 1392.945, 'duration': 2.103}, {'end': 1402.237, 'text': "add, that's taking in a numerous amount of values and using the rest operator, we're going to get an array of these values.", 'start': 1395.048, 'duration': 7.189}], 'summary': 'Es6 rest operator simplifies array handling in functions.', 'duration': 30.26, 'max_score': 1371.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1371977.jpg'}, {'end': 1569.284, 'src': 'embed', 'start': 1518.792, 'weight': 5, 'content': [{'end': 1521.294, 'text': 'And we can also eliminate this return statement.', 'start': 1518.792, 'duration': 2.502}, {'end': 1523.755, 'text': 'And we can eliminate this semicolon.', 'start': 1522.114, 'duration': 1.641}, {'end': 1531.1, 'text': "Now, what we get is a very clean arrow function that will return the values that we're looking for.", 'start': 1523.775, 'duration': 7.325}, {'end': 1539.165, 'text': "And we've eliminated maybe 20 characters of code and a lot of spacing for something that we really didn't need to get going.", 'start': 1531.12, 'duration': 8.045}, {'end': 1540.666, 'text': 'So arrow functions are very powerful.', 'start': 1539.205, 'duration': 1.461}, {'end': 1548.031, 'text': "And they're also just very condense and eliminate a lot of the useless boilerplate when it comes to callback functions.", 'start': 1540.966, 'duration': 7.065}, {'end': 1561.018, 'text': "Default parameters for JavaScript is another new concept, but it's been around in other programming languages for quite some time.", 'start': 1554.212, 'duration': 6.806}, {'end': 1569.284, 'text': "And it provides us a lot of value that's going to stop a lot of forced error checking and forced error prevention.", 'start': 1561.578, 'duration': 7.706}], 'summary': 'Arrow functions and default parameters in javascript reduce code and improve efficiency.', 'duration': 50.492, 'max_score': 1518.792, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1518792.jpg'}, {'end': 1730.907, 'src': 'embed', 'start': 1701.985, 'weight': 7, 'content': [{'end': 1708.327, 'text': 'And so we got introduced to a new method called includes.', 'start': 1701.985, 'duration': 6.342}, {'end': 1712.229, 'text': 'And includes will return a Boolean value of true or false.', 'start': 1708.908, 'duration': 3.321}, {'end': 1715.67, 'text': "So you'll see here when we throw in zero, it's going to return false.", 'start': 1712.549, 'duration': 3.121}, {'end': 1722.804, 'text': "And when we include two here, it's going to return true, because it's contained within the array.", 'start': 1716.17, 'duration': 6.634}, {'end': 1730.907, 'text': 'one thing to keep in mind for this if you are trying to support internet explorer for some unknown reason, you may run into issues.', 'start': 1722.804, 'duration': 8.103}], 'summary': "Introducing 'includes' method for array validation with examples of true and false outcomes.", 'duration': 28.922, 'max_score': 1701.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1701985.jpg'}], 'start': 828.666, 'title': 'Javascript features', 'summary': 'Demonstrates the for of loop for iterating through arrays and strings, and explores es6 features including let keyword, spread operator, rest operator, arrow functions, default parameters, and new array methods, emphasizing their functionality and usage in javascript development.', 'chapters': [{'end': 999.239, 'start': 828.666, 'title': 'Javascript for of loop', 'summary': 'Demonstrates the use of the for of loop in javascript to iterate through arrays and strings, showcasing examples of adding array values and iterating through each character of a string, emphasizing the ability to iterate over various iterable types.', 'duration': 170.573, 'highlights': ['The for of loop is used to iterate through an array and add its values to a total, resulting in a total income of $204,000.', 'The chapter illustrates the iteration through each character of a string using the for of loop, showcasing the ability to iterate over strings as well as arrays.', 'Emphasizes the flexibility of the for of loop to iterate over various iterable types, including maps, sets, and typed arrays.']}, {'end': 1722.804, 'start': 1005.863, 'title': 'Javascript es6 features', 'summary': 'Explores es6 features including let keyword, spread operator, rest operator, arrow functions, default parameters, and new array methods, highlighting their functionality and usage in javascript development.', 'duration': 716.941, 'highlights': ['The spread operator in JavaScript allows for unpacking values from one array and adding them to another, without passing by reference, providing a new way to manipulate arrays.', 'The rest operator is introduced as a powerful feature to obtain a variable number of arguments in a function, eliminating the need for the arguments object and offering more intuitive handling of function inputs.', 'Arrow functions are highlighted for their ability to streamline callback functions, reduce unnecessary boilerplate, and provide a concise syntax for defining functions.', 'The chapter also introduces default parameters in JavaScript, which provide a way to handle undefined values and prevent errors, offering a more robust approach to parameter handling.', "The transcript delves into the introduction of a new array method, 'includes', as an alternative to 'indexOf', providing a more intuitive way to check for the presence of a value in an array."]}], 'duration': 894.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI828666.jpg', 'highlights': ['The for of loop is used to iterate through an array and add its values to a total, resulting in a total income of $204,000.', 'The spread operator in JavaScript allows for unpacking values from one array and adding them to another, without passing by reference, providing a new way to manipulate arrays.', 'The chapter illustrates the iteration through each character of a string using the for of loop, showcasing the ability to iterate over strings as well as arrays.', 'The rest operator is introduced as a powerful feature to obtain a variable number of arguments in a function, eliminating the need for the arguments object and offering more intuitive handling of function inputs.', 'Emphasizes the flexibility of the for of loop to iterate over various iterable types, including maps, sets, and typed arrays.', 'Arrow functions are highlighted for their ability to streamline callback functions, reduce unnecessary boilerplate, and provide a concise syntax for defining functions.', 'The chapter also introduces default parameters in JavaScript, which provide a way to handle undefined values and prevent errors, offering a more robust approach to parameter handling.', "The transcript delves into the introduction of a new array method, 'includes', as an alternative to 'indexOf', providing a more intuitive way to check for the presence of a value in an array."]}, {'end': 1992.806, 'segs': [{'end': 1749.831, 'src': 'embed', 'start': 1722.804, 'weight': 7, 'content': [{'end': 1730.907, 'text': 'one thing to keep in mind for this if you are trying to support internet explorer for some unknown reason, you may run into issues.', 'start': 1722.804, 'duration': 8.103}, {'end': 1742.392, 'text': 'this is not supported by internet explorer, but it is supported by all major web browsers besides ie.', 'start': 1730.907, 'duration': 11.485}, {'end': 1749.831, 'text': "we're going to talk a little bit about letting cons, but to in order to understand why let exist in cons, for that matter,", 'start': 1742.392, 'duration': 7.439}], 'summary': 'Internet explorer does not support the discussed feature, while all major web browsers do.', 'duration': 27.027, 'max_score': 1722.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1722804.jpg'}, {'end': 1815.554, 'src': 'embed', 'start': 1769.957, 'weight': 0, 'content': [{'end': 1778.783, 'text': "and that's because what's called variable hoisting when you, when it comes to JavaScript's var, is it hoists the variables.", 'start': 1769.957, 'duration': 8.826}, {'end': 1789.385, 'text': "And so what JavaScript actually sees when this renders is what's in our commented out code here, where var example, and it hoists it to the root,", 'start': 1778.843, 'duration': 10.542}, {'end': 1791.105, 'text': 'essentially to the function scope level.', 'start': 1789.385, 'duration': 1.72}, {'end': 1795.166, 'text': 'And then it looks like, oh, examples equals five, and then console logs it.', 'start': 1791.645, 'duration': 3.521}, {'end': 1796.446, 'text': 'So it hoists a variable.', 'start': 1795.426, 'duration': 1.02}, {'end': 1800.867, 'text': 'And this is solved by using let and const moving forward.', 'start': 1796.747, 'duration': 4.12}, {'end': 1803.428, 'text': "So let's dive in a little bit about let and const.", 'start': 1800.887, 'duration': 2.541}, {'end': 1810.411, 'text': 'So let essentially is a stricter version of var in which it uses block scope.', 'start': 1804.668, 'duration': 5.743}, {'end': 1812.692, 'text': "So in our case right now, we're getting null.", 'start': 1810.731, 'duration': 1.961}, {'end': 1815.554, 'text': "We're not getting an error, though, when we try a log out example.", 'start': 1812.712, 'duration': 2.842}], 'summary': "Javascript's var hoists variables, solved by using let and const for block scoping.", 'duration': 45.597, 'max_score': 1769.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1769957.jpg'}, {'end': 1866.865, 'src': 'embed', 'start': 1842.028, 'weight': 3, 'content': [{'end': 1847.872, 'text': 'So although var is using hoisting, let does not, and neither does const.', 'start': 1842.028, 'duration': 5.844}, {'end': 1855.537, 'text': "And moving forward, you, for the most part, should be always using let when you're going to have values that are reassignable.", 'start': 1848.432, 'duration': 7.105}, {'end': 1859.56, 'text': "Now let's dive in a little bit about const and how that differs from let.", 'start': 1855.997, 'duration': 3.563}, {'end': 1866.865, 'text': 'Const, as you might have guessed, stands for constant, but it may not work in the exact same way that you would expect.', 'start': 1861.061, 'duration': 5.804}], 'summary': 'Use let for reassignable values, const for constants.', 'duration': 24.837, 'max_score': 1842.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1842028.jpg'}, {'end': 1921.332, 'src': 'embed', 'start': 1893.005, 'weight': 4, 'content': [{'end': 1895.447, 'text': "However, we can't actually reset the value.", 'start': 1893.005, 'duration': 2.442}, {'end': 1900.641, 'text': "Example, when we're dealing with the primitive types, We'll give us an error.", 'start': 1895.787, 'duration': 4.854}, {'end': 1901.802, 'text': "So we'll set this to 10.", 'start': 1900.661, 'duration': 1.141}, {'end': 1904.063, 'text': "It doesn't matter if it's the same type.", 'start': 1901.802, 'duration': 2.261}, {'end': 1909.086, 'text': 'Example, when dealing with the primitive types are read-only properties.', 'start': 1904.443, 'duration': 4.643}, {'end': 1911.887, 'text': "These are things that have been set and you don't plan on changing.", 'start': 1909.126, 'duration': 2.761}, {'end': 1919.191, 'text': "However, where this may get a little bit confusing is this, it's not necessarily the case when we're dealing with arrays.", 'start': 1912.507, 'duration': 6.684}, {'end': 1921.332, 'text': 'So in our case, we have an empty array.', 'start': 1919.591, 'duration': 1.741}], 'summary': 'Cannot reset value for primitive types, but arrays can be empty.', 'duration': 28.327, 'max_score': 1893.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1893005.jpg'}, {'end': 1973.023, 'src': 'embed', 'start': 1939.523, 'weight': 5, 'content': [{'end': 1941.864, 'text': "So that's not okay.", 'start': 1939.523, 'duration': 2.341}, {'end': 1943.645, 'text': 'And that goes the same for objects.', 'start': 1942.204, 'duration': 1.441}, {'end': 1950.109, 'text': 'If we have an empty object here and see empty object, we can actually assign properties to it as well.', 'start': 1943.685, 'duration': 6.424}, {'end': 1952.431, 'text': 'And this will work.', 'start': 1950.81, 'duration': 1.621}, {'end': 1955.642, 'text': 'Similar to how array works.', 'start': 1954.44, 'duration': 1.202}, {'end': 1961.128, 'text': "So although const is sort of a constant theory, it's not exactly.", 'start': 1955.942, 'duration': 5.186}, {'end': 1966.915, 'text': 'You can modify objects and arrays, but you cannot override the data types with those moving forward.', 'start': 1961.188, 'duration': 5.727}, {'end': 1973.023, 'text': "And when it comes to primitive values, the numbers, the strings, and the booleans, you can't change those at all.", 'start': 1967.035, 'duration': 5.988}], 'summary': 'Const can be modified for objects and arrays, not for data types.', 'duration': 33.5, 'max_score': 1939.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1939523.jpg'}], 'start': 1722.804, 'title': 'Javascript variable hoisting and declarations', 'summary': "Discusses variable hoisting, 'var' keyword impact, and 'let' support issues in javascript. it also covers the differences between 'let' and 'const', and the behavior of 'const' with different data types.", 'chapters': [{'end': 1795.166, 'start': 1722.804, 'title': 'Variable hoisting in javascript', 'summary': "Discusses the concept of variable hoisting in javascript, explaining its impact on the code and how it affects the value of variables in certain scenarios, such as when using the 'var' keyword. it also highlights the lack of support for 'let' in internet explorer, and the implications of this for web development.", 'duration': 72.362, 'highlights': ["JavaScript's 'var' keyword hoists variables to the function scope level, which can lead to unexpected behavior in code, as demonstrated by the example where 'example' is logged as null instead of 5.", "Internet Explorer does not support the 'let' keyword, posing potential challenges for developers who need to ensure cross-browser compatibility.", 'Understanding variable hoisting is crucial for comprehending the behavior of JavaScript code, particularly in scenarios involving the declaration and initialization of variables.']}, {'end': 1866.865, 'start': 1795.426, 'title': 'Understanding let and const in javascript', 'summary': 'Explains the differences between let and const in javascript, emphasizing that let uses block scope and is preferable for reassignable values, while const, despite its name, does not work as expected for reassignable values.', 'duration': 71.439, 'highlights': ['Let is a stricter version of var in JavaScript, using block scope and not hoisting, while const also does not hoist.', 'Using let for reassignable values is recommended in JavaScript, to avoid scope-related issues and undefined errors.', 'Const in JavaScript, despite its name, may not work as expected for reassignable values.']}, {'end': 1992.806, 'start': 1866.905, 'title': 'Understanding const in javascript', 'summary': 'Explains the behavior of const in javascript, highlighting that primitive data types like numbers, strings, and booleans are read-only properties, while arrays and objects declared with const can have properties added or modified, but their data type cannot be overridden.', 'duration': 125.901, 'highlights': ['The chapter explains that primitive data types such as numbers, strings, and booleans declared with const are read-only properties, and cannot be changed at all.', 'The chapter highlights that while using const with arrays, properties can be added or modified, but changing the data type results in a syntax error.', 'The chapter also emphasizes that const with objects allows adding and modifying properties, similar to arrays, without allowing the data type to be overridden.']}], 'duration': 270.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1722804.jpg', 'highlights': ['Understanding variable hoisting is crucial for comprehending the behavior of JavaScript code, particularly in scenarios involving the declaration and initialization of variables.', "JavaScript's 'var' keyword hoists variables to the function scope level, which can lead to unexpected behavior in code, as demonstrated by the example where 'example' is logged as null instead of 5.", 'Let is a stricter version of var in JavaScript, using block scope and not hoisting, while const also does not hoist.', 'Using let for reassignable values is recommended in JavaScript, to avoid scope-related issues and undefined errors.', 'The chapter explains that primitive data types such as numbers, strings, and booleans declared with const are read-only properties, and cannot be changed at all.', 'The chapter also emphasizes that const with objects allows adding and modifying properties, similar to arrays, without allowing the data type to be overridden.', 'The chapter highlights that while using const with arrays, properties can be added or modified, but changing the data type results in a syntax error.', "Internet Explorer does not support the 'let' keyword, posing potential challenges for developers who need to ensure cross-browser compatibility.", 'Const in JavaScript, despite its name, may not work as expected for reassignable values.']}, {'end': 2276.48, 'segs': [{'end': 2018.321, 'src': 'embed', 'start': 1992.806, 'weight': 0, 'content': [{'end': 2000.031, 'text': 'allow our code to be more modular in nature, which lends it to be more easily organized, which is a great thing.', 'start': 1992.806, 'duration': 7.225}, {'end': 2006.755, 'text': "How do they work? What do they do? Well, let's take our example.js file that we have here and define.", 'start': 2001.152, 'duration': 5.603}, {'end': 2010.657, 'text': "In this case, we're going to define just a variable, a const variable.", 'start': 2006.835, 'duration': 3.822}, {'end': 2018.321, 'text': "And the reason that you might do something like that is you may have a data set that you're going to use by multiple parts of your application,", 'start': 2011.057, 'duration': 7.264}], 'summary': 'Modular code allows for better organization and reusability.', 'duration': 25.515, 'max_score': 1992.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1992806.jpg'}, {'end': 2061.181, 'src': 'embed', 'start': 2028.826, 'weight': 2, 'content': [{'end': 2031.006, 'text': "And we'll go ahead and throw in maybe a 1, a 2, and a 3.", 'start': 2028.826, 'duration': 2.18}, {'end': 2034.547, 'text': "Doesn't really matter in this case.", 'start': 2031.006, 'duration': 3.541}, {'end': 2043.989, 'text': 'So this export allows us to, in this case, export data, which we can then import in another application.', 'start': 2034.987, 'duration': 9.002}, {'end': 2045.529, 'text': 'You can do classes.', 'start': 2044.589, 'duration': 0.94}, {'end': 2049.168, 'text': "You can do enums if you're working in TypeScript and things like that.", 'start': 2045.549, 'duration': 3.619}, {'end': 2052.389, 'text': "Let's go ahead and show how we can import it.", 'start': 2050.25, 'duration': 2.139}, {'end': 2055.17, 'text': "So we'll have this import and then these two curly braces.", 'start': 2052.489, 'duration': 2.681}, {'end': 2061.181, 'text': "Now remember how we had data here? That is what we're going to be importing within these curly braces.", 'start': 2055.21, 'duration': 5.971}], 'summary': 'The export allows for importing data into another application, including classes and enums.', 'duration': 32.355, 'max_score': 2028.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2028826.jpg'}, {'end': 2165.126, 'src': 'embed', 'start': 2140.634, 'weight': 3, 'content': [{'end': 2149.076, 'text': 'What this does is it gives us a way to add values to the starter string and add values to the end of the string, depending on how long the string is.', 'start': 2140.634, 'duration': 8.442}, {'end': 2153.978, 'text': "So let's take the example here, which is my name, which is five letters long.", 'start': 2149.116, 'duration': 4.862}, {'end': 2158.539, 'text': "What we're going to take in, what we're going to call on this is the pad start method.", 'start': 2154.818, 'duration': 3.721}, {'end': 2165.126, 'text': "method, and this is going to allow us to put in an integer in this case 10, and then we're going to follow up.", 'start': 2159.184, 'duration': 5.942}], 'summary': 'The pad start method adds values to a string, example: 5-letter name, using an integer (e.g. 10).', 'duration': 24.492, 'max_score': 2140.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2140634.jpg'}, {'end': 2268.193, 'src': 'embed', 'start': 2240.421, 'weight': 5, 'content': [{'end': 2244.525, 'text': "But besides that, you'll see that we have a pad start to 100 and a pad end to 1.", 'start': 2240.421, 'duration': 4.104}, {'end': 2247.627, 'text': 'What do you think is going to happen to our string when we do that?', 'start': 2244.525, 'duration': 3.102}, {'end': 2250.24, 'text': 'Did you come up with some guesses??', 'start': 2249.039, 'duration': 1.201}, {'end': 2256.645, 'text': 'If so, and you guessed that it add an empty string, you would have been right for our 100 one right here.', 'start': 2250.62, 'duration': 6.025}, {'end': 2258.966, 'text': "And you'll see now it's going to print it out.", 'start': 2257.205, 'duration': 1.761}, {'end': 2261.989, 'text': "We get that empty string, but it's actually going to print out.", 'start': 2258.987, 'duration': 3.002}, {'end': 2265.151, 'text': "If we call dot length on it, you'll see the length of it's a hundred.", 'start': 2262.249, 'duration': 2.902}, {'end': 2268.193, 'text': "There's like 80 empty characters on here.", 'start': 2265.451, 'duration': 2.742}], 'summary': 'Using pad start and pad end to add empty string to a string, resulting in a length of 100 with 80 empty characters.', 'duration': 27.772, 'max_score': 2240.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2240421.jpg'}], 'start': 1992.806, 'title': 'Modular code and data importing', 'summary': 'Discusses modular coding and data importing, showcasing the use of const variables and export/import functionality to organize code, allowing for easier access and use of shared data across multiple parts of an application. it also introduces javascript pad start and pad end methods, allowing users to add values to the start and end of a string, with examples demonstrating their usage and optional parameters, and a mention of potential use cases in algorithm practice.', 'chapters': [{'end': 2114.67, 'start': 1992.806, 'title': 'Modular code and data importing', 'summary': 'Discusses modular coding and data importing, showcasing the use of const variables and export/import functionality to organize code, allowing for easier access and use of shared data across multiple parts of an application.', 'duration': 121.864, 'highlights': ['The chapter discusses modular coding and data importing', 'Showcases the use of const variables and export/import functionality', 'Demonstrates how to import and export data']}, {'end': 2276.48, 'start': 2118.038, 'title': 'Javascript pad start and pad end methods', 'summary': 'Introduces javascript pad start and pad end methods, allowing users to add values to the start and end of a string, with examples demonstrating their usage and optional parameters, and a mention of potential use cases in algorithm practice.', 'duration': 158.442, 'highlights': ['The JavaScript pad start and pad end methods allow users to add values to the start and end of a string, with an example demonstrating the addition of characters to a string based on its length.', 'The second parameter when using the pad start and pad end methods is optional, as demonstrated with an example of passing just a number as the second parameter.', 'The transcript mentions potential use cases for the pad start and pad end methods, such as in algorithm practice, and provides a demonstration using a very long string with pad start to 100 and pad end to 1, resulting in the addition of an empty string and ignoring the pad end respectively.']}], 'duration': 283.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI1992806.jpg', 'highlights': ['The chapter discusses modular coding and data importing', 'Showcases the use of const variables and export/import functionality', 'Demonstrates how to import and export data', 'The JavaScript pad start and pad end methods allow users to add values to the start and end of a string, with an example demonstrating the addition of characters to a string based on its length.', 'The second parameter when using the pad start and pad end methods is optional, as demonstrated with an example of passing just a number as the second parameter.', 'The transcript mentions potential use cases for the pad start and pad end methods, such as in algorithm practice, and provides a demonstration using a very long string with pad start to 100 and pad end to 1, resulting in the addition of an empty string and ignoring the pad end respectively.']}, {'end': 2721.623, 'segs': [{'end': 2346.086, 'src': 'embed', 'start': 2303.441, 'weight': 0, 'content': [{'end': 2307.064, 'text': "It's going to be one of the longer sections of this course, but stick with it.", 'start': 2303.441, 'duration': 3.623}, {'end': 2308.865, 'text': "It's a really important concept.", 'start': 2307.224, 'duration': 1.641}, {'end': 2313.487, 'text': "So let's start by jumping into our Animal.js file and define a class.", 'start': 2308.885, 'duration': 4.602}, {'end': 2315.288, 'text': 'You do that with this class keyword.', 'start': 2313.527, 'duration': 1.761}, {'end': 2319.051, 'text': "In our example, we're going to use an animal because I have three cats, and I love animals.", 'start': 2315.389, 'duration': 3.662}, {'end': 2320.952, 'text': "So we've defined a class here.", 'start': 2319.651, 'duration': 1.301}, {'end': 2321.932, 'text': "It doesn't do anything yet.", 'start': 2320.972, 'duration': 0.96}, {'end': 2325.555, 'text': 'But we need to build a instance of this.', 'start': 2323.053, 'duration': 2.502}, {'end': 2328.176, 'text': 'And to do that, we have to set up something called a constructor.', 'start': 2325.655, 'duration': 2.521}, {'end': 2334.34, 'text': 'So our constructor here essentially sets some values when we create it.', 'start': 2328.617, 'duration': 5.723}, {'end': 2337.362, 'text': 'In our case, maybe an animal has a type.', 'start': 2334.82, 'duration': 2.542}, {'end': 2342.742, 'text': "And we'll also say it has, you know, we'll say legs.", 'start': 2338.838, 'duration': 3.904}, {'end': 2344.384, 'text': 'Every animal should have legs.', 'start': 2343.263, 'duration': 1.121}, {'end': 2346.086, 'text': "And we'll go from there.", 'start': 2345.345, 'duration': 0.741}], 'summary': 'In javascript, defining a class animal with a constructor setting type and legs for instance creation.', 'duration': 42.645, 'max_score': 2303.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2303441.jpg'}, {'end': 2536.142, 'src': 'embed', 'start': 2510.38, 'weight': 4, 'content': [{'end': 2515.803, 'text': "And while we're at it, why don't we go and practice a little bit of the default params because we covered that earlier.", 'start': 2510.38, 'duration': 5.423}, {'end': 2517.343, 'text': "And we'll say meow.", 'start': 2516.343, 'duration': 1}, {'end': 2518.604, 'text': "We'll just make the assumption.", 'start': 2517.383, 'duration': 1.221}, {'end': 2520.645, 'text': "Actually, we'll just say loud.", 'start': 2518.624, 'duration': 2.021}, {'end': 2521.705, 'text': 'Loud noise.', 'start': 2521.125, 'duration': 0.58}, {'end': 2523.326, 'text': 'There we go.', 'start': 2521.725, 'duration': 1.601}, {'end': 2524.927, 'text': 'And that should work just fine.', 'start': 2523.586, 'duration': 1.341}, {'end': 2526.548, 'text': "So now we'll go to index.ts.", 'start': 2524.967, 'duration': 1.581}, {'end': 2528.548, 'text': 'And we can say cat.makeNoise.', 'start': 2526.928, 'duration': 1.62}, {'end': 2536.142, 'text': "It's going to console.log loud noise out from the function that we passed in.", 'start': 2531.519, 'duration': 4.623}], 'summary': "Practicing default params by logging 'loud noise' from the function passed in.", 'duration': 25.762, 'max_score': 2510.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2510380.jpg'}, {'end': 2578.484, 'src': 'embed', 'start': 2553.071, 'weight': 6, 'content': [{'end': 2563.295, 'text': 'And what static allows us to do is essentially create a function in our class, in our animal class in this instance,', 'start': 2553.071, 'duration': 10.224}, {'end': 2566.356, 'text': "where we don't actually have to create an instance of animal to use it.", 'start': 2563.295, 'duration': 3.061}, {'end': 2575.122, 'text': "This is often what happens when you're creating a large library or you're importing someone's stuff and you don't have to create a instance of that class.", 'start': 2566.576, 'duration': 8.546}, {'end': 2578.484, 'text': "So let's create a static.", 'start': 2575.582, 'duration': 2.902}], 'summary': 'Static in classes allows creating functions without needing class instances.', 'duration': 25.413, 'max_score': 2553.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2553071.jpg'}, {'end': 2660.537, 'src': 'embed', 'start': 2633.255, 'weight': 1, 'content': [{'end': 2638.057, 'text': "and that it's just going to take in some properties, perhaps, and return some data or run some.", 'start': 2633.255, 'duration': 4.802}, {'end': 2645.689, 'text': 'Another great option when it comes to classes is the ability to create a get method.', 'start': 2639.005, 'duration': 6.684}, {'end': 2652.293, 'text': 'So what is a get method? A get method is really a property you want to create only to return some value.', 'start': 2645.729, 'duration': 6.564}, {'end': 2657.916, 'text': "So let's go ahead and console out our static or get rid of our static method here and comment this back in.", 'start': 2652.353, 'duration': 5.563}, {'end': 2660.537, 'text': "And we'll go ahead and just delete this.", 'start': 2658.676, 'duration': 1.861}], 'summary': 'Exploring classes and the creation of get methods for returning data.', 'duration': 27.282, 'max_score': 2633.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2633255.jpg'}], 'start': 2276.54, 'title': 'Javascript classes and functions', 'summary': 'Covers javascript classes, including defining, creating instances, setting values, and object-oriented programming. it also discusses defining functions and methods in classes, including default parameters, static functions, and getters, with illustrative examples.', 'chapters': [{'end': 2484.311, 'start': 2276.54, 'title': 'Javascript classes - introduction', 'summary': "Introduces javascript classes, demonstrating how to define a class, create an instance, set values using a constructor, and access/modify properties, emphasizing the importance of object-oriented programming. it highlights using 'class' keyword, setting properties using 'constructor', and creating and modifying instances of a class.", 'duration': 207.771, 'highlights': ['The chapter introduces JavaScript classes, demonstrating how to define a class, create an instance, set values using a constructor, and access/modify properties, emphasizing the importance of object-oriented programming.', "We've defined a class using the 'class' keyword and showcased the use of a constructor to set values, exemplifying the object-oriented approach in JavaScript.", "Creating an instance of a class is illustrated by initializing a variable and setting properties such as 'type' and 'legs', showcasing the ease of access and modification of properties for the class instances."]}, {'end': 2721.623, 'start': 2485.523, 'title': 'Defining functions and methods in classes', 'summary': 'Discusses defining functions and methods in classes, covering default parameters, static functions, and getters, with examples and explanations.', 'duration': 236.1, 'highlights': ['The chapter covers defining functions and methods in classes, including default parameters, static functions, and getters.', "It demonstrates the usage of default parameters in a function, using 'loud noise' as an example.", 'Explains the concept of static functions in classes, allowing the creation of functions without needing to create an instance of the class.', 'Illustrates the creation of a getter method in a class to return specific values as properties of the object.']}], 'duration': 445.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2276540.jpg', 'highlights': ['The chapter introduces JavaScript classes, demonstrating how to define a class, create an instance, set values using a constructor, and access/modify properties, emphasizing the importance of object-oriented programming.', 'The chapter covers defining functions and methods in classes, including default parameters, static functions, and getters.', "Creating an instance of a class is illustrated by initializing a variable and setting properties such as 'type' and 'legs', showcasing the ease of access and modification of properties for the class instances.", "We've defined a class using the 'class' keyword and showcased the use of a constructor to set values, exemplifying the object-oriented approach in JavaScript.", "It demonstrates the usage of default parameters in a function, using 'loud noise' as an example.", 'Illustrates the creation of a getter method in a class to return specific values as properties of the object.', 'Explains the concept of static functions in classes, allowing the creation of functions without needing to create an instance of the class.']}, {'end': 3085.178, 'segs': [{'end': 2810.352, 'src': 'embed', 'start': 2786.558, 'weight': 0, 'content': [{'end': 2795.022, 'text': "So what we want to do is we want to export a class, and in this case it's going to be cat, that extends the animal class.", 'start': 2786.558, 'duration': 8.464}, {'end': 2802.586, 'text': "That's going to allow us to inherit some properties from that, as well as overwrite the ones that we want, right? And the one that.", 'start': 2795.062, 'duration': 7.524}, {'end': 2807.491, 'text': "So we're going to inherit this constructor, We're not going to have our own constructor.", 'start': 2802.586, 'duration': 4.905}, {'end': 2810.352, 'text': 'But if we did, we could do that.', 'start': 2807.531, 'duration': 2.821}], 'summary': "Export a class 'cat' extending 'animal' to inherit/overwrite properties.", 'duration': 23.794, 'max_score': 2786.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2786558.jpg'}, {'end': 2888.024, 'src': 'embed', 'start': 2861.384, 'weight': 2, 'content': [{'end': 2868.233, 'text': "And then we would also go about it the same way here, where we'd say this.tail is equal to tail.", 'start': 2861.384, 'duration': 6.849}, {'end': 2873.582, 'text': "Now we're not going to do that in this instance, but I wanted to bring that up that you may run into some issues as well,", 'start': 2868.581, 'duration': 5.001}, {'end': 2877.082, 'text': 'as you can use super to call some functions from the parent class.', 'start': 2873.582, 'duration': 3.5}, {'end': 2879.903, 'text': 'But I just wanted to mention this.', 'start': 2878.563, 'duration': 1.34}, {'end': 2884.424, 'text': "Let's go ahead and keep moving forward and see how we can override a method.", 'start': 2881.083, 'duration': 3.341}, {'end': 2888.024, 'text': "In this case, we're going to override this make noise method.", 'start': 2884.444, 'duration': 3.58}], 'summary': "Discussion on using 'super' to call parent class functions and overriding a method.", 'duration': 26.64, 'max_score': 2861.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2861384.jpg'}, {'end': 3010.374, 'src': 'embed', 'start': 2955.913, 'weight': 3, 'content': [{'end': 2960.66, 'text': "we didn't really showcase it, but we now, even though we're using our cat class,", 'start': 2955.913, 'duration': 4.747}, {'end': 2967.069, 'text': "we've actually inherited the properties and the types and the methods from our parent animal class.", 'start': 2960.66, 'duration': 6.409}, {'end': 2970.434, 'text': 'So we can get that metadata, for instance.', 'start': 2968.211, 'duration': 2.223}, {'end': 2974.547, 'text': "And you'll see here, we're going to get the type is cat, legs is four.", 'start': 2971.445, 'duration': 3.102}, {'end': 2980.87, 'text': "So as you're starting using this object-oriented approach, I would suggest using that lightly.", 'start': 2975.147, 'duration': 5.723}, {'end': 2988.694, 'text': 'A lot of times people create very tightly coupled parent and child classes, and sometimes they should just be separate classes.', 'start': 2980.91, 'duration': 7.784}, {'end': 2994.697, 'text': 'But in certain instances, it does make sense to extend your parent class out.', 'start': 2989.915, 'duration': 4.782}, {'end': 2997.479, 'text': 'And here is a good example of how we might do that.', 'start': 2995.258, 'duration': 2.221}, {'end': 3010.374, 'text': "A debatable nice feature, I'm not too big a fan of this, but a new feature added in ES6 is trailing commas.", 'start': 3003.57, 'duration': 6.804}], 'summary': 'Using object-oriented approach, we inherited properties from parent class to showcase cat type and 4 legs.', 'duration': 54.461, 'max_score': 2955.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2955913.jpg'}], 'start': 2721.623, 'title': 'Inheriting and overriding in javascript', 'summary': 'Discusses inheriting classes in javascript including extending a parent class, overwriting properties, and using the super keyword. it also covers overriding methods, inheritance of properties and methods, and introduces trailing commas in es6.', 'chapters': [{'end': 2879.903, 'start': 2721.623, 'title': 'Inheriting classes in javascript', 'summary': 'Discusses inheriting classes in javascript, demonstrating how to extend a parent class to inherit properties while also overwriting them, and mentions the use of the super keyword and potential issues in the process.', 'duration': 158.28, 'highlights': ['Inheriting classes allows for extending a parent class to inherit properties and overwrite them, such as creating a cat class that extends the animal class.', 'The use of super keyword is mentioned in the context of extending a class and calling functions from the parent class.', 'Potential issues, such as the need to address parameter mismatches and use of super to call functions from the parent class, are also discussed.']}, {'end': 3085.178, 'start': 2881.083, 'title': 'Overriding methods in javascript', 'summary': 'Discusses how to override methods in javascript, emphasizing the process of overwriting a parent class in a child class, showcasing the inheritance of properties and methods, and introducing the concept of trailing commas in es6.', 'duration': 204.095, 'highlights': ['The process of overwriting a parent class in a child class allows for creating more unique and specific methods while retaining access to other methods, as demonstrated by the example of overriding the makeNoise method in the cat class.', 'Inheritance of properties and methods from the parent animal class is showcased through the example of accessing metadata such as type and legs in the cat class.', 'The introduction of trailing commas in ES6 is discussed, allowing for the inclusion of commas after the last element in a function or object without causing logic errors, although the practical utility of this feature is debated.']}], 'duration': 363.555, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI2721623.jpg', 'highlights': ['Inheriting classes allows extending a parent class to inherit properties and overwrite them', 'The process of overwriting a parent class in a child class allows for creating more unique and specific methods', 'The use of super keyword is mentioned in the context of extending a class and calling functions from the parent class', 'Inheritance of properties and methods from the parent animal class is showcased through the example of accessing metadata', 'Potential issues, such as the need to address parameter mismatches and use of super to call functions from the parent class, are discussed', 'The introduction of trailing commas in ES6 is discussed, allowing for the inclusion of commas after the last element in a function or object']}, {'end': 3310.48, 'segs': [{'end': 3119.849, 'src': 'embed', 'start': 3085.578, 'weight': 1, 'content': [{'end': 3086.058, 'text': 'Be aware of it.', 'start': 3085.578, 'duration': 0.48}, {'end': 3094.534, 'text': 'So this is going to be a little bit of a longer section.', 'start': 3092.392, 'duration': 2.142}, {'end': 3103.384, 'text': "We're going to be talking about promises, async and await and how they are all sort of related when working with them in the front end in JavaScript.", 'start': 3094.554, 'duration': 8.83}, {'end': 3106.661, 'text': "Let's start by talking about what we have on our page here.", 'start': 3104.099, 'duration': 2.562}, {'end': 3109.843, 'text': "You'll see I have this constant that is a URL.", 'start': 3106.681, 'duration': 3.162}, {'end': 3119.849, 'text': "That's gonna link us to a top 100 of the all-time active users on freecodecamp.com, which is a open source JavaScript site.", 'start': 3109.883, 'duration': 9.966}], 'summary': 'Discussion on promises, async, and await in front-end javascript, with a focus on a url linking to the top 100 active users on freecodecamp.com.', 'duration': 34.271, 'max_score': 3085.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3085578.jpg'}, {'end': 3158.231, 'src': 'embed', 'start': 3130.817, 'weight': 0, 'content': [{'end': 3137.461, 'text': "We're going to go and do an Ajax call, and we're going to be using fetch, which returns a promise.", 'start': 3130.817, 'duration': 6.644}, {'end': 3139.062, 'text': "And we're going to showcase how to handle that.", 'start': 3137.481, 'duration': 1.581}, {'end': 3144.986, 'text': "And then later on, we're going to showcase a little bit of async and await and how we might use that alongside promises.", 'start': 3139.302, 'duration': 5.684}, {'end': 3146.507, 'text': "So let's get going here.", 'start': 3145.026, 'duration': 1.481}, {'end': 3148.628, 'text': "You'll see we have our function, get top 100 campers.", 'start': 3146.647, 'duration': 1.981}, {'end': 3152.07, 'text': 'um, this is not like call of duty campers.', 'start': 3150.229, 'duration': 1.841}, {'end': 3154.17, 'text': 'these are the campers of free code camp.', 'start': 3152.07, 'duration': 2.1}, {'end': 3158.231, 'text': 'we use the fetch method here, which what this is going to do?', 'start': 3154.17, 'duration': 4.061}], 'summary': 'Demonstrating fetch and promises, followed by async and await usage.', 'duration': 27.414, 'max_score': 3130.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3130817.jpg'}, {'end': 3295.295, 'src': 'embed', 'start': 3172.515, 'weight': 2, 'content': [{'end': 3173.895, 'text': "that's what that means.", 'start': 3172.515, 'duration': 1.38}, {'end': 3177.6, 'text': 'and uh, so fetch is returning a promise.', 'start': 3173.895, 'duration': 3.705}, {'end': 3178.881, 'text': "then we're going to handle that.", 'start': 3177.6, 'duration': 1.281}, {'end': 3187.888, 'text': 'uh, response object, which we then said hey, when the promise actually gets delivered, uh, you can kind of think of like, hey,', 'start': 3178.881, 'duration': 9.007}, {'end': 3195.754, 'text': "we promised to send you some data with fetch and then says okay, when, when you actually send me the data, i'll do something with it in the meantime,", 'start': 3187.888, 'duration': 7.866}, {'end': 3196.895, 'text': 'just keep running your code.', 'start': 3195.754, 'duration': 1.141}, {'end': 3202.899, 'text': "that's sort of how asynchronous, how items work and how promises work in this case, and then says hey.", 'start': 3196.895, 'duration': 6.004}, {'end': 3205.461, 'text': "I'm gonna give you a response.", 'start': 3203.98, 'duration': 1.481}, {'end': 3213.426, 'text': "Just say are for response and what we're going to need to do is first we're going to need to turn that into Jason.", 'start': 3207.562, 'duration': 5.864}, {'end': 3216.588, 'text': "Otherwise we're not going to know what to do with it.", 'start': 3214.127, 'duration': 2.461}, {'end': 3220.388, 'text': "Our JavaScript doesn't know what to do with it.", 'start': 3218.827, 'duration': 1.561}, {'end': 3223.749, 'text': 'And so we have to convert that promise into something that we can use.', 'start': 3220.708, 'duration': 3.041}, {'end': 3232.412, 'text': 'Once we do that, we can then take that promise, which is another promise and we can which.', 'start': 3224.989, 'duration': 7.423}, {'end': 3237.494, 'text': "at this point we can say it's JSON and we can do something with that data.", 'start': 3232.412, 'duration': 5.082}, {'end': 3243.896, 'text': "What do we want to do with it? Well, let's just say we want to console.log the first value of that JSON.", 'start': 3237.654, 'duration': 6.242}, {'end': 3247.357, 'text': 'This is going to return an array of a lot of values.', 'start': 3245.056, 'duration': 2.301}, {'end': 3250.219, 'text': 'and put a little semicolon here.', 'start': 3248.576, 'duration': 1.643}, {'end': 3254.004, 'text': "And we'll just see that our asynchronous call got set up.", 'start': 3251.721, 'duration': 2.283}, {'end': 3257.229, 'text': 'You can see here we get this object from our AJAX call.', 'start': 3254.204, 'duration': 3.025}, {'end': 3264.846, 'text': "Now while we're at it, let's go ahead and showcase how we might catch this Ajax call in case an error is thrown.", 'start': 3258.464, 'duration': 6.382}, {'end': 3268.027, 'text': "And that's, I might've already given it away, is by catching it.", 'start': 3264.906, 'duration': 3.121}, {'end': 3273.868, 'text': "And so you'll see here, catch takes in a error result.", 'start': 3268.587, 'duration': 5.281}, {'end': 3279.23, 'text': "In our case, we're not gonna use it because it's gonna look identical to the errors we would get in our application.", 'start': 3274.128, 'duration': 5.102}, {'end': 3284.811, 'text': "So if for any reason our server side fails on the fetch or converting it to JSON, we're gonna get that error.", 'start': 3279.73, 'duration': 5.081}, {'end': 3292.174, 'text': "So let's say that we, Wanted to just console.log failed so that we know that it's firing off.", 'start': 3285.271, 'duration': 6.903}, {'end': 3295.295, 'text': "And we're going to go ahead and change this.", 'start': 3292.774, 'duration': 2.521}], 'summary': 'Using fetch to handle promises and asynchronous data in javascript, demonstrating error handling using catch', 'duration': 122.78, 'max_score': 3172.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3172515.jpg'}], 'start': 3085.578, 'title': 'Asynchronous javascript programming', 'summary': 'Covers the usage of promises, async and await in javascript, demonstrating asynchronous calls using fetch, working with asynchronous promises, converting promises into json, and handling asynchronous ajax calls and errors.', 'chapters': [{'end': 3195.754, 'start': 3085.578, 'title': 'Promises, async & await in javascript', 'summary': 'Covers the usage of promises, async and await in front-end javascript, demonstrating an asynchronous call using fetch which returns a promise, and showcasing the handling of promises and async await.', 'duration': 110.176, 'highlights': ['Demonstrating asynchronous call using fetch which returns a promise', 'Handling of promises and async await', 'Explanation of how fetch returns a promise of type response']}, {'end': 3247.357, 'start': 3195.754, 'title': 'Working with asynchronous promises', 'summary': 'Explores the concept of asynchronous programming using promises, highlighting the process of converting a promise into json and performing an action on the resulting data, such as logging the first value of the json array.', 'duration': 51.603, 'highlights': ['The process of converting a promise into JSON is crucial for enabling JavaScript to utilize the response data effectively.', 'Async programming with promises involves handling the response data, such as logging specific values from the JSON array.', 'Understanding how asynchronous operations and promises function in JavaScript is essential for effective programming.']}, {'end': 3310.48, 'start': 3248.576, 'title': 'Asynchronous ajax call and error handling', 'summary': 'Demonstrates setting up an asynchronous ajax call and handling errors, showcasing catching an error in the ajax call and the consequences of an error in the server-side fetch or json conversion.', 'duration': 61.904, 'highlights': ['Setting up asynchronous AJAX call and obtaining the object from the call.', 'Catching and handling errors in the AJAX call by showcasing the catch method and its use.', 'Demonstrating the consequence of an error in the server-side fetch or JSON conversion by logging a failed message.']}], 'duration': 224.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3085578.jpg', 'highlights': ['Demonstrating asynchronous call using fetch which returns a promise', 'Handling of promises and async await', 'Explanation of how fetch returns a promise of type response', 'The process of converting a promise into JSON is crucial for enabling JavaScript to utilize the response data effectively', 'Async programming with promises involves handling the response data, such as logging specific values from the JSON array', 'Understanding how asynchronous operations and promises function in JavaScript is essential for effective programming', 'Setting up asynchronous AJAX call and obtaining the object from the call', 'Catching and handling errors in the AJAX call by showcasing the catch method and its use', 'Demonstrating the consequence of an error in the server-side fetch or JSON conversion by logging a failed message']}, {'end': 3924.991, 'segs': [{'end': 3355.703, 'src': 'embed', 'start': 3312.355, 'weight': 0, 'content': [{'end': 3318.337, 'text': "So, now that we've done our Ajax call, our asynchronous call, and we've resolved the promises and everything's working,", 'start': 3312.355, 'duration': 5.982}, {'end': 3324.94, 'text': "let's show how we might do this with less code, using asynchronous and await for an Ajax call.", 'start': 3318.337, 'duration': 6.603}, {'end': 3333.303, 'text': "Now, just keep in mind, you don't have to use async and await or promises just for something when it's hitting a server.", 'start': 3324.98, 'duration': 8.323}, {'end': 3334.704, 'text': "That's the most common instance.", 'start': 3333.343, 'duration': 1.361}, {'end': 3341.507, 'text': "But let's say you had a timer and it was timing out for three, four seconds and you wanted to have something to delay it.", 'start': 3335.024, 'duration': 6.483}, {'end': 3344.189, 'text': 'You might use promises or async await for that.', 'start': 3341.747, 'duration': 2.442}, {'end': 3347.971, 'text': 'I just wanted to show you the most common one, which is server calls.', 'start': 3344.509, 'duration': 3.462}, {'end': 3350.294, 'text': 'and get calls specifically.', 'start': 3348.991, 'duration': 1.303}, {'end': 3355.703, 'text': "So let's go and fetch that data except instead of doing it with the promises, we're gonna do it with the async and await.", 'start': 3350.614, 'duration': 5.089}], 'summary': 'Demonstrating the use of async and await for server calls and timeouts.', 'duration': 43.348, 'max_score': 3312.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3312355.jpg'}, {'end': 3686.074, 'src': 'embed', 'start': 3655.828, 'weight': 2, 'content': [{'end': 3667.057, 'text': "and now we're handling, getting data from asynchronous places or from asynchronous endpoints or, in our case, using promises with timeouts.", 'start': 3655.828, 'duration': 11.229}, {'end': 3676.644, 'text': "And it's another way that we can use this and an important concept moving forward when you're trying to deal with databases and getting data receiving data.", 'start': 3667.157, 'duration': 9.487}, {'end': 3678.526, 'text': 'So I hope you found this helpful.', 'start': 3677.325, 'duration': 1.201}, {'end': 3686.074, 'text': 'So this has been a great addition to JavaScript.', 'start': 3683.373, 'duration': 2.701}], 'summary': 'Handling asynchronous data using promises is crucial in javascript.', 'duration': 30.246, 'max_score': 3655.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3655828.jpg'}, {'end': 3801.146, 'src': 'embed', 'start': 3756.089, 'weight': 4, 'content': [{'end': 3762.855, 'text': "And add works the same way where if the set already has a value, it's not going to add it.", 'start': 3756.089, 'duration': 6.766}, {'end': 3764.496, 'text': "It's just going to basically ignore it.", 'start': 3762.935, 'duration': 1.561}, {'end': 3767.138, 'text': 'And we can chain these as well if we wanted to.', 'start': 3764.516, 'duration': 2.622}, {'end': 3772.603, 'text': "I'm going to go ahead and throw 17 in there, and you'll see our set size continues to increase.", 'start': 3767.757, 'duration': 4.846}, {'end': 3777.33, 'text': 'You can also remove values from set using delete.', 'start': 3773.745, 'duration': 3.585}, {'end': 3783.037, 'text': 'One thing to keep in mind is a cool function of sets, in my opinion, anyhow, is that when you delete it,', 'start': 3777.63, 'duration': 5.407}, {'end': 3788.053, 'text': 'It actually returns a boolean of true or false whether it was successful.', 'start': 3784.249, 'duration': 3.804}, {'end': 3792.197, 'text': "So let's say we delete five and we're going to console.log this out.", 'start': 3788.093, 'duration': 4.104}, {'end': 3796.081, 'text': "What we're going to get is true because the five exists in there.", 'start': 3792.918, 'duration': 3.163}, {'end': 3798.624, 'text': "And you'll see right here.", 'start': 3796.802, 'duration': 1.822}, {'end': 3801.146, 'text': 'So then it, of course, removes it from our element.', 'start': 3798.664, 'duration': 2.482}], 'summary': 'Using sets to add, chain, and delete values, with example of deletion returning boolean.', 'duration': 45.057, 'max_score': 3756.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3756089.jpg'}, {'end': 3873.923, 'src': 'embed', 'start': 3829.463, 'weight': 7, 'content': [{'end': 3831.946, 'text': 'and reset it with clear.', 'start': 3829.463, 'duration': 2.483}, {'end': 3834.869, 'text': "And then you'll see our count here is going to be zero.", 'start': 3832.547, 'duration': 2.322}, {'end': 3838.853, 'text': 'The last thing I want to mention is that a set is iterable.', 'start': 3834.889, 'duration': 3.964}, {'end': 3847.403, 'text': 'So you can use things like for each on it and for of and all the great ways that you would normally iterate through a a iterable.', 'start': 3838.994, 'duration': 8.409}, {'end': 3858.855, 'text': "Let's just take a second to pat ourselves on the back for finishing this course because it is a hard thing to do.", 'start': 3853.072, 'duration': 5.783}, {'end': 3862.277, 'text': 'So many people start courses out and they never get to the end.', 'start': 3859.075, 'duration': 3.202}, {'end': 3866.759, 'text': "They start it, they forget about it, they move on, they go back to playing Halo or doing whatever they're doing.", 'start': 3862.317, 'duration': 4.442}, {'end': 3871.962, 'text': 'It is a hard thing to intellectually stimulate yourself as well as follow through with that.', 'start': 3867.239, 'duration': 4.723}, {'end': 3873.923, 'text': 'So congratulations for you for finishing the course.', 'start': 3871.982, 'duration': 1.941}], 'summary': 'The course teaches about iterable, emphasizing the difficulty of finishing it.', 'duration': 44.46, 'max_score': 3829.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3829463.jpg'}], 'start': 3312.355, 'title': 'Asynchronous javascript concepts', 'summary': 'Covers async and await for ajax calls, benefits over promises, working with promises and asynchronous calls, and introduction to sets in javascript. it includes examples of making asynchronous calls, resolving promises, and creating, adding, deleting, and iterating through sets, encouraging further engagement.', 'chapters': [{'end': 3483.135, 'start': 3312.355, 'title': 'Async await for ajax calls', 'summary': 'Demonstrates the use of async and await for making asynchronous ajax calls and highlights the benefits of using async and await over promises, especially for server calls, with an example of fetching data from an api.', 'duration': 170.78, 'highlights': ['The use of async and await for making asynchronous Ajax calls is demonstrated.', 'The benefits of using async and await over promises, especially for server calls, are emphasized.', 'An example of fetching data from an API using async and await is provided.']}, {'end': 3686.074, 'start': 3483.135, 'title': 'Working with promises and asynchronous calls', 'summary': "Explores the use of promises and asynchronous calls in javascript through examples, highlighting the resolution of promises using 'then' method and async/await functions, emphasizing the importance of working with asynchronous endpoints and databases.", 'duration': 202.939, 'highlights': ["The chapter explores resolving promises using the 'then' method and async/await functions, emphasizing the importance of working with asynchronous endpoints and databases.", 'It explains the creation and usage of promises in JavaScript, showcasing the process of resolving promises and handling asynchronous calls.', 'It discusses the significance of handling data from asynchronous places and using promises with timeouts for working with databases and receiving data.']}, {'end': 3924.991, 'start': 3686.974, 'title': 'Introduction to sets in javascript', 'summary': 'Introduces the concept of sets in javascript, showcasing the creation, addition, deletion, and iteration through a set, while emphasizing the benefits of completing the course and encouraging sharing it for further engagement.', 'duration': 238.017, 'highlights': ['Sets in JavaScript can contain unique values and ignore duplicate values, as demonstrated by the creation of a set with duplicate values and checking its size.', 'The add method in sets allows for the addition of new values, and the set size increases accordingly, with the feature of ignoring duplicate values.', 'The delete method in sets can remove values and returns a boolean indicating the success of the operation, as demonstrated by deleting the value 5 from the set.', 'Sets in JavaScript are iterable, allowing the use of methods like forEach and for...of for iteration through the set.', 'Completion of the course is emphasized, acknowledging the challenges of intellectual stimulation, and encouraging sharing the course content for further engagement.']}], 'duration': 612.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZ1DMMsyVyI/pics/nZ1DMMsyVyI3312355.jpg', 'highlights': ['The benefits of using async and await over promises, especially for server calls, are emphasized.', 'The use of async and await for making asynchronous Ajax calls is demonstrated.', "The chapter explores resolving promises using the 'then' method and async/await functions, emphasizing the importance of working with asynchronous endpoints and databases.", 'An example of fetching data from an API using async and await is provided.', 'Sets in JavaScript can contain unique values and ignore duplicate values, as demonstrated by the creation of a set with duplicate values and checking its size.', 'The add method in sets allows for the addition of new values, and the set size increases accordingly, with the feature of ignoring duplicate values.', 'The delete method in sets can remove values and returns a boolean indicating the success of the operation, as demonstrated by deleting the value 5 from the set.', 'Sets in JavaScript are iterable, allowing the use of methods like forEach and for...of for iteration through the set.', 'Completion of the course is emphasized, acknowledging the challenges of intellectual stimulation, and encouraging sharing the course content for further engagement.']}], 'highlights': ['Dylan Israel will cover ES6, ES7, and ES8 features over 17 lessons and four challenges.', 'The for of loop is used to iterate through an array and add its values to a total, resulting in a total income of $204,000.', 'The chapter introduces JavaScript classes, demonstrating how to define a class, create an instance, set values using a constructor, and access/modify properties, emphasizing the importance of object-oriented programming.', 'Understanding variable hoisting is crucial for comprehending the behavior of JavaScript code, particularly in scenarios involving the declaration and initialization of variables.', 'The benefits of using async and await over promises, especially for server calls, are emphasized.']}