 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today is our day 74 of this Salesforce learning bootcamp. And as you all know, we are going to discuss about JavaScript in this week. So this is third session on JavaScript. So I will be exploring some more features. Those are available in JavaScript that you need to know before we start learning aura and LWC, right? So let's quickly jump on to the session. So basically, if I move forward, so this is a slide which tells about me. So if you are on this channel for the first time, so if you need to know about me, so you can go through this slide. Moving forward, like this, I request everybody in every session. So consistency is the key. So please do regular practice. So in these three sessions of JavaScript, I have like in last two sessions, I have explained lots of examples. And today also I will be explaining lots of examples. So whatever examples are available in these sessions, so just practice those so that you can understand how JavaScript basically works, right? So moving forward. So this is also important thing. So what you can do if you want to become part of Sanjay Gupta Tech School community, so you can just join this telegram group where lots of folks are available and they are interacting with each other, solving each other's problem and learning Salesforce on a daily basis, right? So today, week 21 will be completed. And I hope with the help of week 20 and week 21, you are having enough information about HTML, CSS and JavaScript. And all these three, three, you can say scripting things, we'll be using in Aura and LWC, right? So from next week, I will be starting Aura. So we'll be having three to four sessions on Aura component because it is not used much nowadays. But as a Salesforce consultant or Salesforce developer, you should know about Aura components. And from next to next week, from 26th of June, we'll be starting lightning web component. And that is very important to understand. Okay, so moving forward. If you have not followed Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, Telegram, so do follow. And you can find all the important links in the description of the video. So just share this channel with everybody, those who want to learn different technologies. So from next next month onwards, you will hear about some more bootcamps, comings on your way, right? So I have lots of plans. So I'm also thinking about offline bootcamps. So soon you will be hearing about those things. Okay, so moving forward, let's get to the topic. So we'll be discussing some more features on JavaScript, right? So in last two sessions, I explained you lots of things about JavaScript. So let's discuss a few more things about JavaScript, right? So these are like very cool features which are available in JavaScript. So in these features, first is like JavaScript variables. So in JavaScript, you can create variables in four different ways. So first is automatic. So if you don't write anything, and you just create a variable and you store some value into that, so that is possible, right? Next is using var. So if you want to create a variable, so you can use a var keyword with that variable, then we have let and then we have const, right? So these are four different ways through which you can create variables in JavaScript. So moving forward, now we need to understand what is actual difference between them. So the var keyword basically was used in all JavaScript code from 1995 to 2015, right? So nowadays, we don't use var keyword. So if you go through third point, so the var keyword should only be used in code written for older browsers, right? So if you use old browsers, then we use var keyword, but otherwise you will be preferring either let or const, okay? And these two keywords were added to JavaScript in 2015, right? So this is very important to know and when we'll be understanding Aura and Lightning Web Components, so we'll be seeing like how we'll be creating variables there. Now, when to use var let or const, so always declare variables, then always use const if the value should not be changed. So const means constant. So if you want to create a variable as a constant, so what will happen if you assign a value, so that value will be assigned and that value won't be changed going forward. Then always use const if the type should not be changed, right? So for array and objects, like you can prefer const if you don't want to change the type and only use let if you can't use const, right? And var for old browsers, so we need to ignore var and we need to focus on let and const much, right? And if you don't write anything, then also you can declare the variables. So here is one more thing. So variable variables defined with let cannot be redeclared. So if you have declared a variable with let, so it cannot be redeclared, right? Variables defined with let have block scope. Block scope means if you have declared a variable inside a curly brace, so that variable will be accessible between that curly brace only. So if you declare any variable with let, so that these are the limitations with that, right? So if you want to access a variable in different, different scopes, so what you can do instead of creating that variable as let, so don't use any keyword. Just just declare a variable without writing any keyword, right? Because if you use const, so it's value won't be changed. If you use let, so there is a limitation for scope. If you want to go beyond that, so you can remove that keyword and you can directly create a variable. So here you can see with the help of this table, you will be able to understand how they are different. So yep, so where so I think there's a mistake in the scope part. So here you just need to understand let is having a scope const constraints, right? So if you talk about redeclare, so where you cannot and yeah, I think this table is not correct. So let me just remove it. I'm just I'm just removing it as of now, right? Because it is not having correct data. This is my bad. So I'm just skipping this part and maybe in upcoming session I will be having some correct information in that, right? So as of now what you can do, you can just remember like these are four different ways to declare variables and we can declare a variable without using any keyword. We can use where, let and const, right? Now next is data type, right? So we need to understand this as well. So these are different data types. Those are available in JavaScript. So string number, begin Boolean, undefined null symbol, object and in object we can create object array and date, right? So these are some data types which are available. So these are the examples through which you will be able to understand. So if you use length, sorry, if you use numbers, so for numbers, we are using first variable as length. So here we have used let so you can use constant as well. And if you don't want to use any keyword, you can directly create variables as well. So we have length, we have weight, right? So these are numbers because we are assigning number. So as per the value that you will be assigning type will be defined, right? So type will be defined basis on the value that you are assigning. Then we have color last name. So you are assigning data in double quotes. So it will be in form of string, right? Then if you assign through or false, it will be considered as Boolean, right? So we don't have any particular data type like int float care or decimal kind of thing. So whatever value you will be assigning basis on that your variable will be treated. Okay, next we have objects. So if you create notation this way, like in curly, curly basis, if you have first name, then colon and then you specify first name, then comma last name and then do it. So this is basically object notation that we are using here. Okay, so in object notation, you have two things. One is the attribute and then you need to have the value, right? Then we have array. So in array, like you need to use square bracket inside square bracket, you can have different different values. So this is basically string array. If you want to create numeric array, so you can store numbers here, right? So it is kind of a list that we use in Apex as well. And if you want to create a date instance, so a date equals to new date, this way you can provide particular date. So these are some types which are available in JavaScript. Then we have big int if you want to have a long integer value. So you can use it then if you want to use undefined. So basically, basically, this is demoing you undefined. So if we create a variable without defining any value, so here you can see its value is undefined and type is also undefined, right? And if you specify car equals to undefined, so value is undefined and type is undefined, right? So basically in JavaScript, we don't have specific keywords for data type. So data type is defined basis on the value which you are assigning in the variable, right? So I hope this way you are able to understand briefly about data type. More we'll be discussing while we'll be learning Aura and LWC. Now, how we can use functions in JavaScript. So I think in yesterday's sessions also I showed you like how we can create a function. So here you can see we have an example. In this example, you can see we have a function, right? So what is happening here? So first we have h1 heading, we have p paragraph, we have one more p paragraph, which is having id equals to demo. Now inside script tag, we have a function. Function name is to Celsius, which is receiving a parameter as f, right? Now, what is happening? We are returning calculated value, okay? And so this is the function definition. So let me copy this and I'm going to paste it in Visual Studio code so that it will be visible properly. So if you see this code, so here you can see we have this function, right? Function name is to Celsius. Now here we are passing a parameter and then this is the calculation which will be returning some value. So this is basically function definition, right? Now here we are calling the function. Here we are calling the function. So what we are doing, we are calling this function and we are passing a value as 77. So this 77 will go into f variable and then this calculation will be calculating some results and that result will be available into this value variable, right? Now what is happening here? We are just assigning that value into inner HTML of demo and demo is the id of this p tag, right? This p element is having id as demo, right? So this paragraph will be showing the value which is calculated with the help of this function. So this way, like if you have created a function, so you can call it and you can execute and whatever result you are having, you can show that value on UI with the help of HTML, right? So I just want to ask like if you have any doubt in this example which I explained to you. If you have any question you can ask in the chat. I will try to answer that otherwise I am moving forward. So next we need to discuss events, right? So I am waiting for a few seconds or maybe a couple of minutes so that if you have any questions, so you can ask. Okay, so I am moving forward if you have questions so you can post in the chat and I will pick them at the end. So now we need to understand about events. So events are very much important and here you can see we have some examples of HTML events. So in HTML basically we have a few events like whenever you are loading a page and page loading is finished. So that is basically an event. If you are using input element and if you are changing that value, so it is also an event like on change event and if you have a button that you are rendering with the help of HTML and if you click on that button, so basically that is known as on click event, right? So these are different events which are available when we work with HTML or front end implementation. So if you encounter any event, right and basis on that event if you want to execute certain functions, so we can do that in with the help of JavaScript. So HTML elements will be initiating events and JavaScript will be executing the functions or basis on that event, right? So we have an example and this example we discussed yesterday as well. So here in this example, you will see we have heading, we have paragraph, we have a button, right? And on this button we have on click event. If we click on this, sorry, if we on the UI, if we will be clicking on this button, so this change HTML function will be called and inside script we can see, you can see we have a function named as change HTML. So this method or function will be executed on click of that button, right? So in yesterday's session also I explained you and executed this example. So you can implement this example in your system and you will be having a button on the UI. If you click on that button, so this function will be called and this operation whatever code you have written inside this function will be executed. Okay, so I hope this way you are able to understand how events work. So I just explained you on click event. There are lots of events. So I just want to give you a little bit idea in depth. We'll be understanding in Aura and LWC. Now we need to understand how array with for loop works. So this is also simple. So simple. So let me just copy and paste it in the visual VS code so that it will be easy to understand. It will be having all different colors. So here you can see at top we have heading, then we have heading to then we have p paragraph whose ID is demo. Now in inside script, we have a constant variable that is fruits and here we have a list or you can say array. So we have four values. Then here we are calculating its length. So if you write fruit dot length, so total length will be calculated, it will be available into this variable. Now here what we are doing we are creating a text variable in which I am embedding ul tag or element. Then this is the for loop which is starting from zero and it will go less than length which we calculated here at line number nine. So line number nine will be giving length as four and this loop is starting with zero. So it will repeat four times zero, one, two and three. So four times this loop will repeat and what will happen every time in this text list item along with the fruit which is available on particular index and this closing list item tag. So this complete statement will be concatenated in this text variable. And once this loop is completed at the end, this ul and tag will be concatenated. So here basically we are using plus equals to. So plus equals to means text equals to text plus. So whatever text will be having previously that will be appended with this new value. Right? So basically we are creating an unordered list with the help of this loop and after its creation what we are doing we are just setting that whole text which is having an HTML code. It will go into inner HTML and it will go here with P element. So inside P there will be an unordered list which will be showing names of these fruits. So this way this code is basically working. So this code I am going to show you. So it is web eight dot HTML. So I just saved this code and I am going to run this. So here you can see we have two headings and then we have a list. This list is created with the help of loop. Right? So in your system also if you implement this example, so you will be able to understand how in JavaScript we can implement a follow. Okay. So moving forward we have next thing. So in JavaScript we can use conditional statements as well. So I guess if you have gone through Apex programming, so you are familiar with if statement, you are familiar with else statement. So in this if statement, we focus on the true part in this else statement. If you have else statement, so we focus on both true as well as false. Right? And parallelly I am running C C++ bootcamp as well. So all these features I will be explaining in detail in that programming language as well. So few features are common for all the programming languages. So if you if you know it with any programming language, so it will be easy for you to reuse them in any other programming language. Then we have else if statement where we have more than one if condition. So first if condition is true. So first block of code will be executed. Otherwise else if second condition will be tested. So this block of code will be executed and at last in the end. So last else block will be executed if nothing matches. Right? So this way you can implement else if statement in JavaScript. Now next two things I am going to show you. One is set and one is map. So both are very simple and the same way we created set and map in Apex. So it is kind of similar and features also also simple like in set you can store only unique values. Right? In set you can store unique values. So here you can see under the script we have created a new set. So const letters equals to new set. And in letters I am adding A, B, C. So this way values are added and then in this demo dot inner HTML we are assigning letters dot size. So size is basically three. So three will be assigned into this inner HTML. Right? So we can do lot more thing with set. So I just want to give you basic idea like how we can create set and it is possible to create set in JavaScript. And next we have map. So this way you can create a map. So inside map you can see we have key value pairs. Right? So map name is colors and through new map it is initialized and here key value pairing is done. And here we are using get method which is similar to Apex. So in Apex also we have get method if you want to get some value. So we are passing key here red. Red is the key. So value 500 is associated with that color key red color. Right? So 500 will be assigned into this demo inner HTML. Right? So this way we can use map functionality. Yeah. So these are some more features that I wanted to let you know like in JavaScript we can use. So this way like all those important features those you need to know before jumping to lightning aura component and lightning web component. So I just tried to explain those concepts with you and I hope you are able to understand those concepts properly. So this is it for today. It was a quick session having very few features of JavaScript and this way like this week this week's sessions are ending and from next week onwards we will be focusing on lightning component development. So first we'll cover aura and then we'll be focusing on LWC. So those sessions will be running for next four weeks and in next four weeks I will try to complete everything in detail. Right? So thank you for watching this session either live or recorded and thank you for supporting my channel and keep sharing the information and those who are willing to learn aura and LWC please spread the information with them. And I can see Rupal is asking about PDFs. So sorry Rupal I won't be able to share PDF because this is kind of my asset. So I will be utilizing it for further offline boot camp so I can't share because if I share so it will be public so I don't want to do that. Other than this these slide decks everything I have already shared with you. Right? So with this note I take your leave if you have more questions so you can ask and today like I did session half an hour earlier so from next week onwards timing will be 8 p.m. IST so I will be taking session at that particular time. Okay so I don't see much question so please do practice whatever I have explained to you so far and see you on Monday with new topic lightning aura component till then take care bye happy weekend