title
ES6 Tutorial: Learn Modern JavaScript in 1 Hour

description
Building an app or preparing for a JavaScript interview? Watch this ES6 tutorial to learn ES6 quickly. 🚀Subscribe to my channel for more JavaScript tutorials: https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA?sub_confirmation=1 Want to learn more from me? Check out my blog and courses: Courses: https://codewithmosh.com Blog: https://programmingwithmosh.com Facebook: https://www.facebook.com/programmingwithmosh/ Twitter: https://twitter.com/moshhamedani TABLE OF CONTENT: 01:45 Let vs Var vs Const 05:39 Objects 08:26 The this Keyword 11:17 Binding this 13:55 Arrow Functions 18:12 Arrow Functions and this 22:29 Array.map Method 26:06 Object Destructuring 28:37 Spread Operator 32:41 Classes 36:28 Inheritance 40:33 Modules 44:45 Named and Default Exports

detail
{'title': 'ES6 Tutorial: Learn Modern JavaScript in 1 Hour', 'heatmap': [], 'summary': "Learn essential javascript features like let versus const, objects, arrow functions, and react list rendering, emphasizing at least three months of javascript experience for react development, with practical examples and details on modern features, 'this' behavior, refactoring to arrow functions, react list rendering, object duplication, javascript classes, inheritance, and modularizing code using ecmascript 6 modules for improved maintainability.", 'chapters': [{'end': 79.066, 'segs': [{'end': 27.866, 'src': 'embed', 'start': 2.563, 'weight': 0, 'content': [{'end': 8.108, 'text': 'In order to build applications with React, you should have at least three months of experience programming in JavaScript.', 'start': 2.563, 'duration': 5.545}, {'end': 16.956, 'text': "So in this section I'm gonna cover the essential JavaScript features that you're going to use a lot in React applications, such as let versus const,", 'start': 8.689, 'duration': 8.267}, {'end': 22.02, 'text': 'keywords, objects, the, this keyword and how it behaves differently.', 'start': 16.956, 'duration': 5.064}, {'end': 27.866, 'text': 'arrow functions, object destructuring, the spread, operator classes and modules.', 'start': 22.02, 'duration': 5.846}], 'summary': 'To build react apps, 3 months of javascript experience is essential. key topics include let vs const, objects, this keyword, arrow functions, destructuring, spread operator, classes, and modules.', 'duration': 25.303, 'max_score': 2.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2563.jpg'}, {'end': 70.263, 'src': 'embed', 'start': 42.772, 'weight': 1, 'content': [{'end': 45.593, 'text': "As I told you before, I've got two other JavaScript courses for you.", 'start': 42.772, 'duration': 2.821}, {'end': 51.876, 'text': 'One is called JavaScript Basics for Beginners, and the other is Object Oriented Programming in JavaScript.', 'start': 46.093, 'duration': 5.783}, {'end': 55.897, 'text': 'The focus of the first course is on the art of problem solving.', 'start': 52.436, 'duration': 3.461}, {'end': 58.558, 'text': 'It teaches you how to think like a programmer.', 'start': 56.298, 'duration': 2.26}, {'end': 64.581, 'text': 'Unfortunately, there are a lot of developers out there in the industry who can build applications with Angular,', 'start': 59.099, 'duration': 5.482}, {'end': 70.263, 'text': 'React and all kinds of fancy frameworks, but they cannot solve simple programming problems.', 'start': 64.581, 'duration': 5.682}], 'summary': 'Two new javascript courses: basics for beginners and object oriented programming. focuses on problem-solving and thinking like a programmer.', 'duration': 27.491, 'max_score': 42.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc42772.jpg'}], 'start': 2.563, 'title': 'Essential javascript for react', 'summary': 'Covers essential javascript features such as let versus const, objects, arrow functions, etc., stressing the need for at least three months of javascript programming experience for react development.', 'chapters': [{'end': 79.066, 'start': 2.563, 'title': 'Essential javascript for react', 'summary': 'Covers essential javascript features including let versus const, objects, arrow functions, and more, emphasizing the importance of understanding these topics before progressing into react, with a recommendation of at least three months of javascript programming experience for react development.', 'duration': 76.503, 'highlights': ['The chapter emphasizes the importance of understanding essential JavaScript features such as let versus const, objects, arrow functions, and more before progressing into React, with a recommendation of at least three months of JavaScript programming experience for React development.', "The instructor mentions two other JavaScript courses, 'JavaScript Basics for Beginners' and 'Object Oriented Programming in JavaScript,' focusing on problem-solving and fundamental computer science and software engineering concepts.", 'The chapter warns about the difficulty of building React applications without a solid understanding of essential JavaScript features, highlighting the potential challenges developers may face without adequate preparation.']}], 'duration': 76.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2563.jpg', 'highlights': ['The chapter stresses the need for at least three months of JavaScript programming experience for React development.', "The instructor recommends 'JavaScript Basics for Beginners' and 'Object Oriented Programming in JavaScript' courses.", 'The chapter warns about the difficulty of building React applications without a solid understanding of essential JavaScript features.']}, {'end': 1034.681, 'segs': [{'end': 245.421, 'src': 'embed', 'start': 218.306, 'weight': 0, 'content': [{'end': 228.191, 'text': 'So, in ECMAScript 6, or ES6, which is the version of JavaScript introduced in year 2015, we got a new keyword for declaring variables.', 'start': 218.306, 'duration': 9.885}, {'end': 230.172, 'text': 'And that is let.', 'start': 228.592, 'duration': 1.58}, {'end': 232.654, 'text': 'So let came to solve this problem.', 'start': 230.793, 'duration': 1.861}, {'end': 239.337, 'text': 'When you declare a variable with the let keyword, that variable is only accessible inside of that block.', 'start': 233.154, 'duration': 6.183}, {'end': 240.598, 'text': "Let's see the result.", 'start': 239.858, 'duration': 0.74}, {'end': 243.2, 'text': 'So save the changes back in the browser.', 'start': 240.858, 'duration': 2.342}, {'end': 245.421, 'text': 'Now we get this error on the console.', 'start': 243.86, 'duration': 1.561}], 'summary': "Es6 introduced 'let' keyword for block-scoped variables.", 'duration': 27.115, 'max_score': 218.306, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc218306.jpg'}, {'end': 355.538, 'src': 'embed', 'start': 320.413, 'weight': 1, 'content': [{'end': 323.435, 'text': "So technically it's not a variable because it cannot change.", 'start': 320.413, 'duration': 3.022}, {'end': 324.576, 'text': "It's a constant.", 'start': 323.755, 'duration': 0.821}, {'end': 326.758, 'text': "So let's quickly wrap up.", 'start': 325.476, 'duration': 1.282}, {'end': 332.266, 'text': 'Throw away the var keyword and prefer to use const over let.', 'start': 327.439, 'duration': 4.827}, {'end': 335.771, 'text': 'Use let only when you need to reassign a variable.', 'start': 332.947, 'duration': 2.824}, {'end': 346.494, 'text': "All right, now let's take a look at objects.", 'start': 344.713, 'duration': 1.781}, {'end': 351.336, 'text': "So once again, I'm gonna use the const keyword to define a variable.", 'start': 347.094, 'duration': 4.242}, {'end': 355.538, 'text': 'Well, more accurately a constant and set it to an object.', 'start': 352.496, 'duration': 3.042}], 'summary': 'Prefer const over let for immutable variables. use let for reassignable variables.', 'duration': 35.125, 'max_score': 320.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc320413.jpg'}, {'end': 433.139, 'src': 'embed', 'start': 406.403, 'weight': 5, 'content': [{'end': 411.485, 'text': 'so here we have a personal object with three members, one property and two methods.', 'start': 406.403, 'duration': 5.082}, {'end': 414.806, 'text': 'there are two ways to access these members.', 'start': 411.485, 'duration': 3.321}, {'end': 418.248, 'text': 'we can use the dot notation, which you are probably familiar with.', 'start': 414.806, 'duration': 3.442}, {'end': 421.129, 'text': 'so dot talk or walk.', 'start': 418.248, 'duration': 2.881}, {'end': 424.952, 'text': 'We can also use the bracket notation.', 'start': 422.189, 'duration': 2.763}, {'end': 426.393, 'text': 'so person.', 'start': 424.952, 'duration': 1.441}, {'end': 433.139, 'text': 'we add square brackets, Pass a string and this string determines the name of the target member.', 'start': 426.393, 'duration': 6.746}], 'summary': 'Personal object has 3 members, 1 property, and 2 methods. it can be accessed using dot or bracket notation.', 'duration': 26.736, 'max_score': 406.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc406403.jpg'}, {'end': 633.329, 'src': 'embed', 'start': 606.233, 'weight': 2, 'content': [{'end': 610.277, 'text': "What's going on here? So we don't get a reference to the person object.", 'start': 606.233, 'duration': 4.044}, {'end': 611.538, 'text': 'We get undefined.', 'start': 610.637, 'duration': 0.901}, {'end': 619.046, 'text': "That's why I told you that this keyword in JavaScript behaves differently from other programming languages.", 'start': 612.219, 'duration': 6.827}, {'end': 624.821, 'text': 'The value of this is determined by how a function is called.', 'start': 620.117, 'duration': 4.704}, {'end': 633.329, 'text': 'If we call a function as a method in an object, this will always return a reference to that object.', 'start': 625.502, 'duration': 7.827}], 'summary': "Javascript's 'this' keyword behaves differently, returning undefined unless called as a method in an object.", 'duration': 27.096, 'max_score': 606.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc606233.jpg'}, {'end': 823.661, 'src': 'embed', 'start': 796.579, 'weight': 3, 'content': [{'end': 800.841, 'text': 'With the bind method, we can set the value of this permanently.', 'start': 796.579, 'duration': 4.262}, {'end': 804.623, 'text': 'So when we call bind on the walk function,', 'start': 801.421, 'duration': 3.202}, {'end': 814.308, 'text': 'we get a new walk function and in that walk function the value of this is based on the argument that we pass to the bind method.', 'start': 804.623, 'duration': 9.685}, {'end': 823.661, 'text': "So because here we're passing the person object as an argument, we'll get a walk function that is always attached to this person object.", 'start': 815.029, 'duration': 8.632}], 'summary': 'Using bind method permanently sets the value of this based on the argument passed, creating a new function attached to the object.', 'duration': 27.082, 'max_score': 796.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc796579.jpg'}, {'end': 978.131, 'src': 'embed', 'start': 948.104, 'weight': 4, 'content': [{'end': 953.326, 'text': 'So save the changes back in the browser, we get 25 on the console.', 'start': 948.104, 'duration': 5.222}, {'end': 957.428, 'text': 'Now let me show you where these arrow functions are really useful.', 'start': 954.006, 'duration': 3.422}, {'end': 960.829, 'text': "Let's imagine we have an array of jobs.", 'start': 958.628, 'duration': 2.201}, {'end': 969.829, 'text': 'So each job object has maybe an ID and a property called is active, which we set to true or false.', 'start': 962.267, 'duration': 7.562}, {'end': 978.131, 'text': "Now I'm going to add a couple more here and make the first two jobs active and the last one inactive.", 'start': 970.689, 'duration': 7.442}], 'summary': 'Using arrow functions, 25 is displayed, useful for job arrays.', 'duration': 30.027, 'max_score': 948.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc948104.jpg'}], 'start': 79.446, 'title': "Javascript modern features, object methods, and 'this'", 'summary': "Introduces modern javascript features such as let and const keywords, covers defining object methods, accessing members, 'this' behavior, and the benefits of arrow functions, with practical examples and preference for const over let.", 'chapters': [{'end': 355.538, 'start': 79.446, 'title': 'Modern javascript features', 'summary': 'Introduces modern javascript features including let and const keywords, explaining their differences and use cases, and emphasizes the preference for const over let.', 'duration': 276.092, 'highlights': ['The chapter introduces modern JavaScript features including let and const keywords.', 'The chapter explains the differences and use cases of let and const, emphasizing the preference for const over let.']}, {'end': 605.192, 'start': 356.358, 'title': 'Javascript object methods and notations', 'summary': "Covers how to define methods in objects, access object members using dot and bracket notations, and the behavior of the 'this' keyword in javascript, with practical examples and explanations.", 'duration': 248.834, 'highlights': ['The chapter explains the syntax to define methods in an object, showcasing the cleaner and simpler method definition introduced in ES6.', 'It demonstrates two ways to access object members: the dot notation (e.g., person.name) and the bracket notation, with practical examples of using the bracket notation for dynamic access based on user input.', "It delves into the behavior of the 'this' keyword in JavaScript, highlighting its differences from other programming languages like C sharp or Java, and includes examples to illustrate these differences.", "It explores the concept of 'this' in JavaScript, showcasing its behavior when used as a reference to a current object and when accessed as a function reference, with practical console.log demonstrations.", 'The chapter includes practical examples of accessing object members using dot notation and bracket notation, with a focus on practicality and dynamic access based on user input.']}, {'end': 1034.681, 'start': 606.233, 'title': "Understanding javascript 'this' and arrow functions", 'summary': "Discusses the behavior of 'this' in javascript, explaining how it is determined by the function call and how strict mode affects it, followed by a demonstration of using the bind method to fix 'this' reference and the benefits of arrow functions, including a practical example of using arrow functions for filtering active jobs from an array.", 'duration': 428.448, 'highlights': ["The value of 'this' in JavaScript is determined by how a function is called, returning a reference to the object if called as a method, or the global object if called as a standalone function, and in strict mode, it returns undefined.", "Demonstration of using the bind method to fix the 'this' reference issue by permanently setting the value of 'this' to a specific object, such as the 'person' object, ensuring that 'this' always refers to the 'person' object when calling the function.", 'Explanation and benefits of arrow functions in JavaScript, showcasing a cleaner and more compact syntax for defining functions and demonstrating its practical usage for filtering active jobs from an array.']}], 'duration': 955.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc79446.jpg', 'highlights': ['The chapter introduces modern JavaScript features including let and const keywords.', 'The chapter explains the differences and use cases of let and const, emphasizing the preference for const over let.', "It explores the concept of 'this' in JavaScript, showcasing its behavior when used as a reference to a current object and when accessed as a function reference, with practical console.log demonstrations.", "Demonstration of using the bind method to fix the 'this' reference issue by permanently setting the value of 'this' to a specific object, such as the 'person' object, ensuring that 'this' always refers to the 'person' object when calling the function.", 'Explanation and benefits of arrow functions in JavaScript, showcasing a cleaner and more compact syntax for defining functions and demonstrating its practical usage for filtering active jobs from an array.', 'It demonstrates two ways to access object members: the dot notation (e.g., person.name) and the bracket notation, with practical examples of using the bracket notation for dynamic access based on user input.']}, {'end': 1546.111, 'segs': [{'end': 1059.539, 'src': 'embed', 'start': 1034.681, 'weight': 0, 'content': [{'end': 1044.627, 'text': 'okay?. Now here we have a simple function, and this is a perfect opportunity for us to use an arrow function and make this code cleaner and more readable.', 'start': 1034.681, 'duration': 9.946}, {'end': 1049.051, 'text': "So I'm gonna duplicate this line so we can compare them side by side.", 'start': 1045.229, 'duration': 3.822}, {'end': 1056.016, 'text': 'So, as I told you, to convert this to an arrow function, we get rid of the function keyword delete,', 'start': 1049.512, 'duration': 6.504}, {'end': 1059.539, 'text': 'put a fat arrow between the parameters and the body.', 'start': 1056.016, 'duration': 3.523}], 'summary': 'Converting a function to an arrow function for cleaner and more readable code.', 'duration': 24.858, 'max_score': 1034.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1034681.jpg'}, {'end': 1317.249, 'src': 'embed', 'start': 1291.922, 'weight': 3, 'content': [{'end': 1298.564, 'text': "Now with arrow functions, we no longer have to do this because arrow functions don't rebind this.", 'start': 1291.922, 'duration': 6.642}, {'end': 1306.606, 'text': 'In other words, if we change this callback function to an arrow function, it will inherit this keyword.', 'start': 1299.124, 'duration': 7.482}, {'end': 1307.426, 'text': 'Let me show you.', 'start': 1306.806, 'duration': 0.62}, {'end': 1314.768, 'text': "So I'm gonna change this to an arrow function and revert this back to this.", 'start': 1308.046, 'duration': 6.722}, {'end': 1317.249, 'text': 'this right.', 'start': 1315.968, 'duration': 1.281}], 'summary': "Arrow functions inherit 'this' keyword, avoiding rebinding.", 'duration': 25.327, 'max_score': 1291.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1291922.jpg'}, {'end': 1406.698, 'src': 'embed', 'start': 1355.433, 'weight': 4, 'content': [{'end': 1359.635, 'text': 'ECMAScript 6 introduced a new method in arrays called map.', 'start': 1355.433, 'duration': 4.202}, {'end': 1366.699, 'text': 'This is a very useful method and in React, we use it to render lists as you will see in the next section.', 'start': 1359.975, 'duration': 6.724}, {'end': 1372.482, 'text': "So whenever you want to render a list of items, that's when you use the map method of arrays.", 'start': 1367.179, 'duration': 5.303}, {'end': 1375.183, 'text': "So let's say we have an array called colors.", 'start': 1373.082, 'duration': 2.101}, {'end': 1379.981, 'text': 'with three items, red, green, and blue.', 'start': 1376.618, 'duration': 3.363}, {'end': 1384.526, 'text': "Let's imagine we want to render these using list items.", 'start': 1381.182, 'duration': 3.344}, {'end': 1388.229, 'text': 'So for each color, we want to have a list item like this.', 'start': 1384.986, 'duration': 3.243}, {'end': 1393.254, 'text': 'So we call the map method on this array, colors.map.', 'start': 1389.591, 'duration': 3.663}, {'end': 1396.716, 'text': 'Here we need to pass a callback function.', 'start': 1394.395, 'duration': 2.321}, {'end': 1402.157, 'text': 'The job of this function is to transform each element in this array.', 'start': 1397.376, 'duration': 4.781}, {'end': 1406.698, 'text': 'So this function is called by the map method for each item in this array.', 'start': 1402.717, 'duration': 3.981}], 'summary': "Ecmascript 6 introduced 'map' method for arrays, useful in react for rendering lists.", 'duration': 51.265, 'max_score': 1355.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1355433.jpg'}, {'end': 1519.565, 'src': 'embed', 'start': 1492.453, 'weight': 6, 'content': [{'end': 1495.536, 'text': 'Now we can take this to the next level and make this code cleaner.', 'start': 1492.453, 'duration': 3.083}, {'end': 1498.479, 'text': 'These concatenations here are a little bit ugly.', 'start': 1496.137, 'duration': 2.342}, {'end': 1503.38, 'text': 'So instead we can use template literals in ES6.', 'start': 1499.139, 'duration': 4.241}, {'end': 1508.902, 'text': 'So instead of using single or double quotes, we use the back tick character.', 'start': 1504.12, 'duration': 4.782}, {'end': 1511.863, 'text': "That's the character before number one on your keyboard.", 'start': 1509.282, 'duration': 2.581}, {'end': 1514.723, 'text': 'Here we can define a template for our string.', 'start': 1512.623, 'duration': 2.1}, {'end': 1519.565, 'text': 'So we want to have the opening and closing LI tags.', 'start': 1515.524, 'duration': 4.041}], 'summary': 'Transition to cleaner code with es6 template literals for string definition and manipulation.', 'duration': 27.112, 'max_score': 1492.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1492453.jpg'}], 'start': 1034.681, 'title': 'Arrow functions and refactoring', 'summary': "Covers refactoring a simple function to an arrow function, resulting in cleaner and more readable code, and explains how arrow functions prevent the rebinding of 'this' keyword and demonstrates the usage of the array map method with a detailed example and es6 features.", 'chapters': [{'end': 1089.806, 'start': 1034.681, 'title': 'Refactoring to arrow function', 'summary': 'Introduces refactoring a simple function to an arrow function, resulting in cleaner and more readable code with less noise and easier readability.', 'duration': 55.125, 'highlights': ['Refactor a simple function to an arrow function to make the code cleaner and more readable with less noise and easier to read', 'The end result is a cleaner and easier to read code after refactoring to an arrow function', 'Convert a simple function to an arrow function by removing the function keyword, adding a fat arrow between parameters and body, removing the return keyword and curly braces, and eliminating the semicolon']}, {'end': 1546.111, 'start': 1098.74, 'title': 'Arrow functions and array map method', 'summary': "Explains how arrow functions prevent the rebinding of 'this' keyword, and demonstrates the usage of the array map method with a detailed example and es6 features, including template literals and arrow function syntax.", 'duration': 447.371, 'highlights': ["Arrow functions prevent rebinding of 'this' keyword", 'Introduction of map method in arrays in ECMAScript 6', 'Demonstration of using map method to transform array elements', 'Utilization of template literals in ES6 for cleaner string representation']}], 'duration': 511.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1034681.jpg', 'highlights': ['Refactor a simple function to an arrow function to make the code cleaner and more readable with less noise and easier to read', 'The end result is a cleaner and easier to read code after refactoring to an arrow function', 'Convert a simple function to an arrow function by removing the function keyword, adding a fat arrow between parameters and body, removing the return keyword and curly braces, and eliminating the semicolon', "Arrow functions prevent rebinding of 'this' keyword", 'Demonstration of using map method to transform array elements', 'Introduction of map method in arrays in ECMAScript 6', 'Utilization of template literals in ES6 for cleaner string representation']}, {'end': 1953.313, 'segs': [{'end': 1583.582, 'src': 'embed', 'start': 1546.451, 'weight': 0, 'content': [{'end': 1548.432, 'text': "Let's log that on a console.", 'start': 1546.451, 'duration': 1.981}, {'end': 1550.853, 'text': 'So console.log items.', 'start': 1548.612, 'duration': 2.241}, {'end': 1552.313, 'text': 'Save the changes.', 'start': 1551.553, 'duration': 0.76}, {'end': 1557.712, 'text': 'As you can see we have an array with three items.', 'start': 1554.187, 'duration': 3.525}, {'end': 1564.26, 'text': 'So this map method is very useful in React when rendering lists as you will see in the next section.', 'start': 1559.233, 'duration': 5.027}, {'end': 1579.538, 'text': 'One of the modern JavaScript features that you see a lot in React applications is object destructuring.', 'start': 1573.433, 'duration': 6.105}, {'end': 1583.582, 'text': "So let's imagine we have an address object like this.", 'start': 1580.179, 'duration': 3.403}], 'summary': 'Demonstrated the use of map method and object destructuring in react.', 'duration': 37.131, 'max_score': 1546.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1546451.jpg'}, {'end': 1678.789, 'src': 'embed', 'start': 1618.605, 'weight': 2, 'content': [{'end': 1626.794, 'text': 'The problem with this code is that we have this repetitive address dot address dot address dot code in multiple places.', 'start': 1618.605, 'duration': 8.189}, {'end': 1629.576, 'text': 'Destructuring solves this problem.', 'start': 1627.474, 'duration': 2.102}, {'end': 1635.761, 'text': 'so if we want to have three variables or three constants street,', 'start': 1630.217, 'duration': 5.544}, {'end': 1641.625, 'text': 'city and country and we want them to be set to these properties in the address object,', 'start': 1635.761, 'duration': 5.864}, {'end': 1647.609, 'text': 'we can rewrite this code like this so constant we add curly braces.', 'start': 1641.625, 'duration': 5.984}, {'end': 1649.95, 'text': 'this is the destructuring syntax.', 'start': 1647.609, 'duration': 2.341}, {'end': 1656.855, 'text': 'we add the name of the target properties, in this case street, city and country.', 'start': 1649.95, 'duration': 6.905}, {'end': 1659.697, 'text': 'we set this to the address object.', 'start': 1656.855, 'duration': 2.842}, {'end': 1669.783, 'text': 'So what we have on line 11 is exactly equivalent to these three lines and we no longer have that repetition of address dot.', 'start': 1660.437, 'duration': 9.346}, {'end': 1678.789, 'text': "So basically, we're extracting the street property from the address object and storing it in a constant called street.", 'start': 1669.783, 'duration': 9.006}], 'summary': 'Destructuring eliminates repetitive code by extracting properties from an object.', 'duration': 60.184, 'max_score': 1618.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1618605.jpg'}, {'end': 1871.346, 'src': 'embed', 'start': 1844.109, 'weight': 1, 'content': [{'end': 1849.552, 'text': "Let's say we want to clone the first array but define a constant clone.", 'start': 1844.109, 'duration': 5.443}, {'end': 1854.695, 'text': 'We create a new array and simply spread the first array.', 'start': 1849.552, 'duration': 5.143}, {'end': 1861.258, 'text': 'now if we log first and Clone, you will see they are identical.', 'start': 1854.695, 'duration': 6.563}, {'end': 1863.66, 'text': 'save the changes back in the console.', 'start': 1861.258, 'duration': 2.402}, {'end': 1867.743, 'text': "and So here's first and here's clone.", 'start': 1863.66, 'duration': 4.083}, {'end': 1871.346, 'text': 'Now we can also apply the spread operator on objects.', 'start': 1867.743, 'duration': 3.603}], 'summary': 'Using spread operator to clone arrays and objects.', 'duration': 27.237, 'max_score': 1844.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1844109.jpg'}], 'start': 1546.451, 'title': 'React list rendering & javascript modern features', 'summary': 'Introduces list rendering in react using the map method and the benefits of object destructuring, along with modern javascript features like the spread operator for concise and efficient code.', 'chapters': [{'end': 1702.661, 'start': 1546.451, 'title': 'React list rendering & object destructuring', 'summary': 'Introduces the concept of list rendering in react using the map method and explains the benefits of object destructuring in reducing repetitive code and improving code readability, with an example of using an alias for a destructured property.', 'duration': 156.21, 'highlights': ['The map method is very useful in React when rendering lists as you will see in the next section.', 'Object destructuring solves the problem of repetitive code by allowing the extraction of properties from an object and storing them in separate variables.', 'An example of using an alias for a destructured property is provided, demonstrating the flexibility of object destructuring.']}, {'end': 1953.313, 'start': 1702.661, 'title': 'Javascript modern features', 'summary': 'Introduces modern javascript features such as object destructuring and the spread operator, which allows for easily combining arrays and cloning objects, providing concise and efficient code.', 'duration': 250.652, 'highlights': ['The spread operator in JavaScript is used for easily combining arrays and cloning objects.', 'Object destructuring is a modern JavaScript feature that allows for defining new constants and setting them to specific properties of an object.', 'The spread operator enables the cloning of arrays and objects, providing a simple and effective method for creating copies.']}], 'duration': 406.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1546451.jpg', 'highlights': ['The map method is very useful in React when rendering lists as you will see in the next section.', 'The spread operator in JavaScript is used for easily combining arrays and cloning objects.', 'Object destructuring solves the problem of repetitive code by allowing the extraction of properties from an object and storing them in separate variables.', 'An example of using an alias for a destructured property is provided, demonstrating the flexibility of object destructuring.', 'Object destructuring is a modern JavaScript feature that allows for defining new constants and setting them to specific properties of an object.', 'The spread operator enables the cloning of arrays and objects, providing a simple and effective method for creating copies.']}, {'end': 2402.187, 'segs': [{'end': 2037.677, 'src': 'embed', 'start': 1989.313, 'weight': 1, 'content': [{'end': 1994.601, 'text': 'The problem is that we have duplicated the implementation of the walk method.', 'start': 1989.313, 'duration': 5.288}, {'end': 2002.932, 'text': 'Now. this implementation is currently a single line of code, but in a real world application this method can be five to 10 lines of code or maybe more.', 'start': 1995.442, 'duration': 7.49}, {'end': 2009.157, 'text': "if there is a bug in this method, then we'll have to come back and fix it in all personal objects.", 'start': 2003.613, 'duration': 5.544}, {'end': 2010.838, 'text': "that doesn't make sense, right.", 'start': 2009.157, 'duration': 1.681}, {'end': 2019.864, 'text': "so when we have an object with at least one method, we need a blueprint to create objects of that type, and that's when we use classes.", 'start': 2010.838, 'duration': 9.026}, {'end': 2024.026, 'text': 'so let me show you how a class can help us solve this problem.', 'start': 2019.864, 'duration': 4.162}, {'end': 2028.649, 'text': "i'm going to delete the second person object and create a class.", 'start': 2024.026, 'duration': 4.623}, {'end': 2030.731, 'text': 'so we start with the class keyword.', 'start': 2028.649, 'duration': 2.082}, {'end': 2033.513, 'text': 'Give our class a name, person.', 'start': 2031.451, 'duration': 2.062}, {'end': 2037.677, 'text': "And note that here I'm using Pascal naming convention.", 'start': 2034.174, 'duration': 3.503}], 'summary': 'Duplicated walk method in objects, advocating for using classes for reusability and bug fixes.', 'duration': 48.364, 'max_score': 1989.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1989313.jpg'}, {'end': 2123.002, 'src': 'embed', 'start': 2095.159, 'weight': 4, 'content': [{'end': 2098.581, 'text': 'So we can pass the name from the outside and initialize it here.', 'start': 2095.159, 'duration': 3.422}, {'end': 2101.442, 'text': 'How? Well, we use this.', 'start': 2099.341, 'duration': 2.101}, {'end': 2106.186, 'text': 'In this case, this always returns a reference to the current object.', 'start': 2102.143, 'duration': 4.043}, {'end': 2112.23, 'text': 'So we set the name property on that object to this name argument that we receive from the outside.', 'start': 2106.826, 'duration': 5.404}, {'end': 2116.201, 'text': 'Now we have a blueprint for creating personal objects.', 'start': 2113.12, 'duration': 3.081}, {'end': 2119.122, 'text': "So let's delete this code on the top.", 'start': 2116.701, 'duration': 2.421}, {'end': 2123.002, 'text': 'To create a personal object, we can do something like this.', 'start': 2120.302, 'duration': 2.7}], 'summary': "Using 'this' to initialize object properties and create personal objects.", 'duration': 27.843, 'max_score': 2095.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2095159.jpg'}, {'end': 2273.732, 'src': 'embed', 'start': 2243.544, 'weight': 0, 'content': [{'end': 2252.747, 'text': 'so we can have this teacher class inherit from the person class, and this means it will inherit all the methods defined in this person class.', 'start': 2243.544, 'duration': 9.203}, {'end': 2254.447, 'text': 'how can we do it?', 'start': 2253.487, 'duration': 0.96}, {'end': 2255.548, 'text': 'very easy.', 'start': 2254.447, 'duration': 1.101}, {'end': 2263.109, 'text': 'so here we add a keyword extends person, so teacher extends person.', 'start': 2255.548, 'duration': 7.561}, {'end': 2270.471, 'text': 'now, if we create a teacher object, so teacher, we set it to a new teacher.', 'start': 2263.109, 'duration': 7.362}, {'end': 2272.071, 'text': 'look at its constructor.', 'start': 2270.471, 'duration': 1.6}, {'end': 2273.732, 'text': 'you see the name parameter right.', 'start': 2272.071, 'duration': 1.661}], 'summary': 'Teacher class inherits all methods from person class.', 'duration': 30.188, 'max_score': 2243.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2243544.jpg'}], 'start': 1953.854, 'title': 'Javascript object duplication issue and javascript classes', 'summary': 'Discusses the issue of code duplication in javascript objects, which can lead to maintenance challenges, while also introducing javascript classes and inheritance, focusing on maintaining single-source modification and passing parameters to parent class constructors.', 'chapters': [{'end': 2010.838, 'start': 1953.854, 'title': 'Javascript object duplication issue', 'summary': 'Discusses the issue of code duplication in javascript objects, where duplicating the implementation of a method can lead to maintenance challenges, potentially requiring fixes in multiple objects.', 'duration': 56.984, 'highlights': ['The issue of duplicating the implementation of a method in JavaScript objects can lead to maintenance challenges, potentially requiring fixes in multiple objects.', 'The potential impact of code duplication on maintenance is highlighted, with the mention that in a real-world application, the method could be five to 10 lines of code or more, leading to increased effort for bug fixes.']}, {'end': 2402.187, 'start': 2010.838, 'title': 'Javascript classes and inheritance', 'summary': "Introduces javascript classes and inheritance, demonstrating how to create a class using the 'class' keyword, move methods inside a class, use a constructor method to initialize properties, and implement inheritance using the 'extends' keyword, with a focus on maintaining single-source modification and passing parameters to parent class constructors.", 'duration': 391.349, 'highlights': ['The class keyword is used to create a blueprint for objects, following Pascal naming convention, with the first letter of every word being uppercase.', "The constructor method can take parameters to initialize properties, utilizing 'this' to reference the current object.", "The 'extends' keyword is used to implement inheritance, enabling the child class to inherit methods from the parent class and allowing the child class to have its own methods and properties."]}], 'duration': 448.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc1953854.jpg', 'highlights': ["The 'extends' keyword is used to implement inheritance, enabling the child class to inherit methods from the parent class and allowing the child class to have its own methods and properties.", 'The class keyword is used to create a blueprint for objects, following Pascal naming convention, with the first letter of every word being uppercase.', 'The issue of duplicating the implementation of a method in JavaScript objects can lead to maintenance challenges, potentially requiring fixes in multiple objects.', 'The potential impact of code duplication on maintenance is highlighted, with the mention that in a real-world application, the method could be five to 10 lines of code or more, leading to increased effort for bug fixes.', "The constructor method can take parameters to initialize properties, utilizing 'this' to reference the current object."]}, {'end': 2995.855, 'segs': [{'end': 2427.906, 'src': 'embed', 'start': 2403.047, 'weight': 1, 'content': [{'end': 2410.111, 'text': 'So if we type teacher dot, now you can see we have two properties, degree and name, as well as two methods, teach and walk.', 'start': 2403.047, 'duration': 7.064}, {'end': 2412.993, 'text': 'So, this is inheritance in action.', 'start': 2410.911, 'duration': 2.082}, {'end': 2422.621, 'text': 'As you will see in the next section, whenever we create a component, we should have that component extend the base component that is defined in React.', 'start': 2413.713, 'duration': 8.908}, {'end': 2427.906, 'text': 'Because that base component in React has a bunch of methods that we need in our components.', 'start': 2423.042, 'duration': 4.864}], 'summary': 'Inheritance in action: components extend base component in react for methods.', 'duration': 24.859, 'max_score': 2403.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2403047.jpg'}, {'end': 2485.085, 'src': 'embed', 'start': 2455.631, 'weight': 0, 'content': [{'end': 2457.652, 'text': 'And this is what we call modularity.', 'start': 2455.631, 'duration': 2.021}, {'end': 2462.534, 'text': 'So instead of writing all the code in one file, we write our code in multiple files.', 'start': 2458.132, 'duration': 4.402}, {'end': 2464.975, 'text': 'We call each file a module.', 'start': 2462.994, 'duration': 1.981}, {'end': 2470.858, 'text': "the old days we didn't have the concept of modules natively in JavaScript.", 'start': 2465.615, 'duration': 5.243}, {'end': 2473.679, 'text': 'so there were many third-party solutions.', 'start': 2470.858, 'duration': 2.821}, {'end': 2479.202, 'text': 'but starting from ECMAScript 6, we have the concept of modules natively in JavaScript.', 'start': 2473.679, 'duration': 5.523}, {'end': 2482.244, 'text': "so let's go ahead and modularize this application.", 'start': 2479.202, 'duration': 3.042}, {'end': 2485.085, 'text': "I'm gonna move each class in a separate file.", 'start': 2482.244, 'duration': 2.841}], 'summary': 'Modularizing javascript code with ecmascript 6 allows for better organization and maintainability.', 'duration': 29.454, 'max_score': 2455.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2455631.jpg'}, {'end': 2554.292, 'src': 'embed', 'start': 2529.058, 'weight': 4, 'content': [{'end': 2536.303, 'text': 'So that means this teacher class that we have defined here is not visible to any other files or modules in this application.', 'start': 2529.058, 'duration': 7.245}, {'end': 2539.825, 'text': 'In order to make this visible, we have to make it public.', 'start': 2537.063, 'duration': 2.762}, {'end': 2544.167, 'text': 'And we do that by exporting this class to the outside.', 'start': 2540.405, 'duration': 3.762}, {'end': 2549.05, 'text': 'So we export it from the teacher class and then we import it wherever we need it.', 'start': 2544.747, 'duration': 4.303}, {'end': 2551.091, 'text': 'So doing that is very easy.', 'start': 2549.69, 'duration': 1.401}, {'end': 2554.292, 'text': 'We simply prefix the class with export.', 'start': 2551.651, 'duration': 2.641}], 'summary': 'To make the teacher class visible, export it and import wherever needed.', 'duration': 25.234, 'max_score': 2529.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2529058.jpg'}, {'end': 2933.868, 'src': 'embed', 'start': 2849.619, 'weight': 3, 'content': [{'end': 2851.5, 'text': 'You can see our application is still working.', 'start': 2849.619, 'duration': 1.881}, {'end': 2853.78, 'text': "We've got the teach message on the console.", 'start': 2851.58, 'duration': 2.2}, {'end': 2856.241, 'text': 'So let me quickly recap.', 'start': 2855.141, 'duration': 1.1}, {'end': 2860.203, 'text': 'With default exports, we import them like this.', 'start': 2857.202, 'duration': 3.001}, {'end': 2863.724, 'text': 'Import whatever from this module.', 'start': 2860.403, 'duration': 3.321}, {'end': 2868.126, 'text': 'With named exports, we import them like this.', 'start': 2864.444, 'duration': 3.682}, {'end': 2870.367, 'text': 'We put them in curly braces.', 'start': 2868.926, 'duration': 1.441}, {'end': 2879.437, 'text': 'Okay, now it is also possible that a module has a default export as well as a bunch of named exports.', 'start': 2871.371, 'duration': 8.066}, {'end': 2882.96, 'text': "React module is an example of that, and I'm going to show you that in a second.", 'start': 2879.437, 'duration': 3.523}, {'end': 2891.788, 'text': "So back to our teacher module and Here we have a default export, but I'm also going to export this function.", 'start': 2883.481, 'duration': 8.307}, {'end': 2898.491, 'text': 'So we have a named export as well as the default export, right? Save the changes back in index.js.', 'start': 2891.868, 'duration': 6.623}, {'end': 2902.213, 'text': 'So on the top, we are importing the default export.', 'start': 2899.472, 'duration': 2.741}, {'end': 2907.256, 'text': 'Also, we add curly braces, control space.', 'start': 2903.494, 'duration': 3.762}, {'end': 2909.317, 'text': 'Look, we have the promote function.', 'start': 2907.316, 'duration': 2.001}, {'end': 2910.457, 'text': 'This is a named export.', 'start': 2909.357, 'duration': 1.1}, {'end': 2911.838, 'text': 'We can import that as well.', 'start': 2910.537, 'duration': 1.301}, {'end': 2917.621, 'text': 'Now why does this matter? This is a pattern that you see a lot in React applications.', 'start': 2912.759, 'duration': 4.862}, {'end': 2924.964, 'text': 'So as you will see in the following sections, on top of almost every file in a React application, we have an import statement like this.', 'start': 2918.101, 'duration': 6.863}, {'end': 2933.868, 'text': 'Import React comma braces component from React.', 'start': 2925.764, 'duration': 8.104}], 'summary': 'The transcript covers module exports and imports with examples and use cases in react applications.', 'duration': 84.249, 'max_score': 2849.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2849619.jpg'}], 'start': 2403.047, 'title': 'Javascript module exports and inheritance', 'summary': 'Covers inheritance, modularizing code using modules in ecmascript 6, exporting and importing classes, improving maintainability, importing classes and functions, default and named exports, and practical examples such as react module.', 'chapters': [{'end': 2607.368, 'start': 2403.047, 'title': 'Javascript modules and inheritance', 'summary': 'Discusses inheritance in action, modularizing code using modules in ecmascript 6, and exporting and importing classes to make them visible to other files, improving maintainability of the application.', 'duration': 204.321, 'highlights': ['The concept of modules natively in JavaScript was introduced in ECMAScript 6.', 'Modularizing code across multiple files improves maintainability and reduces code bloat.', 'Exporting and importing classes to make them visible to other files is demonstrated in the transcript.', 'Inheritance in action is showcased through the properties and methods of a teacher class.']}, {'end': 2995.855, 'start': 2607.368, 'title': 'Javascript module exports', 'summary': 'Explains the process of importing and exporting modules in javascript. it covers importing classes and functions, default and named exports, and demonstrates the usage with practical examples, such as react module. it also highlights the syntax for importing default and named exports and discusses the common pattern seen in react applications.', 'duration': 388.487, 'highlights': ['The chapter explains the process of importing and exporting modules in JavaScript.', 'It covers importing classes and functions, default and named exports, and demonstrates the usage with practical examples, such as React module.', 'It also highlights the syntax for importing default and named exports and discusses the common pattern seen in React applications.']}], 'duration': 592.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NCwa_xi0Uuc/pics/NCwa_xi0Uuc2403047.jpg', 'highlights': ['Modularizing code improves maintainability and reduces code bloat.', 'Inheritance in action is showcased through the properties and methods of a teacher class.', 'The concept of modules natively in JavaScript was introduced in ECMAScript 6.', 'The chapter explains the process of importing and exporting modules in JavaScript.', 'Exporting and importing classes to make them visible to other files is demonstrated in the transcript.', 'It covers importing classes and functions, default and named exports, and demonstrates the usage with practical examples, such as React module.', 'It also highlights the syntax for importing default and named exports and discusses the common pattern seen in React applications.']}], 'highlights': ['At least three months of JavaScript experience for React development is stressed', 'Introduction of modern JavaScript features including let and const keywords', "Demonstration of using the bind method to fix the 'this' reference issue", 'Explanation and benefits of arrow functions in JavaScript', 'Refactoring a simple function to an arrow function for cleaner and more readable code', 'Utilization of template literals in ES6 for cleaner string representation', 'The spread operator in JavaScript is used for easily combining arrays and cloning objects', 'Object destructuring solves the problem of repetitive code', "The 'extends' keyword is used to implement inheritance", 'Modularizing code improves maintainability and reduces code bloat']}