title
Top 5 Javascript Things You Should Know!

description
Check out my courses and become more creative! https://developedbyed.com/ Microphones I Use Audio-Technica AT2020 - https://geni.us/Re78 (Amazon) Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon) BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon) Camera Gear Fujifilm X-T3 - https://geni.us/7IM1 (Amazon) Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon) PC Specs Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon) Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon) AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon) Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon) ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon) Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon) Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon) Logitech G305 - https://geni.us/PIjyn (Amazon) Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon) DISCLAIMERS: I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. 🎁Support me on Patreon for exclusive episodes, discord and more! https://www.patreon.com/dev_ed In this episode we are going to take a look at the top 5 concepts you should know in javascript. These concepts are good to learn after you are comfortable with the basic syntax of javascript and you want to dive deeper into what is happening under the hood. We are going to take a look at things like how hoisting works, visualizing how our javascript code runs with the call stack. A basic overview of callbacks and async await (deserves its own episode). 📕 Things covered in this video: - Javascript Hoisting - Call Stack - IIFE - Scope - Event Loop, Web Api's and callback queue - Callbacks, async-await 🛴 Follow me on: Twitter: https://twitter.com/deved94 Instagram: https://www.instagram.com/developedbyed/ Github: https://github.com/DevEdwin #javascript #webdevelopment

detail
{'title': 'Top 5 Javascript Things You Should Know!', 'heatmap': [{'end': 713.522, 'start': 676.431, 'weight': 0.987}, {'end': 921.029, 'start': 883.112, 'weight': 0.854}, {'end': 1089.219, 'start': 1049.284, 'weight': 0.864}, {'end': 1275.652, 'start': 1256.266, 'weight': 0.829}, {'end': 1515.061, 'start': 1488.834, 'weight': 0.716}], 'summary': 'Covers five essential javascript concepts including hoisting, scope, async await, callbacks, and event queues, aiming to educate and engage the audience with the possibility of learning something new.', 'chapters': [{'end': 45.098, 'segs': [{'end': 45.098, 'src': 'embed', 'start': 0.666, 'weight': 0, 'content': [{'end': 2.669, 'text': 'Hello, gorgeous people on the internet.', 'start': 0.666, 'duration': 2.003}, {'end': 7.896, 'text': 'In this episode, we are gonna cover five JavaScript concepts that you should know.', 'start': 2.849, 'duration': 5.047}, {'end': 15.045, 'text': 'So things like hoisting, things like scope, async await, callbacks, event queues, call stacks.', 'start': 8.316, 'duration': 6.729}, {'end': 18.928, 'text': 'Oh no, this is gonna be quite crazy, but take a look.', 'start': 15.726, 'duration': 3.202}, {'end': 20.548, 'text': "I think you're gonna enjoy this one.", 'start': 19.048, 'duration': 1.5}, {'end': 22.869, 'text': "Maybe you're gonna learn something new.", 'start': 21.549, 'duration': 1.32}, {'end': 24.53, 'text': 'Maybe you know a few of these.', 'start': 22.909, 'duration': 1.621}, {'end': 28.432, 'text': 'Let me know what kind of feels weird for you in JavaScript.', 'start': 25.17, 'duration': 3.262}, {'end': 33.454, 'text': "What do you find the hardest about JavaScript? Let me know in the comments and I'll try to help you out.", 'start': 28.452, 'duration': 5.002}, {'end': 39.757, 'text': "So without further ado, grab a coffee, grab a Red Bull, whatever floats your boat, and let's get into this episode.", 'start': 33.714, 'duration': 6.043}, {'end': 45.098, 'text': "Okay, the first one we're gonna talk about is hoisting, which kind of sounds like moist, but it's not.", 'start': 40.057, 'duration': 5.041}], 'summary': 'Covering 5 javascript concepts; hoisting, scope, async await, callbacks, event queues, and call stacks.', 'duration': 44.432, 'max_score': 0.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw666.jpg'}], 'start': 0.666, 'title': 'Javascript concepts', 'summary': 'Covers five essential javascript concepts: hoisting, scope, async await, callbacks, event queues, and call stacks, aiming to educate and engage the audience with the possibility of learning something new.', 'chapters': [{'end': 45.098, 'start': 0.666, 'title': 'Javascript concepts you should know', 'summary': 'Covers five essential javascript concepts, including hoisting, scope, async await, callbacks, event queues, and call stacks, aiming to educate and engage the audience with the possibility of learning something new.', 'duration': 44.432, 'highlights': ['The episode covers five fundamental JavaScript concepts - hoisting, scope, async await, callbacks, event queues, and call stacks - engaging the audience to learn something new.', 'Encourages viewers to share their challenges with JavaScript and offers to provide assistance, fostering community engagement.', 'The chapter begins with an engaging and light-hearted introduction, setting the tone for the upcoming educational content.']}], 'duration': 44.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw666.jpg', 'highlights': ['The episode covers five fundamental JavaScript concepts - hoisting, scope, async await, callbacks, event queues, and call stacks - engaging the audience to learn something new.', 'The chapter begins with an engaging and light-hearted introduction, setting the tone for the upcoming educational content.', 'Encourages viewers to share their challenges with JavaScript and offers to provide assistance, fostering community engagement.']}, {'end': 405.758, 'segs': [{'end': 95.163, 'src': 'embed', 'start': 45.118, 'weight': 1, 'content': [{'end': 46.578, 'text': "It's something completely different.", 'start': 45.118, 'duration': 1.46}, {'end': 49.699, 'text': 'I need to..', 'start': 47.158, 'duration': 2.541}, {'end': 50.979, 'text': 'All right, good start.', 'start': 49.699, 'duration': 1.28}, {'end': 52.299, 'text': "Let's get going.", 'start': 51.479, 'duration': 0.82}, {'end': 56.54, 'text': "So I'm gonna throw up some code here, and I'm gonna explain hoisting while we go.", 'start': 52.94, 'duration': 3.6}, {'end': 61.161, 'text': "So let's start with var, and then we're gonna transition to const eventually.", 'start': 57.06, 'duration': 4.101}, {'end': 65.322, 'text': "So var, I'm gonna create a name here and set that equal to add.", 'start': 61.581, 'duration': 3.741}, {'end': 68.003, 'text': "I'm going to say console log name.", 'start': 66.042, 'duration': 1.961}, {'end': 69.963, 'text': "So we know what's happening here.", 'start': 68.643, 'duration': 1.32}, {'end': 72.584, 'text': "If we console log this out, we're going to get ed.", 'start': 70.424, 'duration': 2.16}, {'end': 80.747, 'text': "However, what happens if we move this console log up here to the top? We're going to get something else.", 'start': 73.905, 'duration': 6.842}, {'end': 82.207, 'text': "Look, we're going to get undefined.", 'start': 80.807, 'duration': 1.4}, {'end': 83.368, 'text': 'Now, why is that happening?', 'start': 82.348, 'duration': 1.02}, {'end': 87.317, 'text': 'Well, before our JavaScript actually runs,', 'start': 84.215, 'duration': 3.102}, {'end': 95.163, 'text': 'the compiler takes all the variable declarations and function declarations and moves them all the way to the top.', 'start': 87.317, 'duration': 7.846}], 'summary': 'Explanation of hoisting in javascript with var and const, showcasing impact on variable declaration placement.', 'duration': 50.045, 'max_score': 45.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw45118.jpg'}, {'end': 384.6, 'src': 'embed', 'start': 354.825, 'weight': 0, 'content': [{'end': 355.365, 'text': 'Boom, boom, boom.', 'start': 354.825, 'duration': 0.54}, {'end': 356.006, 'text': 'Everything works.', 'start': 355.465, 'duration': 0.541}, {'end': 365.489, 'text': "Now, the difference is, you're probably not going to be worrying about var anymore, because we're modern people and we use const and let.", 'start': 356.966, 'duration': 8.523}, {'end': 375.753, 'text': "Here, I believe it's a bit different, so if we declare an add, a name with add, and we console.log add, so this works the same way.", 'start': 366.41, 'duration': 9.343}, {'end': 380.296, 'text': 'hit save down here, run this, we get add.', 'start': 376.613, 'duration': 3.683}, {'end': 384.6, 'text': "However, if we move this to the top, we're actually not gonna get undefined.", 'start': 380.797, 'duration': 3.803}], 'summary': 'Modern usage of const and let eliminates concerns about var in coding.', 'duration': 29.775, 'max_score': 354.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw354825.jpg'}], 'start': 45.118, 'title': 'Javascript hoisting and declarations', 'summary': 'Explains javascript hoisting, demonstrating its impact on code execution and variable assignment, and discusses the behavior of variable and function declarations, highlighting potential errors and differences in var and const/let declarations.', 'chapters': [{'end': 156.777, 'start': 45.118, 'title': 'Understanding javascript hoisting', 'summary': 'Explains javascript hoisting, where variable and function declarations are moved to the top before code execution, exemplified with var and const, highlighting the impact on code execution and variable assignment.', 'duration': 111.659, 'highlights': ['The process of hoisting in JavaScript involves moving variable and function declarations to the top before code execution, impacting the outcome of console logs and variable assignments.', "The chapter demonstrates how hoisting affects the outcome of console logs, showing that moving the console log up results in 'undefined' due to hoisting moving the variable declaration to the top before assignment.", 'The concept of hoisting is illustrated with variable assignments, emphasizing that the compiler moves variable declarations to the top before code execution, providing a clear understanding of the behind-the-scenes process.']}, {'end': 405.758, 'start': 157.177, 'title': 'Variable and function declarations in javascript', 'summary': 'Discusses the behavior of variable and function declarations in javascript, including how variable and function declarations are hoisted to the top, leading to potential errors, and the difference in behavior between var and const/let declarations.', 'duration': 248.581, 'highlights': ['Variable and function declarations are hoisted to the top in JavaScript, leading to potential errors when calling them before they are initialized. The chapter explains how variable and function declarations are moved to the top in JavaScript, potentially causing errors when trying to access them before they are initialized.', 'The difference in behavior between var and const/let declarations is highlighted, with const/let preventing variable hoisting and throwing errors when attempting to access variables before initialization. The chapter explains the difference in behavior between var and const/let declarations, demonstrating how const/let prevent variable hoisting and throw errors when attempting to access variables before initialization.']}], 'duration': 360.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw45118.jpg', 'highlights': ['The difference in behavior between var and const/let declarations is highlighted, with const/let preventing variable hoisting and throwing errors when attempting to access variables before initialization.', 'The chapter explains the difference in behavior between var and const/let declarations, demonstrating how const/let prevent variable hoisting and throw errors when attempting to access variables before initialization.', 'Variable and function declarations are hoisted to the top in JavaScript, leading to potential errors when calling them before they are initialized.']}, {'end': 729.569, 'segs': [{'end': 438.58, 'src': 'embed', 'start': 406.619, 'weight': 0, 'content': [{'end': 410.443, 'text': "So you're probably not going to have that many problems with this.", 'start': 406.619, 'duration': 3.824}, {'end': 413.246, 'text': 'Number two is going to be call stack,', 'start': 410.803, 'duration': 2.443}, {'end': 420.534, 'text': "and for this one I pulled up these slides because I think it's going to be way easier to visualize than me just explaining it or showing you in code.", 'start': 413.246, 'duration': 7.288}, {'end': 429.297, 'text': 'So all a call stack is is just a data structure that kind of dictates the way our functions run, the way our code gets executed.', 'start': 421.074, 'duration': 8.223}, {'end': 430.757, 'text': "Okay, so let's take a look here.", 'start': 429.617, 'duration': 1.14}, {'end': 438.58, 'text': 'All I have is a function say hello and a say age and a say all that executes both of these up here.', 'start': 430.817, 'duration': 7.763}], 'summary': 'Call stack is a data structure dictating function execution.', 'duration': 31.961, 'max_score': 406.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw406619.jpg'}, {'end': 498.25, 'src': 'embed', 'start': 469.888, 'weight': 1, 'content': [{'end': 474.491, 'text': 'And the way this works is you can imagine it kind of executes like books, like executes like books.', 'start': 469.888, 'duration': 4.603}, {'end': 476.472, 'text': 'It just kind of stacks like books.', 'start': 475.071, 'duration': 1.401}, {'end': 478.473, 'text': 'So your main function gets executed.', 'start': 476.512, 'duration': 1.961}, {'end': 482.936, 'text': 'Then after you invoke a function, it gets added to the stack like this on top.', 'start': 478.513, 'duration': 4.423}, {'end': 485.938, 'text': 'And once that function finishes, it gets removed from the stack.', 'start': 483.337, 'duration': 2.601}, {'end': 486.719, 'text': 'All right.', 'start': 486.439, 'duration': 0.28}, {'end': 489.101, 'text': 'Then we invoke another function, gets added to the stack.', 'start': 486.899, 'duration': 2.202}, {'end': 493.807, 'text': 'removed and once our code finishes, even the main gets taken off the stack.', 'start': 489.821, 'duration': 3.986}, {'end': 495.229, 'text': "but that doesn't really make any sense.", 'start': 493.807, 'duration': 1.422}, {'end': 498.25, 'text': 'so let me kind of show you here on the screen, Okay.', 'start': 495.229, 'duration': 3.021}], 'summary': 'Functions execute like books stacked on a stack, with main function getting removed after code finishes.', 'duration': 28.362, 'max_score': 469.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw469888.jpg'}, {'end': 713.522, 'src': 'heatmap', 'start': 676.431, 'weight': 0.987, 'content': [{'end': 680.034, 'text': 'Okay, Number three is going to be a short one, but the sweet one is going to be.', 'start': 676.431, 'duration': 3.603}, {'end': 685.478, 'text': "if he's now, you might've heard of this one or you saw, and if you don't know what it means, I'll sum it up in one minute.", 'start': 680.034, 'duration': 5.444}, {'end': 689.481, 'text': "So it's an immediate immediately invoked function expression.", 'start': 685.918, 'duration': 3.563}, {'end': 690.842, 'text': 'All right.', 'start': 689.501, 'duration': 1.341}, {'end': 692.243, 'text': 'Take a, take a deep breath.', 'start': 690.942, 'duration': 1.301}, {'end': 693.544, 'text': "I'm going to write it down here for you.", 'start': 692.263, 'duration': 1.281}, {'end': 695.046, 'text': "And I'm going to explain what's happening.", 'start': 693.564, 'duration': 1.482}, {'end': 697.868, 'text': 'So this is how, and if he looks function.', 'start': 695.086, 'duration': 2.782}, {'end': 700.796, 'text': 'Like that.', 'start': 700.356, 'duration': 0.44}, {'end': 703.377, 'text': "I'm going to console.log hey.", 'start': 701.056, 'duration': 2.321}, {'end': 705.038, 'text': 'All right.', 'start': 703.397, 'duration': 1.641}, {'end': 706.699, 'text': 'And then we invoke it in here.', 'start': 705.218, 'duration': 1.481}, {'end': 708.5, 'text': 'Whoa, that looks weird.', 'start': 707.399, 'duration': 1.101}, {'end': 711.561, 'text': "And I'm going to console.log final here.", 'start': 708.92, 'duration': 2.641}, {'end': 712.982, 'text': 'So like that.', 'start': 711.701, 'duration': 1.281}, {'end': 713.522, 'text': 'All right.', 'start': 713.262, 'duration': 0.26}], 'summary': 'The transcript discusses immediately invoked function expressions and demonstrates their usage through code and explanation.', 'duration': 37.091, 'max_score': 676.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw676431.jpg'}, {'end': 705.038, 'src': 'embed', 'start': 680.034, 'weight': 4, 'content': [{'end': 685.478, 'text': "if he's now, you might've heard of this one or you saw, and if you don't know what it means, I'll sum it up in one minute.", 'start': 680.034, 'duration': 5.444}, {'end': 689.481, 'text': "So it's an immediate immediately invoked function expression.", 'start': 685.918, 'duration': 3.563}, {'end': 690.842, 'text': 'All right.', 'start': 689.501, 'duration': 1.341}, {'end': 692.243, 'text': 'Take a, take a deep breath.', 'start': 690.942, 'duration': 1.301}, {'end': 693.544, 'text': "I'm going to write it down here for you.", 'start': 692.263, 'duration': 1.281}, {'end': 695.046, 'text': "And I'm going to explain what's happening.", 'start': 693.564, 'duration': 1.482}, {'end': 697.868, 'text': 'So this is how, and if he looks function.', 'start': 695.086, 'duration': 2.782}, {'end': 700.796, 'text': 'Like that.', 'start': 700.356, 'duration': 0.44}, {'end': 703.377, 'text': "I'm going to console.log hey.", 'start': 701.056, 'duration': 2.321}, {'end': 705.038, 'text': 'All right.', 'start': 703.397, 'duration': 1.641}], 'summary': 'Explaining immediately invoked function expressions in one minute.', 'duration': 25.004, 'max_score': 680.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw680034.jpg'}], 'start': 406.619, 'title': 'Understanding call stack and iife in javascript', 'summary': 'Explains the concept of call stack, illustrating its function through code examples and introduces immediately invoked function expression (iife) as a way to write and immediately invoke functions.', 'chapters': [{'end': 559.983, 'start': 406.619, 'title': 'Understanding call stack in javascript', 'summary': 'Explains the concept of call stack in javascript, illustrating its function through a code example and emphasizing the sequential execution and removal of functions within the stack.', 'duration': 153.364, 'highlights': ['The call stack in JavaScript is a data structure that dictates the way functions run and code gets executed.', 'The call stack operates like a stack of books, where functions are added and removed sequentially as they are invoked and completed.', 'The example code demonstrates the sequential execution of functions in the call stack, showcasing the addition and removal of functions as they are invoked and completed.']}, {'end': 729.569, 'start': 560.663, 'title': 'Understanding call stack and immediately invoked function expression', 'summary': 'Explains the concept of call stack by visualizing the process of code execution and also introduces the concept of immediately invoked function expression (iife) as a way to write a function and immediately invoke it, demonstrated with a code example.', 'duration': 168.906, 'highlights': ['The chapter explains the concept of call stack by visualizing the process of code execution The chapter provides a visual representation of how code is executed by explaining the concept of call stack.', 'Introduces the concept of Immediately Invoked Function Expression (IIFE) as a way to write a function and immediately invoke it The chapter introduces the concept of Immediately Invoked Function Expression (IIFE) as a method to write and invoke a function simultaneously.']}], 'duration': 322.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw406619.jpg', 'highlights': ['The call stack in JavaScript is a data structure that dictates the way functions run and code gets executed.', 'The call stack operates like a stack of books, where functions are added and removed sequentially as they are invoked and completed.', 'The example code demonstrates the sequential execution of functions in the call stack, showcasing the addition and removal of functions as they are invoked and completed.', 'The chapter explains the concept of call stack by visualizing the process of code execution The chapter provides a visual representation of how code is executed by explaining the concept of call stack.', 'Introduces the concept of Immediately Invoked Function Expression (IIFE) as a way to write a function and immediately invoke it The chapter introduces the concept of Immediately Invoked Function Expression (IIFE) as a method to write and invoke a function simultaneously.']}, {'end': 1052.968, 'segs': [{'end': 810.145, 'src': 'embed', 'start': 780.764, 'weight': 1, 'content': [{'end': 783.546, 'text': "And you also don't have any global variables going on here.", 'start': 780.764, 'duration': 2.782}, {'end': 785.629, 'text': 'Number four is gonna be scope.', 'start': 783.806, 'duration': 1.823}, {'end': 787.773, 'text': "So let's check it out.", 'start': 786.09, 'duration': 1.683}, {'end': 789.837, 'text': 'Scope, we have two types of scopes.', 'start': 787.913, 'duration': 1.924}, {'end': 793.303, 'text': 'We have global scope and we have function scope.', 'start': 789.957, 'duration': 3.346}, {'end': 800.999, 'text': 'Perfect Okay, so how does this work? Well, we can declare a variable name, set is equal to add.', 'start': 794.125, 'duration': 6.874}, {'end': 806.042, 'text': 'And what you need to know is that basically we have access to this anywhere in our code.', 'start': 801.139, 'duration': 4.903}, {'end': 810.145, 'text': "So if I console log out your name, that's gonna work just fine.", 'start': 806.062, 'duration': 4.083}], 'summary': 'Discussion on global and function scope in javascript, with emphasis on variable accessibility.', 'duration': 29.381, 'max_score': 780.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw780764.jpg'}, {'end': 921.029, 'src': 'heatmap', 'start': 883.112, 'weight': 0.854, 'content': [{'end': 889.217, 'text': 'All right, so if I declare an age here, 25, what it does, it basically looks where age is.', 'start': 883.112, 'duration': 6.105}, {'end': 891.639, 'text': 'Is it inside, say, age? Nope.', 'start': 889.838, 'duration': 1.801}, {'end': 894.601, 'text': "Then it checks if it's inside, say, name, which is not.", 'start': 892.019, 'duration': 2.582}, {'end': 897.804, 'text': "And then finally, it checks if it's outside, which it is.", 'start': 894.722, 'duration': 3.082}, {'end': 905.27, 'text': 'So it just adds 25, okay? Now, let me also invoke this here as well.', 'start': 897.824, 'duration': 7.446}, {'end': 906.151, 'text': 'So say age.', 'start': 905.43, 'duration': 0.721}, {'end': 910.283, 'text': 'run this and we should get my age 25.', 'start': 907.842, 'duration': 2.441}, {'end': 921.029, 'text': "now the interesting thing is if i declare that say that age inside here cost age is 10 we're going to get 10.", 'start': 910.283, 'duration': 10.746}], 'summary': 'Code adds declared age 25; age inside costs 10.', 'duration': 37.917, 'max_score': 883.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw883112.jpg'}, {'end': 982.685, 'src': 'embed', 'start': 946.723, 'weight': 3, 'content': [{'end': 951.506, 'text': "But if it's not declared either, then it moves up to 25.", 'start': 946.723, 'duration': 4.783}, {'end': 952.726, 'text': 'So all the way outside.', 'start': 951.506, 'duration': 1.22}, {'end': 958.91, 'text': 'So this way you can have variables that are only functionally scoped.', 'start': 953.047, 'duration': 5.863}, {'end': 960.931, 'text': "And that's kind of what I showed you here.", 'start': 959.35, 'duration': 1.581}, {'end': 966.074, 'text': 'if we remove this, we can have function scoped variables.', 'start': 962.612, 'duration': 3.462}, {'end': 971.538, 'text': 'so function say full name heisenberg.', 'start': 966.074, 'duration': 5.464}, {'end': 982.685, 'text': "okay, so here i can just have a const name, that's jesse, and i can have a const age, that's 30..", 'start': 971.538, 'duration': 11.147}], 'summary': 'Variables can be functionally scoped, allowing for more control and flexibility.', 'duration': 35.962, 'max_score': 946.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw946723.jpg'}, {'end': 1027.877, 'src': 'embed', 'start': 1004.033, 'weight': 0, 'content': [{'end': 1013.495, 'text': 'Okay, So one thing you also need to remember is that all your variables that are functionally scoped so that are inside of a function,', 'start': 1004.033, 'duration': 9.462}, {'end': 1015.235, 'text': 'they cannot be used outside.', 'start': 1013.495, 'duration': 1.74}, {'end': 1019.916, 'text': 'So if you have a function and you have some variables declared in it, you cannot use it.', 'start': 1015.635, 'duration': 4.281}, {'end': 1025.757, 'text': "If I try the console log name out here, it's not gonna work.", 'start': 1021.596, 'duration': 4.161}, {'end': 1027.877, 'text': "As you can see, it's gonna throw me an error.", 'start': 1026.198, 'duration': 1.679}], 'summary': 'Functionally scoped variables cannot be used outside functions.', 'duration': 23.844, 'max_score': 1004.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1004033.jpg'}], 'start': 730.149, 'title': 'Javascript data privacy and scoping', 'summary': 'Emphasizes the significance of declaring variables for data privacy, elaborates on the concept of scopes in javascript, and distinguishes between global and function scope, while also discussing function-level scope, hoisting, and the differentiation between function-scoped and globally-scoped variables, with illustrative code examples.', 'chapters': [{'end': 806.042, 'start': 730.149, 'title': 'Data privacy and scopes in javascript', 'summary': 'Discusses the importance of declaring variables for data privacy and explains the concept of scopes in javascript, highlighting the difference between global scope and function scope.', 'duration': 75.893, 'highlights': ['Data privacy is achieved by declaring variables within a function, preventing global variables and ensuring immediate function execution.', 'Scopes in JavaScript are categorized into global scope and function scope, with the ability to access variables declared within the function throughout the code.']}, {'end': 1052.968, 'start': 806.062, 'title': 'Javascript variable scoping', 'summary': 'Discusses javascript variable scoping, including function-level scope, the concept of hoisting, and the difference between function-scoped and globally-scoped variables, demonstrating through code examples.', 'duration': 246.906, 'highlights': ['The function checks if the variable is available inside it, and if not, it looks one level above and finds the variable there, demonstrating the concept of scope chaining. The function checks if the variable is available inside it, and if not, it looks one level above and finds the variable there. This demonstrates the concept of scope chaining.', 'Variables declared inside a function are functionally scoped and cannot be accessed outside the function, as opposed to variables declared outside a function which are globally accessible. Variables declared inside a function are functionally scoped and cannot be accessed outside the function, as opposed to variables declared outside a function which are globally accessible.', 'The concept of hoisting is explained through the demonstration of how variables are accessed within nested functions, showcasing the behavior of variables in different scope levels. The concept of hoisting is explained through the demonstration of how variables are accessed within nested functions, showcasing the behavior of variables in different scope levels.']}], 'duration': 322.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw730149.jpg', 'highlights': ['Variables declared within a function ensure data privacy and immediate function execution.', 'Scopes in JavaScript are categorized into global scope and function scope, with access to function-declared variables throughout the code.', 'Variables declared inside a function are functionally scoped and cannot be accessed outside the function, contrasting with globally accessible variables.', 'The concept of hoisting is demonstrated through accessing variables within nested functions, showcasing behavior in different scope levels.', "Scope chaining is illustrated through the function's search for variables, checking one level above if not found inside the function."]}, {'end': 1694.453, 'segs': [{'end': 1079.112, 'src': 'embed', 'start': 1052.988, 'weight': 0, 'content': [{'end': 1058.373, 'text': "I'm gonna cover callbacks, promises, and async await all in one, so this is gonna be fun.", 'start': 1052.988, 'duration': 5.385}, {'end': 1061.956, 'text': "Okay, so what is a callback? Let's start with the first one.", 'start': 1058.813, 'duration': 3.143}, {'end': 1069.163, 'text': 'All a callback is is just a function that gets passed in to a parameter of another function, okay?', 'start': 1062.157, 'duration': 7.006}, {'end': 1073.427, 'text': 'And that callback is gonna run after your first function finishes.', 'start': 1069.684, 'duration': 3.743}, {'end': 1076.63, 'text': 'So let me kind of show you what it does.', 'start': 1074.088, 'duration': 2.542}, {'end': 1079.112, 'text': 'So I can just create a function, say name.', 'start': 1076.87, 'duration': 2.242}], 'summary': 'Covering callbacks, promises, and async await in one session.', 'duration': 26.124, 'max_score': 1052.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1052988.jpg'}, {'end': 1207.883, 'src': 'embed', 'start': 1159.116, 'weight': 2, 'content': [{'end': 1166.001, 'text': "so if i pass that in there, that's going to go in here and it's going to run right after we finish everything else.", 'start': 1159.116, 'duration': 6.885}, {'end': 1176.007, 'text': 'so hit, save, run this and take a look After our first function finished, we run this callback to execute this one.', 'start': 1166.001, 'duration': 10.006}, {'end': 1178.648, 'text': "So that's what a callback is.", 'start': 1176.807, 'duration': 1.841}, {'end': 1183.691, 'text': 'Now one thing we need to remember is that this is a synchronous callback.', 'start': 1179.089, 'duration': 4.602}, {'end': 1193.276, 'text': "Which means that it's going to run line by line after it finishes, it's going to run this callback and we are done.", 'start': 1186.172, 'duration': 7.104}, {'end': 1200.479, 'text': "Let me show you an asynchronous callback, because that's probably what we're going to use a lot of times with setTimeout.", 'start': 1193.636, 'duration': 6.843}, {'end': 1206.062, 'text': "or you're going to see when you're doing a adding, a click listener or things of that sort.", 'start': 1200.479, 'duration': 5.583}, {'end': 1207.883, 'text': 'So let me quickly show you, watch this.', 'start': 1206.182, 'duration': 1.701}], 'summary': 'The transcript explains synchronous and asynchronous callbacks in programming.', 'duration': 48.767, 'max_score': 1159.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1159116.jpg'}, {'end': 1286.095, 'src': 'heatmap', 'start': 1256.266, 'weight': 0.829, 'content': [{'end': 1258.107, 'text': "All right, let's run this and see what's happening.", 'start': 1256.266, 'duration': 1.841}, {'end': 1262.788, 'text': "So run this and we're gonna get first, last and from callback.", 'start': 1258.787, 'duration': 4.001}, {'end': 1264.208, 'text': "So that's kind of strange.", 'start': 1263.288, 'duration': 0.92}, {'end': 1268.33, 'text': "So why is this happening? Okay, let me show you kind of what's going on in here.", 'start': 1264.248, 'duration': 4.082}, {'end': 1273.071, 'text': "I found this cool visualizer where we can see what's happening behind the scenes.", 'start': 1269.29, 'duration': 3.781}, {'end': 1275.652, 'text': "So there's a lot of more things here.", 'start': 1273.591, 'duration': 2.061}, {'end': 1281.714, 'text': 'So we had call stack that we kind of talked about, but we also have things like web APIs, callback queues and event loops.', 'start': 1275.952, 'duration': 5.762}, {'end': 1283.014, 'text': 'All right.', 'start': 1282.774, 'duration': 0.24}, {'end': 1283.594, 'text': 'Mind blowing.', 'start': 1283.054, 'duration': 0.54}, {'end': 1286.095, 'text': "But don't worry, we're going to go through each line.", 'start': 1283.954, 'duration': 2.141}], 'summary': 'Discussion on the workings of call stack, web apis, callback queues and event loops in javascript.', 'duration': 29.829, 'max_score': 1256.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1256266.jpg'}, {'end': 1346.304, 'src': 'embed', 'start': 1319.25, 'weight': 1, 'content': [{'end': 1328.616, 'text': "So what's happening is that we have these web APIs like setTimeout, any listener, click listener, scroll, and things of that sort.", 'start': 1319.25, 'duration': 9.366}, {'end': 1335.778, 'text': "And what happens is that they kind of keep track of what's going on behind the scenes.", 'start': 1328.976, 'duration': 6.802}, {'end': 1338.239, 'text': 'So the code can actually run.', 'start': 1336.318, 'duration': 1.921}, {'end': 1340.8, 'text': 'So in this example, what we had here.', 'start': 1338.599, 'duration': 2.201}, {'end': 1342.18, 'text': 'is that all right?', 'start': 1340.8, 'duration': 1.38}, {'end': 1343.601, 'text': 'so we console log first.', 'start': 1342.18, 'duration': 1.421}, {'end': 1346.304, 'text': 'let me remove this console.log first.', 'start': 1344.301, 'duration': 2.003}], 'summary': 'Web apis like settimeout, listeners, and scroll track code execution.', 'duration': 27.054, 'max_score': 1319.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1319250.jpg'}, {'end': 1515.061, 'src': 'heatmap', 'start': 1488.834, 'weight': 0.716, 'content': [{'end': 1495.577, 'text': 'So if your call stack is empty and you have things stacked in your callback queue, then it gets pushed up and it gets executed.', 'start': 1488.834, 'duration': 6.743}, {'end': 1498.759, 'text': 'So if we resume this, the timeout is finished.', 'start': 1496.058, 'duration': 2.701}, {'end': 1502.491, 'text': "So resume, it's not working.", 'start': 1500.589, 'duration': 1.902}, {'end': 1506.294, 'text': "There we go, it gets pushed and the console log happens and we're done.", 'start': 1502.891, 'duration': 3.403}, {'end': 1509.496, 'text': "Okay, let's finally take a look at async await.", 'start': 1506.534, 'duration': 2.962}, {'end': 1515.061, 'text': 'And all async await does, it makes our code look synchronous without actually being synchronous.', 'start': 1509.596, 'duration': 5.465}], 'summary': 'Empty call stack triggers execution of callback queue, async await makes code look synchronous', 'duration': 26.227, 'max_score': 1488.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1488834.jpg'}, {'end': 1588, 'src': 'embed', 'start': 1557.033, 'weight': 3, 'content': [{'end': 1558.214, 'text': "Good So that's our promise.", 'start': 1557.033, 'duration': 1.181}, {'end': 1564.98, 'text': 'So we saw we would have to do like promise dot then, then we could get back the data and then we would blah, blah, blah.', 'start': 1558.234, 'duration': 6.746}, {'end': 1567.983, 'text': 'Well, with this one, it looks actually very simple.', 'start': 1565.361, 'duration': 2.622}, {'end': 1576.69, 'text': 'So what we need to do, the first thing is we need to add async here on the top to let JavaScript know that this is an async function.', 'start': 1568.343, 'duration': 8.347}, {'end': 1588, 'text': 'and the second thing you would use is, rather than adding dot, then the the data that takes time to come back you would have to add a weight.', 'start': 1577.831, 'duration': 10.169}], 'summary': "To fulfill the promise, make the function async and use 'await' to handle data.", 'duration': 30.967, 'max_score': 1557.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1557033.jpg'}], 'start': 1052.988, 'title': 'Asynchronous javascript', 'summary': 'Covers the concepts of callbacks, promises, and async await in javascript, including synchronous and asynchronous callbacks. it explains web apis, callback queues, event loops, and demonstrates the use of settimeout and the simplification of asynchronous code with async await.', 'chapters': [{'end': 1258.107, 'start': 1052.988, 'title': 'Callbacks, promises, and async await', 'summary': 'Covers the concept of callbacks, including synchronous and asynchronous callbacks, and demonstrates their usage with examples like passing functions as parameters and using settimeout.', 'duration': 205.119, 'highlights': ['The chapter explains the concept of callbacks, which are functions passed as parameters to another function and are executed after the first function finishes.', 'It demonstrates the usage of a synchronous callback by defining a function and passing another function as a parameter to run after the first function finishes, highlighting the sequential execution of the callback.', 'It showcases the usage of an asynchronous callback with setTimeout, displaying the execution of a function after a specified delay, exemplifying the practical application of asynchronous callbacks in scenarios like adding click listeners.']}, {'end': 1694.453, 'start': 1258.787, 'title': 'Understanding asynchronous javascript', 'summary': 'Explains the concepts of web apis, callback queues, event loops, and async await in javascript, demonstrating the asynchronous behavior of settimeout and the simplification of asynchronous code with async await.', 'duration': 435.666, 'highlights': ['The chapter explains the concepts of web APIs, callback queues, and event loops in JavaScript, demonstrating the asynchronous behavior of setTimeout and providing insights into the execution order and handling of asynchronous operations.', 'The transcript provides a detailed explanation of async await in JavaScript, illustrating how it simplifies asynchronous code by making it look synchronous without actually being synchronous, and highlights the usage of async and await keywords to handle asynchronous operations.', "The speaker demonstrates the execution flow of asynchronous operations using setTimeout and click listener in JavaScript, emphasizing the handling of asynchronous tasks by web APIs and the event loop's role in executing tasks from the callback queue when the call stack is empty."]}], 'duration': 641.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/v0QTqHXiVNw/pics/v0QTqHXiVNw1052988.jpg', 'highlights': ['The chapter explains the concept of callbacks, which are functions passed as parameters to another function and are executed after the first function finishes.', 'The chapter explains the concepts of web APIs, callback queues, and event loops in JavaScript, demonstrating the asynchronous behavior of setTimeout and providing insights into the execution order and handling of asynchronous operations.', 'It demonstrates the usage of a synchronous callback by defining a function and passing another function as a parameter to run after the first function finishes, highlighting the sequential execution of the callback.', 'The transcript provides a detailed explanation of async await in JavaScript, illustrating how it simplifies asynchronous code by making it look synchronous without actually being synchronous, and highlights the usage of async and await keywords to handle asynchronous operations.', 'It showcases the usage of an asynchronous callback with setTimeout, displaying the execution of a function after a specified delay, exemplifying the practical application of asynchronous callbacks in scenarios like adding click listeners.', "The speaker demonstrates the execution flow of asynchronous operations using setTimeout and click listener in JavaScript, emphasizing the handling of asynchronous tasks by web APIs and the event loop's role in executing tasks from the callback queue when the call stack is empty."]}], 'highlights': ['The episode covers five fundamental JavaScript concepts - hoisting, scope, async await, callbacks, event queues, and call stacks - engaging the audience to learn something new.', 'The chapter explains the concepts of web APIs, callback queues, and event loops in JavaScript, demonstrating the asynchronous behavior of setTimeout and providing insights into the execution order and handling of asynchronous operations.', 'The chapter provides a visual representation of how code is executed by explaining the concept of call stack.', 'The chapter explains the concept of callbacks, which are functions passed as parameters to another function and are executed after the first function finishes.', 'The chapter explains the concept of call stack by visualizing the process of code execution The chapter provides a visual representation of how code is executed by explaining the concept of call stack.', 'The transcript provides a detailed explanation of async await in JavaScript, illustrating how it simplifies asynchronous code by making it look synchronous without actually being synchronous, and highlights the usage of async and await keywords to handle asynchronous operations.', 'The difference in behavior between var and const/let declarations is highlighted, with const/let preventing variable hoisting and throwing errors when attempting to access variables before initialization.', 'The concept of hoisting is demonstrated through accessing variables within nested functions, showcasing behavior in different scope levels.', 'The chapter explains the difference in behavior between var and const/let declarations, demonstrating how const/let prevent variable hoisting and throw errors when attempting to access variables before initialization.', 'The chapter begins with an engaging and light-hearted introduction, setting the tone for the upcoming educational content.']}