Learn JavaScript from Scratch with Prakash Sir ๐Ÿš€ | Code Like a Pro ๐Ÿ’ป

GeeksforGeeks ยท Beginner ยท๐Ÿ› ๏ธ AI Tools & Apps ยท1y ago

Key Takeaways

Prakash Sir teaches JavaScript fundamentals from scratch to help viewers code like a pro

Full Transcript

hello everyone welcome back to gfg just let me know uh if I'm clearly audible if you are able to see me if you are able to hear me just let me know just say hi in the chat if you can hear me clearly or if you want to uh if you're not able to hear me clearly if you want to if you want me to inase the audio or anything like that hi hi hi NES hi great okay so we'll start okay so to just give you introduction about myself my name is prakash Sakari okay I am a software developer I am also a mentor yes this is free okay it's a free session I am also a mentor uh I've been teaching at gfg since I think the past uh uh three years right um I have uh a course full course complete course made on JavaScript uh basic to advance I also have a course uh on reactjs basic to advance and you can find it on gfg I also take uh uh live classes on fullstack development at gfg so you can enroll um I can see a couple of my students also from my current batch over here so I'm quite excited uh for this uh session it's been a long long time I've not come on YouTube so um got the opportunity to come back on YouTube and it's going to be a very great session it's like learning JavaScript from the scratch we'll start from the basics so uh this JavaScript marathon is divided into two parts so today we will do a JavaScript uh we'll start from basic and we'll go to the intermediate level and then coming uh in in the coming week on Saturday right the coming Saturday same time 10:00 a.m. to u 1 p.m. we will again do an advanced JavaScript part so it'll be a six hours of learning completely JavaScript and I assure you it will be uh uh the best the best thing that you learning okay uh so yeah where are you all from like where are you all from it's it will be good see I'm also having a look at uh uh the chat section you can you feel free to ask questions okay not only related to jip but lat to any other thing also we can discuss about career as well right we can discuss about multiple other things as well okay so we'll take breaks also in between um write code with me right or um um watch the session along with me and also try to do some some of the other things with me just don't really watch but uh it will be a great session very honest okay so uh if you can put in the chat where are you all from right where are you all from I'm from Mumbai from Mumbai Maharashtra um I can see there are I think there are 30 33 people uh in the session so NES is from Andra I know NES great Okay cool so yeah let's get started okay so I'll start with uh showing you all a good road map U Mumbai right great great where in Mumbai are you from bbad nice I have friends from danbad from I danbad okay cool okay so there's one question from chag as a react native developer technical interview down always taking reactjs coding challenge what can I do see obviously most of the things are that are there in react native the logical part especially the hooks part also use State use effect use call back and all the hooks that are there in react native obviously are coming from reactjs itself right so that's that's why um um and the thing is that most of the people are not into react native right people so people are mostly into react J so even if there are high chances of someone is taking your interview of react native uh they might not be knowing a lot of things about react native right the way basically you create bridge between the native Android and react native like uh and then multiple other things like the components right how do you enable security over there right um how do you optimize the react native code right so all of these things so a lot of people are not aware of these things so generally they will always start with reactjs itself so if your reactjs is good then they can put a bet on you that okay the react native will also be much better so this is how it works okay great okay cool okay great I can see a lot of people oh there's someone from Bangladesh as well Andra kol madha Pradesh chhattis Gad great okay so let's start I'll start with showing you a a road map right just let me let me know if my screen is visible okay I think you are able to see this screen okay so this is a road map that I had actually created uh this is a full stack development road map and this focuses on M okay okay mon basically means mongodb okay Express react and node J okay m m stands for mongodb E for Express R for react and N for node J okay so you can also do it for mean stack also so mongodb okay Express angular and nodejs okay you can just interchange react with angular but uh people are using react a lot okay so the first thing that you obviously need to uh learn is uh git and GitHub okay and over this is my uh GitHub uh URL you can basically go and you can check out my projects also I'll put the link in the chat as well okay so you first have to understand what git and GitHub is and understand some basic commands right how to basically create a repository how to add something into a repository what is ADD what is commit what is push what is pull right what is fetch and all of these are some basic commands which you use in your uh day-to-day uh development okay how to resolve conflicts what is branch and how to create multiple branches right so these are some important things when it comes to uh get and uh GitHub right these are not good to know things but these are important things these are some Basics that you should actually know right of G and GitHub so even if you know these things it is uh you basically know a lot of things in GitHub right because if there are some errors then only you basically require some other other commands but these commands are basically uh the most used commands right I am using only these commands every day right not even reset also or rebase also I'm just using add commit Push Pull fetch merge these are the only commands that I've been using and create different and creating different branches okay then it comes to front end obviously you know you have to start with HTML okay uh you to you basically learn all the HTML tags right the text tags like the headings and all of these are the name of the tags I think most of you might be knowing right then comes the image tag then how do you create containers list and uh link tags right uh learning about frames and uh learning about semantic HTML right Box model right and then block block elements inline elements right and then these are these are some advanc which are basically as ask in interviews right what is this cks and standard mode okay so this is about this type doc type right when you when you create an HTML file you'll always see something called as doc type right HTML so over there you'll basically understand what all what all these are then very important thing is accessibility right what is accessibility and how is it useful so these are some questions which are asked in interviews right U then comes to the CSS part this is very important a lot of people struggle a lot with CSS I've seen so many developers even when I work with developers I've seen developers only struggle with CSS right most of the times they come to me and they ask can you help me in CSS because so uh CSS people a lot a lot of people basically think CSS as a uh hit and run right they just do they just they just try to do write some line of code and they run it and then if there's an error they basically move to another line or try something else CSS is quite logical right CSS is not only hit and run trial and run hit and run trial and run it is quite logical so you learn all of these things right very important thing over here is this specificity then understanding which type of values to use whether to use m m VW percentage and all of these things then U understanding uh these positions these are very important Flex box and grid are very important right media is obviously is very very important right these transform transitions these are these are used for animations if you want to do some animation move something here and there zoom in zoom out then you can do it right so once you complete HTML CSS you make some projects right you come onto some basic projects like a portfolio website or some some other projects right you can find a list of projects um you can also search for something called as frontend Mentor where basically you can find a lot of uh uh examples where you can practice these examples called as frontend Mentor okay I'll show you all of those things then uh if you want to learn this framework this is a very good framework this is used by a lot of companies right this is an industry level framework used by many many companies we also use it okay and then this is a very good to know thing how website is rendered right what are the building blocks how an HTML is uh how how the browser understands HTML how the browser understands CSS how it is compiled right how it is pared so these are some important things to uh to know right especially when you are a front end developer or even a full stock developer a very good thing to know of how basically a website is rendered okay then comes the boss JavaScript right uh JavaScript is like an ocean right um you de you keep uh you keep on diving deeper you will basically still not reach at the to the end of uh uh the ocean right it's it's like a very it's like a humongous ocean quite deep right so every day basically you'll keep on learning a lot of other things right still now also even though it's been me working four years in JavaScript but still there are so many new things right there that that are coming up that I also have to keep myself updated right but these are some important topics these are not good to know topics these are important topics you should know all of these things especially if you are if you want to become a jaas developer or a front end developer or a react developer or a react native developer also you should know all of these things once you know all of these things it will be good for you right then comes react right react obviously we know react is basically used widely across the industries right now right every other company will basically ask you only react only you will see so many openings of uh react right even if you uh apply for let's say in um maybe a full stack developer or JavaScript developer or any other developer react will be something which will basically help you a lot right because everyone is just using react react react so learn react and make some projects right then comes State Management Redux this is also highly used a lot by multiple companies U see what state management actually is Right testing library right this basically you can do it by using something as justest and RTL RTL is nothing but react testing Library itself right so um learn this also this this basically will give you an edge because a lot of people never write test cases right even where I've seen so many developers when I ask them to write test cases they don't know how to write test cases right test case writing test case is something very simple it's a very monotonous thing it's the same thing right it's a very very same thing right once you know how to write a test case for clicking the button or getting an input it's the same every everywhere right once you know how to write a test case for getting a data from an API is the same everywhere right once it at one at one point just becomes quite monotonous and quite static but this gives you an edge right that okay you know because there are two types of development one is called as test driven development one is called as data driven development okay so test driven development is first you write test cases and then you develop upon it data driv development is you are getting data from an API and then you start development so most of the companies follows tdd test driven development right most of them follow tdd because a very good practice a very very good practice right then comes back in you learn what apis are what is rest API what is the rest architecture why we using rest API because there are a lot of other other ways also to create apis as well right so why are we only using rest API only right why not other ways of creating AP so uh learn what is what is uh an API how it is created what is an architecture only just writing fetch or get okay post this is not it's it's not it's not only that thing only even if you're a front-end developer you should know what is the architecture why are you using rest right what makes rest uh so globally used right because rest is the architecture is globally used by a lot of developers by many companies rest is so why rest is used what is the what is the thing that is going behind it okay then comes Express which is basically built on top of nodejs okay Express as a framework is built on top of nodejs so you understand how you create a server using Express right and how do you do routing using Express how do you create multiple routes right for example uh when you're hitting an API you'll have multiple routes right let's say prakash aakari SL products you'll get products prakash Sakari slart you'll see item in the card Ras sagari wish list you'll see items in the wish list right so how how do you create then authentication right you can learn about this GWT also quite good then comes mongodb how do you how what is relation or relational database what is non- relational database how do you set it up how do you create connection between a database and a server what are the types of data you can keep in a database right how do you make it more fast right so that it is more optimized right so all of these things are very important so this is a General road map okay this is basically a a general road map it's not that uh uh that this needs to be followed right but it's it's good to be followed Okay cool so if anyone has any questions still here just let me know otherwise I will just uh start with JavaScript okay any questions I'm just looking for any questions RB CB all of these will be called not today obviously today will not but this basically is a series so what you have started is uh this is a basically a series which will happen every weekend every Saturday every Sunday we'll have these Marathon sessions of 3 three hours or 2 three hours or maybe even four hours as well so in this entire uh maybe it will happen for two three another two three months or I do not know right but maybe it happen for a couple of months right and in this series we'll be covering most of the things right so you'll basically get to learn most of the things okay cool Okay cool so let's start okay I'll share my screen just let me know if if you are able to uh see the screen SL Okay cool so I think you're able to see the uh screen okay so see this is a this is a basic basic session okay this actually is a uh basic JavaScript U session just give me a second go live yeah okay cool okay cool so let's start with uh the basics of JavaScript right so um what I've done is I've already created an index.html file and inside this index.html file I just link this Javascript file okay so for for someone who basically knows nothing about JavaScript right U does not know anything about JavaScript it's very simple right uh you just have to install and download vs code right once you have vs code installed once you have vs code downloaded what you can do is you can just create a folder in the folder you create a file okay called as index.html and index.js and in the index.html you can simply just write uh HTML file once you write HTML file you'll see all of these things right and then over here you can just write a div and then you can just write whatever message you want to write so let's say come to uh JS Marathon session okay cool and then you can also create a Javascript file called as index.js okay just for HTML make sure you write index.html for GS you can write any name okay but just followed by JS file and then we have to create a link between the index.html and a GS file so I'll use a script tag and in the source I have to specify the path of the file now since index.html and index.js are in the same path so simply I'll write over here index.js itself okay index.js okay so this will be this will create a link now where do I check all of these things in order to check all of these things uh what I'm doing is I have to open my uh developer tools okay so how I think everyone knows what developer tools is you just right click over here and you click on inspect it will open the developers tool so in over here I'll basically see all my output so the developer tools has all of these things it has these elements console sources networks console is where you see the output of your code if I want to see some output let's say for example if I'm doing some mathematical calculation right some summation or I'm writing a code which will basically give me which will basically say calculate area of a triangle or circumference of a circle something like that so I can see the output over here in the console okay so let's see how do you do that so if you want to see something in the console what you do is you just WR console do log log basically means to show the output on the console okay a very simple way that we'll basically start is like Hello World right this is what we always do right in every programming language you start you always see this line of code hello world okay so console.log hello if you want me to increase the font size I will increase the font size also okay even if you're a beginner you can start with this part so console.log hello world right and now if I see over here if I see in the console I can see Hello World earlier there was nothing but if since I'm writing console.log hello world I can see Hello World over here right now I can write multiple things also I can just write console.log um I my name is prakash my name is prakash Sakari okay so if if I go back over here right so I can see hi my name is prakash Sakari okay so what I'm doing is I'm just I just want to log something on the screen okay now I can do a lot of things over here I can also do some addition subtraction also I can just write console log let's say if I do 1+ two right and if I save it so I'll get over here if you see I get number three over here so what is Javascript doing JavaScript knows uh what is the meaning of plus right so every uh mathematical computation that you do in your actual mathematics like addition subtraction multiplication division finding percentage right finding modulus everything you can do with over here by using uh JavaScript okay by using JavaScript so the way if I do console log 1 plus two it's I can also do console log let's say 4 minus one okay or four let's say 4 minus 2 so we know 4 - 2 is what it's two so I'm getting all of these things so I can simply log anything over here right in the same way you can do multiplication also so let's say console. log 4 multiplied by let's say 4 right so this becomes 16 right so these are these are some nothing but some operators if you want to divide something so let's say 9 divided by let's say four so 9id by four it should give me in terms of U it would be a fractional number a decimal number right so this becomes 2.25 so this is how basically console basically works right what is the job of console if you want to see anything on your console right over here this part part basically ised to show your output if you want to see anything on your console then basically you can use this uh console.log statement okay cool um let's move ahead okay no GS will not be completed in today's entire session okay we take us two sessions to complete GS and we will do that okay cool now okay let me uh comment this right so if I just put two for slash in front of any line of code this it becomes commented comment basically means you won't see it in this that line of code will not be executed if you don't want to execute some line of code you just put two forward slash in front of it that line of code is never executed okay cool cool now JavaScript basically has a concept called as uh variables okay also has a concept called as variables okay if anyone knows what variables you can write it in the chat okay I'll be very happy to see your answers okay so let's not just make it a monotonous class where I'm just speaking continuously I know even if I'm not able to hear you I'm not able to see you but I'm continuously reading the chat okay uh so if anyone knows what variable is you can write it in the chat um it will be great okay so what do variable so basically a a variable is uh a storage unit is a storage unit to store some data okay a variable is a storage unit which is used to store some data now data okay now whenever you think about data there are a lot of things that goes in your mind right when you think about data you think okay data might be H multiple lines of you know some of the other thing it might be uh one lakh or two lakh lines of text which will have some data or right some Excel files or some CSV files or some PDFs or some random text right data is not necessarily only those things only okay your data can be a simple number also it can be the it can be number three it can be number 10 right data can also be your name also okay like let's say there is uh okay nidi bhadwad so yeah she she gave an answer variable is a storage where we store data okay it could be le cons great good good nii good okay Ashwin also has written a name that reference the address in the memory okay that is too deep too deep too technical but it's it's it's correct right so data can be your name also like it can be nidi it can be Arya Gupta right so data necessarily not it's just like some some big sort of data okay that we imagine okay data can be simple number or simple name also so so variable is storage unit to store some data okay now the question is where is the data stored right where is the memory coming from obviously it will occupy your laptop memory right so it will take some part of your memory and keep storing some data and these are not permanent storage these are always temporary storage itself okay whenever it's a permanent storage it's temporary storage till the time your code is running right it is basically occupying the memory once you basically stop running the code the memory is cleared okay now okay so in JS right now um when I say variable is a storage unit to store some data we have to create a variable right so we can create a variable in three ways there is where right then there is let and then there is const there are three ways in which a variable can be created if you're coming from C C++ so there is in there is character right uh there is there are multiple other things also right but um when it comes to JavaScript in order to create a variable you can basically create it in three ways you can write where you can write let you can write con I'll give you an example let's say if I want to store my if I want to store a number so I can write where xal to 3 right so over here what is X so X is a variable name right when I say a variable is a storage unit to store some data right so and I told data can be anything it can be a number or it can be a name also so three is my data over here three is my data and X is my variable in which I'm storing the data okay X is my variable in which I'm storing the data so basically what is X x like X so three basically is stored in the memory three basically stored in the memory now since three is stored in a memory right if I want to get that data from the memory if I want to get the data from memory I need a reference okay I need a reference someone wrote about the reference I think Ashwin wrote about reference right it's like a name that references the address in the memory okay so basically let's imagine a memory just let's imagine a grid right there is a box right there is there is a grid right and in that grid there are so grid basically forms multiple boxes so let's say in one box there is some data okay in a box there is some data you store a data noworder to get that data you basically should no one there should be an identifier for that box there should be an identifier for that box so just X just becomes it identifier it just becomes a reference okay that on so when I when I basically use x I will basically get that data if I want to if I want to get this value three which is stored in the memory I have to use this reference X so X becomes a variable in which I'm basically storing the data okay data is actually stored in a memory that memory block is referenced by X okay that memory block is referen by add or that address of the memory block is referenced by X okay for example now you basically you everyone has the address of the home right so if if they want to find you they'll basically say okay go to this building right this building number onto this floor this is the room number right so basically you are uh your room your reference by your room number okay in this room number this boy stays so in the same way so the in order to find three we basically use X as a reference okay now if I want to see the value of x also I can just do a console. log of x if I do a console. log of x over here so if I if you see I get three again over here okay see when I write console. log of x in inverted codes console log of x in inverted codes it will give me X only okay so the now comes now comes a different uh topic called as data types okay data types so there are multiple types of data okay today we are learning so there is number there is string okay then there is Boolean also there is number there is string there is Boolean as well okay and there are a lot of other data types also okay we'll focus on that what is number a number can be a whole number or it can be a fraction number okay what is a string anything that you write in inverted quotes anything that you write in inverted quotes that becomes a string okay and whatever you add in inverted codes that will basically will be shown as it is on the console or on the screen okay so since I'm writing console log of x in inverted codes it shows X directly but when I write console log of this x so what I'm doing is I'm trying to log the data inside the variable x x is my variable so I'm basically trying to log the data inside the variable X okay I can also create multiple variables I can write where yal to 4 right and I can also do a console. log of Y as well so I'll get three and four now I can also add them as well so I can just do console. log of x + y right when I do a console. log of X+ Y what will be the output right when I do a console. log of x + y okay so this basically would be seven right so it will add the number stored in the variable x with the number stored in the variable y so it will add both of them whatever is the number stored in the variable X see the moment I highlight X also or hover over X it says where X and it is a number okay and so it will add the number stor in both of these variables okay great okay let's move ahead now in the same way I can also store my name also okay so for example I can just write where let's say name is equal to rakash Sakari okay but now I since I want to store this name okay this is the data so the data I told you it can be in the form of a number or it can be form of a string so whenever you want to store some text whenever you want to store some text it should always in the form of a string whenever you want to store some text it should always be in the form of a what string itself okay so now since V name equals to prash Sakari what I can do is over here instead of this prakash aari I can replace it with a variable also okay how do I replace it with a variable I can I simply have to do I simply have to do hi my name is okay hi my name is and I'll put a plus sign and I can put the variable okay so I can write hi my name is okay or let's say I can just write uh username and over here I will just write usern name okay and I'll save this so usern name is what prakash Sakari so over here I just replaced hi my name is and I'm using a plus sign and I'm just writing username so if I save this now so if you see I'm getting hi my name is prakash Sakari but if you see there is no space okay there is no space so I can add a space over here hi my name is a space right plus the username okay my name is prakash Sakari so what is happening over here uh when I do a console log of the username right so it will not just it will just not write hi my name is and then username now this is it knows that it's a variable it's a storage unit in which some data is stored so it knows that I have to I basically have to uh show the data that is stored in this variable okay it knows how to show the data that is okay let's say if I put username also in inverted codes then what will be the output can you just put it in the chat if I just put username also in the in in inverted codes then what will be the output can you put it in the chat okay hi my name is uh space and then plus and then username also inverted codes what will be the output right so if you see over here the output is nothing but hi my name is username itself right because this username now is not a variable anything you write in inverted quotes becomes a string anything you write in inverted quotes becomes a string and that it will be logged the way it is written okay whichever way you have written it it will be shown in the same way on the console right so if I want to access a variable I will just have to write hi my name is space and then the variable okay so whatever is there in the variable I will be simply able to see it over here okay so hi my name is uh prakash sakario okay great great couple of people have also given the answer right you are right name is username okay okay now with whenever you have a variable which is declared with Y so this is called as variable declaration where I'm declaring a variable called as username and I'm assigning a value called as prakash Sakari this is called as variable declaration where I'm declaring a variable called as username and assigning this value prakash Sakari I can also change the value of this variable also if I write username is equal to and then in inverted course let's say um if I write let's say Ashish okay Ashish jangra so what will be the output on the console okay will it be hi my name is prakash Sakari or will it be hi my name is Ash jangra or will it be prakash SAR as JRA what will it be right so if you see on the console it says hi my name is Ashish jangra so what is happening over here it it is basically updating the value of the variable so you can also update the value of the variable it's not that once you store a value then it will be there forever only no you can also update the value of the variable okay you can simply update the value of the variable okay so this is the use case of V okay but the problem with v is you can basically uh keep on keep on declaring it multiple times right you can keep on declaring it multiple times let's say I can just write uh wimble CLA over here so if I save this so and let's say if I comment this sign of code so the output will be hi my name is m Kos this is a problem with v you can keep on red declaring it multiple multiple times right the problem the problem over here is that uh this technically should have given us an error okay this this should give us an error which says that variable is already declared so there is no need of redeclaring it again this is called as red declaration again when I write where okay whenever I use these keywords where letter or cons I'm declaring a variable okay so where username Pras sorry I have declared a variable with username if I again declare a variable with the same uh with the same name like username right this is like redeclaring it if I write username if I write username one then it is fine okay then this username one becomes a new variable like I'm creating a new variable but if I just write username I'm again creating the same old variable itself okay which is not a good practice okay so generally we do not use V itself okay we just avoid using V and all of these things okay okay so let's come to the next variable which is red okay we'll just uh finish this and then we will move to a new part okay writing conditions and see I'm just trying to build some basic and then we can just uh start writing some some conditions okay so we'll just learn let cons we can maybe learn in the next session okay uh because we won't be using where we'll just be using let so I'll just tell you what let is and how let actually works okay so I just write let okay let uh user equals to let's say uh over here I just write sakshi okay that user equals to sakshi and I can if I want to again do a log console I can write hi hi I am okay now if I want to use the variable I can also use comma also okay instead of plus I can use comma also okay so there are multiple ways to l okay when you want to log a uh uh string okay when when you have to log multiple strings so you can either use a plus or you can also use a comma also so I can write hi I am and then comma user okay so over here this is basically called as declaring a variable with let okay declaring a variable with let so now if you see it okay let me just comment all of this thing over here if we see the output okay so it will be hi I am saki okay now what is the difference between V and L okay the important question is what is the difference between V and L so with v if you see you can redeclare the variable okay and you can also uh change the value also with let if I try to declare the same variable again okay if I write let user equals to let's say aath okay so if I try to do it again then it gives an error okay so if we go and check over here it gives what it gives a syntax error okay so great you have your first error also so for people who are beginners who do not who have started learning JavaScript or with or any programming language so this is your first error it says uncut syntax error can anyone put in the chat what is the syntax error what do you understand by syntax error okay saki is a good dancer I do not know my friend saki she's a very good teacher I know that only okay so U uncut syntax error I it says so what is syntax syntax basically means a line of code syntax means line of code so when it says syntax that means this is an incorrect line of code okay and when you get a syntax error you get it you get basically when the format is incorrect okay whatever you're writing if the format is of the if the if the format of the line is incorrect or if JavaScript does not allows something like that Javas does not allow a syntax like that then it gives you an error called as syntax error okay if the the way you have written the line of code the format is incorrect okay because obviously since it's a it's a it's a programming language so all the syntax are predefined it's not that if you write something new it will accept it it does not working that way okay so it has some predefined line of codes right predefined way of format in which it accepts it if you if you uh if you write something different so it will give you syntax error okay what is the error over here it says uh what is the syntax error over here I'm again trying to redeclare the a variable okay as I told you whenever you you use this keywords let or where or cons you are basic declaring a variable okay so I have already declared a variable sakshi declared a variable user and the value is saki I'm again trying to redeclare it so with in in with let redeclaration is not possible okay let variable cannot be redeclared okay cannot be redeclared so we cannot redeclare a let variable but can we assign a new value yes we can assign a new value so the we have written let user equals to sakshi if I write user equals to AIT so the value of this variable will be updated so if I see it over here so it is I am of okay so this is how it actually works okay so this is the difference between let and where okay where uh you can declare a variable with let okay and you can assign a new value also but you cannot redeclare it okay you can declare a variable with let but you cannot redeclare it again but with where you can redeclare it multiple times okay you can redeclare it multiple times so see the good part over here is that let's say for example somewhere down the line if you are writing a very big code right and on top you have actually declared this variable let user right and let's say um again you want to declare a variable but again by mistaken you have you have used the same variable called as user okay if you're doing it with where you will actually have no understanding or no clue at all that okay you're using the same variable so maybe you might be expecting the value which is at the top but you will get uh the value you have declared at the bottom level okay somewhere down the line of code but with let the good part is that if you try to redeclare the same variable it will give you an error okay that this variable has already been declared so you don't redeclare the same variable you can use another name or you can reassign it okay so this is the difference between uh V and let okay cons we'll see later on Okay cool so yeah let's move ahead with u uh conditions okay okay or yeah before moving ahead with conditions there is one way also I wanted to show you uh how to log something so let's say for example if I write over here this username okay or let's say which we go with AIT only okay let user equals to AIT and let's say uh I'll just also write let U age user age user age equals let's say 100 let's say is 100 years old okay so it says console log hi I am a user that means hi I am a and let's say I want to also write I am let's say 100 years old so I'll just put a comma again and I'll write I am okay and a comma and her age which is user age and then comma okay years old so this is how basically we write okay let's say for example if I have to use it with plus sign so I'll just start console.log you just have to keep on replacing uh your sentence with your variable it's as simple as that hi I am now let's say I have to put the variable name so I'll put a space over here plus user okay and then plus okay in inverted code space I am a space and then plus user age okay that is 99 and then and then again plus plus okay plus and then space and then years old okay so this is these are the two ways in which it is written okay so if we see it so it gives hi I'm a I'm 100 years old hi I'm a I'm 100 years old but this is not a good way right it's it does not look good at all okay that the way the way I'm writing okay obviously writing that she's 100 years old is also not good enough once uh she gets to know this she'll just kill me okay okay so hi I'm a and I'm 19 so it's obviously this is not a good way to actually write anything okay um so when we when we write code at an industry level we use something called as uh template literal template literal how do you use template Ral you just write console.log you use this thing till day okay this is basically U uh next to the number one on your keyboard okay on the left hand side uh of number one on your keyboard on your laptop keyboard you'll just see this till day so in this still day how I'm going to write I'm just going to write say hi what I want to write hi I am let's say I am a okay um comma I am 99 years old this is what I want to show on the console okay this is what I want to show on the console so but I know here that a is coming from where it's coming from a variable what is the name of the variable it is user 99 is also coming from where it's coming from a variable what is a variable it is user age so what I'm going to do is if I want to get a variable over here instead of I will just have to remove this I'll use a dollar sign I'll use a curly braces and in the curly braces I'll write the name of the variable okay I'll use a dollar sign in C I'll use a curly braces in it I'll write the name of the variable similarly again 99 is coming from a variable so if any value is coming from a variable I'll use a dollar sign call Braes and then user age okay and then if I see I'll get the same output I am AB I am 99 okay she's 100 years old okay so this is generally a practice that we follow and this is generally how basically we write uh at an industry level okay a string whichever string we want to show on the console okay or we want to display it on the screen okay these are this is a way in which basically we write okay let's say if I'm getting a data from an API okay that this is this is a user's name or let's say a user's plan is expiring so if I want to show it on the screen so I have to put it in a string so the value of the variable we write it in this way so this looks more elegant and more as an industry practice also rather than having all of these plus plus plus all this comma comma comma okay cool let's move ahead let's move ahead in that case okay cool I'll just get rid of all of these I'll just comment everything for now okay let's move to something called as um conditions okay let's move to something called as conditions okay conditions okay so what are uh conditions okay so you'll see many things okay many many basically many things uh uh revolving around certain conditions okay so basically when you see when I see you see multiple things revolving around conditions for example as I give you the example that your plan is expiring okay so that that is conditional so if you've taken a plan for three months right if you taking a plan of three months so basically you'll get a notification that your plan will be expiring in five days or three days or two days so that's conditional so it keeps a check upon when did you purchase the plan right and it goes and it and it keeps a check for three months so when uh you're nearing 3 months okay when you're completing three months right so that time it will give you a notification okay that your plan is expiring so that is nothing but a condition okay and there are multiple conditions right that goes around Whenever there is a in if uh you're working on a website right so let's say on the on the homepage if for a particular user you want to show something if for some other set of users you want to show something that is also conditional based right let's say for example uh now you might everyone is using shopping apps right there is menra there is flipcart and so many other shopping sites that you use right now you also see something called as early user or Early Access as well so if you're an early user or an early access or if you're a Prime member you get to see different other things right if you're An Early Access you basically get to shop a little earlier than the other members as well so that those are conditional based like if a user is and if a user has subscribed to Early Access then show him all of these things if the user has subscribed to to uh this membership show him all of these things do not show him all of these things so in every website every website functions conditionally right so how do you write conditions now to write conditions very simple you write if and in parenthesis you write whatever is the condition okay whatever is whatever is the condition that you want to check right and then you basically write the body of code to be executed okay body of code to be executed okay what of code to be executed if the condition is true or false okay I'll give an example let's take a variable let and we'll just write if a user is admin so I'll just write is user admin okay now if you see the way I'm writing variable name if uh if your variable name has multiple letters so this basically is called as camel casing okay in JavaScript we follow camel casing there are multiple casing there is camel casing there is snake casing there are multiple other casing also but in JavaScript we follow camel casing okay and variable naming is very important very very important along along this while um if if even if you know a lot of things just um try to understand the way I'm writing variable names the way I'm selecting variable names okay so over here what I'm doing is I'm just writing is user and admin okay and if you see the it has multiple words so the uh first word okay will always start in lower case when you start the second word the first letter always will start in upper case okay again if it's a new word the first first alphabet of the word will start with uppercase but with the first word it will only start in lower case so from the second word onwards okay the first alphabet will always be in uppercase okay if admin is user admin now I'm using another data type okay we have seen numbers with number is whole numbers okay nine and then let's say 4.5 and we've also SE seen string anything return in inverted codes become a string there's another type of variable called as Boolean okay written over here Boolean what is Boolean Boolean basically has two values it is either true or it is either false Boolean is either true or Boolean is either false okay so I can write let is user admin so I can just write let's say it is true okay is user admin and I'm assigning a value through that means user is an admin if I WR is user admin if I false so that means user is not an admin okay okay is false so I can just give it a value true or false okay so uh this is how you identify as I gave you an example that um um on a website okay or any on on a shopping website you might be their Prime member or you might be their you might have taken some membership or something like that so under the hood or internally basically uh uh you can do it in this way you can write a check case Okay is user an admin or not not so through that means it's user is admin if I assign a value false it's not an admin obviously so here what I can do is instead of the condition I can just write uh is user admin okay so I write over here if user is admin and then what I'll do is I'll just write a console.log yes user is an admin okay yes user is admin so if I save this and then if I go to my console it's says yes user is user is an admin okay it says what that user is an admin now what is uh this this over here okay now you might be saying okay there is no condition at all over here okay so as I told you okay so how does this work so if the condition is through if the condition is through then it'll execute this body of code so what is the value of this user admin over here so condition does does not only mean that I have to write something greater than or less than or equal to or not equal to not not necessary right I can also my condition can also be a variable which can give me a value through or false my condition can also be a variable which gives me a value through or false okay so if I write false over here if I write false over here is user admin false then if I go and check my console there is nothing in my console okay even if I uh refresh it I'm actually not going to get anything in my console okay so but if the moment if I make it through so I'll get the value in my console which is yes user is admin so here instead of true and false I can also instead of this is user admin that means even if I write through over here it works right if through console log yes user is admin right right I can write if if this is false if this is false if the condition is false so if you see this is now what this is now uh not highlighted okay this becomes a disabled line of code okay and if you see if I hover over it it gives me it says unreachable code detected okay if I hover over it it gives me unreachable code detected okay so if I go here and if I refresh it I can see nothing over here on on the console there's nothing on the console over here right why because the condition is false okay so here if a given condition is through then it will execute the line of code if if it is not true it won't execute the line of code okay so let's see some more examples okay so for example let's say I have a variable let xal to uh 4 and let's say let yals to let's say 10 okay so I'll write if x is greater than y x is greater than y so this is my condition right so there are there are conditional operators okay so there the way there were mathematical operators we saw mathematical operators like plus minus multiplication division those are nothing but mathematical operators the way there are mathematical operators there are conditional operators also okay that is greater than okay so what are the operators so it is greater than then there is less than okay then there is greater than equal to less than equal to there is double equal to there is triple equal to there is not equal to there is not and then double equal to so these are some conditional operators right obviously these are condition right if this greater sign basically means what condition double equal to means condition equality then not equal to all of these are condition so if x is greater than y okay so if x is greater than y then what I need to do I'll just write console console. log of okay uh I'll just write yes okay but there can be another condition also so if x is greater than y I can write yes otherwise otherwise otherwise means else otherwise I can write console. log of let's say no okay so here what I'm doing is if x is greater than y then I do console log of s otherwise okay otherwise means otherwise okay right it's it's like if not this then this okay there are two things if not this then this so if if this is true then it will execute this line of code console log of yes if this condition is false if X is not greater than y it will

Original Description

In this video, Prakash Sir will guide you step-by-step through the fundamentals of JavaScript, helping you build a strong foundation in coding. Whether you're a complete beginner or looking to refresh your skills, this tutorial is designed to get you coding like a pro! ๐Ÿ’ปโœจ Liked this session? Keep following GeeksforGeeks for more such LIVE classes Don't forget to start the 90% money back challenge: https://www.geeksforgeeks.org/courses Follow us for more tips, knowledge, and resources: ๐Ÿ“ฑ Download GeeksforGeeks' Official App: https://play.google.com/store/apps/details?id=free.programming.programming ๐Ÿ’ฌ Twitter: https://twitter.com/geeksforgeeks ๐Ÿง‘โ€๐Ÿ’ผ LinkedIn: https://www.linkedin.com/company/geeksforgeeks ๐Ÿ“ท Instagram: https://www.instagram.com/geeks_for_geeks/ ๐Ÿ’Œ Telegram: https://t.me/geeksforgeeks_official ๐Ÿ“Œ Pinterest: https://in.pinterest.com/geeksforgeeks/ ๐ŸŽฎ Discord: https://discord.gg/geeksforgeeks #javascript #Coding #LearnToCode #PrakashSir #Programming #WebDevelopment #CodeLikeAPro
Watch on YouTube โ†— (saves to browser)
Sign in to unlock AI tutor explanation ยท โšก30

Playlist

Uploads from GeeksforGeeks ยท GeeksforGeeks ยท 0 of 60

โ† Previous Next โ†’
1 How I got into Walmart | Shailesh Sharma
How I got into Walmart | Shailesh Sharma
GeeksforGeeks
2 Upgrade yourself In 29 Days | GeeksforGeeks
Upgrade yourself In 29 Days | GeeksforGeeks
GeeksforGeeks
3 Learn AWS Fundamentals For Free
Learn AWS Fundamentals For Free
GeeksforGeeks
4 Conversation With Young Achievers | Meet the winners of Bi-Wizard Coding Contest | GeeksforGeeks
Conversation With Young Achievers | Meet the winners of Bi-Wizard Coding Contest | GeeksforGeeks
GeeksforGeeks
5 Meet The Winners Of Bi-Wizard Coding Contests | GeeksforGeeks
Meet The Winners Of Bi-Wizard Coding Contests | GeeksforGeeks
GeeksforGeeks
6 Interview Prep Strategies | PayPal
Interview Prep Strategies | PayPal
GeeksforGeeks
7 OLX Interview Preparation Strategies | Hukam Singh
OLX Interview Preparation Strategies | Hukam Singh
GeeksforGeeks
8 Meet Some More Winners Of Bi-Wizard Coding Contests | GeeksforGeeks
Meet Some More Winners Of Bi-Wizard Coding Contests | GeeksforGeeks
GeeksforGeeks
9 Live Mock DSA
Live Mock DSA
GeeksforGeeks
10 Microsoft Azure For Absolute Beginners
Microsoft Azure For Absolute Beginners
GeeksforGeeks
11 Python for Data Science | Data Science Master Bootcamp | Arpit Jain
Python for Data Science | Data Science Master Bootcamp | Arpit Jain
GeeksforGeeks
12 Getting Started with Data Analysis | Data Science Master Bootcamp | Ashish Jangra
Getting Started with Data Analysis | Data Science Master Bootcamp | Ashish Jangra
GeeksforGeeks
13 How to prepare theory subjects for SDE interviews | Geeks Summer Carnival 2022
How to prepare theory subjects for SDE interviews | Geeks Summer Carnival 2022
GeeksforGeeks
14 Get Your Tickets To The Geeks Summer Carnival | GeeksforGeeks
Get Your Tickets To The Geeks Summer Carnival | GeeksforGeeks
GeeksforGeeks
15 TED Talk Data Analysis Project | Data Science Master Bootcamp | Ashish Jangra
TED Talk Data Analysis Project | Data Science Master Bootcamp | Ashish Jangra
GeeksforGeeks
16 How I Secured AIR 9 in GATE'22 |  Tushar
How I Secured AIR 9 in GATE'22 | Tushar
GeeksforGeeks
17 Learn Java Backend Development | Geeks Summer Carnival | GeeksforGeeks
Learn Java Backend Development | Geeks Summer Carnival | GeeksforGeeks
GeeksforGeeks
18 How to Recognize which Data Structure to use in a question | Geeks Summer Carnival | GeeksforGeeks
How to Recognize which Data Structure to use in a question | Geeks Summer Carnival | GeeksforGeeks
GeeksforGeeks
19 Learn Data Structures and Algorithms | GeeksforGeeks
Learn Data Structures and Algorithms | GeeksforGeeks
GeeksforGeeks
20 Interview experience at Flipkart | GeeksforGeeks
Interview experience at Flipkart | GeeksforGeeks
GeeksforGeeks
21 Lets Prepare for GATE'23 the Right Way | Sakshi Singhal | GeekSummerCarnival
Lets Prepare for GATE'23 the Right Way | Sakshi Singhal | GeekSummerCarnival
GeeksforGeeks
22 Highest Paying Jobs in 2022 | Ishan Sharma | Geeks Summer Carnival 2022 | GeeksforGeeks
Highest Paying Jobs in 2022 | Ishan Sharma | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
23 Geeks Summer Carnival 2022 | 5th April- 11th April | GeeksforGeeks
Geeks Summer Carnival 2022 | 5th April- 11th April | GeeksforGeeks
GeeksforGeeks
24 Preparing for SDE interviews | Soham Mukherjee | Geeks Summer Carnival 2022 | GeeksforGeeks
Preparing for SDE interviews | Soham Mukherjee | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
25 Full Stack Development with React & Node | Utkarsh Malik | Geeks Summer Carnival | GeeksforGeeks
Full Stack Development with React & Node | Utkarsh Malik | Geeks Summer Carnival | GeeksforGeeks
GeeksforGeeks
26 Introduction to Open Source and Roadmap to GSOC 2022 | Geeks Summer Carnival 2022 | GeeksforGeeks
Introduction to Open Source and Roadmap to GSOC 2022 | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
27 Web Scraping in Action | Geeks Summer Carnival 2022 | GeeksforGeeks
Web Scraping in Action | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
28 Getting Hired at BITCS via GfG Job Portal | Get Hired With GeeksforGeeks
Getting Hired at BITCS via GfG Job Portal | Get Hired With GeeksforGeeks
GeeksforGeeks
29 How to build a faster landing Page | Geeks Summer Carnival 2022 | GeeksforGeeks
How to build a faster landing Page | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
30 Geeks Summer Carnival | 5th To 11th April, 2022 | GeeksforGeeks
Geeks Summer Carnival | 5th To 11th April, 2022 | GeeksforGeeks
GeeksforGeeks
31 How to get ideas for Startup | Geeks Summer Carnival 2022 | GeeksforGeeks
How to get ideas for Startup | Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
32 Journey from Tier 3 to JusPay | GeeksforGeeks
Journey from Tier 3 to JusPay | GeeksforGeeks
GeeksforGeeks
33 Geeks Summer Carnival 2022 | GeeksforGeeks
Geeks Summer Carnival 2022 | GeeksforGeeks
GeeksforGeeks
34 Dispelling Myths and Pre conceptions of Programming Languages
Dispelling Myths and Pre conceptions of Programming Languages
GeeksforGeeks
35 Must Do System Design Questions
Must Do System Design Questions
GeeksforGeeks
36 Understanding Sorting Techniques in an hour | Keerti Purswani | Geeks Summer Carnival
Understanding Sorting Techniques in an hour | Keerti Purswani | Geeks Summer Carnival
GeeksforGeeks
37 Get Hired at NEC | Job-A-Thon 8
Get Hired at NEC | Job-A-Thon 8
GeeksforGeeks
38 Journey from Tier 3 college to Microsoft | GeeksforGeeks
Journey from Tier 3 college to Microsoft | GeeksforGeeks
GeeksforGeeks
39 Get Hired with GeeksforGeeks at SuperK | Job A Thon 8
Get Hired with GeeksforGeeks at SuperK | Job A Thon 8
GeeksforGeeks
40 GeeksforGeeks: Redesigned
GeeksforGeeks: Redesigned
GeeksforGeeks
41 From Tier 3 to cracking multiple interviews | GeeksforGeeks
From Tier 3 to cracking multiple interviews | GeeksforGeeks
GeeksforGeeks
42 Live Mock DSA
Live Mock DSA
GeeksforGeeks
43 Youtube Data Analysis | Ashish Jangra | GeeksforGeeks
Youtube Data Analysis | Ashish Jangra | GeeksforGeeks
GeeksforGeeks
44 DSA Self-Paced Course Preview | Sandeep Jain | GeeksforGeeks
DSA Self-Paced Course Preview | Sandeep Jain | GeeksforGeeks
GeeksforGeeks
45 GATE Live Classes | Prepare for GATE CS 2023 | GeeksforGeeks
GATE Live Classes | Prepare for GATE CS 2023 | GeeksforGeeks
GeeksforGeeks
46 Journey from JIIT to Adobe
Journey from JIIT to Adobe
GeeksforGeeks
47 Life Is Unfair Ft. Shonty badmash | LIVE Discord Session | A GeeksforGeeks Exclusive
Life Is Unfair Ft. Shonty badmash | LIVE Discord Session | A GeeksforGeeks Exclusive
GeeksforGeeks
48 Interview Experience at Google | Tech Dose
Interview Experience at Google | Tech Dose
GeeksforGeeks
49 Live Mock DSA
Live Mock DSA
GeeksforGeeks
50 Interview Experience @ Amazon | GeeksforGeeks
Interview Experience @ Amazon | GeeksforGeeks
GeeksforGeeks
51 My journey through the tech world from India to US | Vidushi | GeeksforGeeks
My journey through the tech world from India to US | Vidushi | GeeksforGeeks
GeeksforGeeks
52 Complete Interview Preparation Course | GeeksforGeeks
Complete Interview Preparation Course | GeeksforGeeks
GeeksforGeeks
53 Live Mock DSA
Live Mock DSA
GeeksforGeeks
54 Getting Hired at FiftyFive Technologies | Job-a-thon 9.0
Getting Hired at FiftyFive Technologies | Job-a-thon 9.0
GeeksforGeeks
55 GFG Karlo, Ho Jayega | GeeksforGeeks ft. Khaleel Ahmed
GFG Karlo, Ho Jayega | GeeksforGeeks ft. Khaleel Ahmed
GeeksforGeeks
56 How I got job offers from 2 big companies : Arcesium & Microsoft | GeeksforGeeks
How I got job offers from 2 big companies : Arcesium & Microsoft | GeeksforGeeks
GeeksforGeeks
57 LINUX for Beginners | GFG x Itversity
LINUX for Beginners | GFG x Itversity
GeeksforGeeks
58 My interview experience at Walmart | GeeksforGeeks
My interview experience at Walmart | GeeksforGeeks
GeeksforGeeks
59 Get Hired at Speckyfox
Get Hired at Speckyfox
GeeksforGeeks
60 Live Mock DSA
Live Mock DSA
GeeksforGeeks

Related AI Lessons

โšก
I Built a Free AI-Powered YouTube SEO Toolkit With Zero Budget. Hereโ€™s What Actually Happened.
Learn how a solo dev built a free AI-powered YouTube SEO toolkit with zero budget and the lessons they learned from the experience
Medium ยท Startup
โšก
How to Create a Second Version of Yourself Inside Obsidian Using AI (Step-by-Step Guide)
Learn to create a second version of yourself inside Obsidian using AI with a step-by-step guide
Medium ยท ChatGPT
โšก
How to prepare for Spain civil service TIC exam using AI in 2026
Learn how to prepare for the Spain civil service TIC exam using AI in 2026, boosting your chances of success with technology-driven study techniques
Dev.to ยท David Garcรญa
โšก
Going Viral! How I Created AI Kissing Videos Step by Step Easily Using AIAI.com
Create viral AI kissing videos using AIAI.com in a step-by-step process, leveraging AI technology for creative content creation
Medium ยท AI
Up next
Low-Tech, High-Impact: Replacing Your Receptionist With a $15 AI Phone System
Maximum Lawyer
Watch โ†’