Conquering freeCodeCamp - Basic JavaScript (Part 1) - Live Stream #11

hello and welcome everybody to a new section in our quest to conquer free code camps curriculum here we are at one of the most requested topics which is JavaScript I hope you're all excited as I am to start this new journey last week we finished the responsive web design certification we finished the five projects and we block the certification now it's time to go a little deeper and we're going to start learning JavaScript which will basically be the next step in our progress the more advanced step I'd say and it will be a lot of fun for those of you who are watching live say hi in the chat and we can then proceed in this livestream we have 110 hey what are these exercises and not sure if we're going to go through all of 110 exercises I might do them in two live streams depending on how long it will take all right let's see the chat bigger and better we're excited this is Hana by the way a Hana Alberto hi watching from New York nice hello from Romania and I've met from Egypt good good good all right so yeah for those of you who watching this recording keep in mind that I might not go over all of the 110 projects or exercises whatever they are but if I want then I'm going to do another knife stream later today so you'll have part 1 and part 2 although let's let's try to go over all of them but I'm not sure okay everyone is ready so we can start javascript in my opinion javascript is awesome if you agree with me date in the chat or give it a thumbs up / date in the comment JavaScript is awesome all right I think we are ready or those of you maybe in the future who watching this recording and you don't know about free code camp pickup camp is a platform where you can learn programming especially web development from scratch and it's also free so you should check it out if you want to play around it maybe you know programming what you want to do the project and you want to get certifications this is a good place to do just that all right I think that's all right I don't have a script so I'm just yeah I'm just talking as a state fit all right let's start the introduction to JavaScript I think this is big enough for you so you can also following along yeah that that's one thing I want to mention also if you're watching this and you haven't programmed before I highly suggest you either follow along open free code camp you'll find a link in the description if you need and also do the exercises with me it will be best for you to do it on your own first to try it because that's the way you're learning the most when you trial and fail and see why you failed but it's ok if you also follow along as make sure that if you following along also do it on your own all right introduction to JavaScript never scripts a high-level programming language that all modern web browsers support it also it's also one of the core technologies of the weapon along with HTML and CSS as I said when we did the first curriculum which was the first certificate which was HTML and CSS when we're thinking about HTML CSS and JavaScript I usually like to think it like this we have the HTML which is the bones like the human body then we have the CSS which give it gives its style it makes it pretty we have skin and eyes and ears and all that okay and JavaScript is what makes us function we can rotate our hands and walk and we can see and all that so this is exactly how I see HTML CSS in program and JavaScript in programming I hope that makes sense for you alright this section will cover basic JavaScript programming concepts which range from variables and arithmetic to objects and loops all right let's go to the first lesson basic JavaScript comment your javascript code okay we saw also that we have comments in HTML and CSS and the same we have in JavaScript you can have comments by either putting the forward slash slashes or / - it is that something we need two of them before the line or you can do a block of comments by having the four slash star and star four slash at the end best practices as you write code you should regularly add comments to clarify the function of parts of your code good commenting and how communicate the intent of your code yeah this is true especially if you want to go over the code again in the future it happened to me many times that I created the program or something and then I needed to edit it like in two months three months and I had no idea what it does but I had comments so then I could read what I was in my mind when I created it so that commenting is good for your future self and also for those the people who are working with you who they know what you meant ok let's see the first exercise try creating one of each type of comment ok so we put the two forward slashes blackfish that's not the word forward slash okay it's and this is one line of comment single line okay and if you have a block we put it inside yes and we we can have here multiple lines of comments you'll usually use this single line mostly not not all of the cases but it's good to know that we also have multiple lines okay run the test look at that one percent kaput awesome declare variable JavaScript variables okay so we're entering the a degree D in computer science data is anything that is meaningful to the computer javascript seven different data types which are undefined no boolean string symbol number and object for example computers distinguish between numbers such as the number 12 and string such as 12 in quotes this is a string also we have dog or also 1 2 3 cats in a string there is a string here which are collections of characters computers can perform mathematical options operations on a number but not on a string variables allow computers to store and manipulate data in a dynamic fashion they do this by using a label to point to the data rate rather than using the data itself any of the 7 the data types may be stored in a variable all right variables are similar to the X and y variables you use in mathematics which means there are simple name to represent the data we want to refer to Twitter variables differ from mathematical variables in that they can store different values at different times without JavaScript to create or declare a variable by putting the keyword bar in front of it like so we have here var and then our variable name which creates a variable car called our name in JavaScript we end statement with statements with semicolons variable names can be made up of numbers letters and/or dollar signed or low under case but may not contain spaces or start with the number okay let's see the exercise use the VAR keyword to create a variable called my name in look at our name example if you get stuck alright so we're going to use the VAR keyword look at that our in browser editor also knows that this is specific keyword so it turns blue and we can say my name so now we declared our first variable in JavaScript this is awesome that's from the test and see if it's correct it is two percent completed awesome the next one storing values value with the assignment operator okay in JavaScript you can store a value in a variable with the assignment operator so we have here my variable and we assign it the value of five which is enough this assigns the number value 5 to my variable exactly assignment always goes from right to left everything to the right of the equal operator is resolved before the value is assigned to the variable to the left of the operator okay we'll see in a moment why what this mean okay so we can see here my var is five and then we put my bar which is a five to be also in my number all right assign the value seven to a value to variable a okay it will be severed assign the contents of any to variable B so we change this B to equal to and we say B to equal a oh we need to do it here this is the setup so we need to do it only below this line okay so we have the decoration here there are a but it doesn't have a value so let's set it to be seven and then assign the contents of a two variable B and now we can say B equals a although here B is 2 we're going to override it and set B to equal a let's run the test and is complet ad good okay ask me later initializing variables with the assignment operator it is common to initialize a variable to the initial value in the same length line as it is declared so here you can see we initialize it and we also edit the value of zero okay defined a variable a with far and initialize it to a value of nine so far a will be nine this can also be done in two lines like this bar a and then ei equals to nine but usually what you're doing is the second one bar a equals nine okay run the tests back understanding and uninitialized variables when javascript perl words are declared they have an initial value of undefined if you didn't do a mathematical operation on an undefined variable your result will be a mah which means not a number if you can concatenate a string with an undefined variable you will get a little string of undefined but you have see here that it's in codes initialize the three variables a B and C with 510 and I am 8 respectively so that they will not be undefined okay so we have here ABC and their values now when they were initialized is undefined because we haven't set a value let's see do not change code below this line okay so we need to change them here but a will be five then B will be 10 and C will be I am a poops I am pay you can see here that they are going to add one to our a and put it back inside the a variable which means we'll have 5 plus 1 which is 6 and it will store will be stored in a again ok on the second line we'll have B which is 10 plus 5 which is 15 will be 15 and here on the last row for the sea we have a string which is I am a and then we add another string now in JavaScript what this does is it will concatenate the two strings so let's see can we run the code [Music] run the test yeah but I wanted to let see also left la cama C a B and C yeah okay we're good we're probably going to learn about console.log later but I just wanted to show you what are the values of a B and C with this console that log we can see we can console to the we can log to the console anything we put here into the parenthesis okay so you can see that the a is 6 then B is 15 and see look at that so is I am a bass string and here is the string hopefully this makes sense for those of you who don't know JavaScript yet all right from the tests and we can go to the next one understanding case sensitivity in variables okay this is a good one so my VAR all uppercase is not the same as my VAR with M and V being uppercase nor my far with all lowercase they're all different it is possible to have multiple distinct variables with the same name but different casing it is strongly recommended that for the sake of clarity you do not use this language feature yeah don't do my var multiple times with different casing that's not a good practice I never seen it so yeah don't do it okay best practice is to write variable names in JavaScript in camel case meaning that if you have multiple world variables names have the first word in lowercase and the first letter of each subsequent word in capitalized look at it look at this we have some variable you can see that the first s is a lowercase but then all subsequent words have the first letter uppercase we have again another variable name this variable name is so long you can clearly read it because you can see the uppercase letter all right okay we have a question in the chat how to get the dark mode on pre-cut cap okay let me quickly go to pound settings and here we have a settings night mode you can turn it on and off all right let's go back to case sensitivity okay look at this it's so hard to read study but the cat bar but proper camelcase this is a good one title case over okay oh look at that they assigned but it's the wrong variable all right let's see modify the existing Declaration and assignment so they read they names use camel case do not create new variables okay so daddy I know one ugly cat bar but what does it mean okay so we can use this then proper camel case I'm just copying over and I told ace over okay like this let's see but it works alright so it works we changed all of these to use camel case good next alright Matt this is exciting because if you're not a big fan of Matt you can put JavaScript to do it for you oh that's great number is the data type in JavaScript which represents numeric data now let's try to add two numbers using JavaScript we can do so by adding the plus symbol which is the addition operator addition operator and we need to place it between two numbers so exactly in math like in match right okay my var in this example will be 5 plus 10 and it will be assigned 50 so if you remember in the previous exercise we said that the value from the right will be first calculated and then will be assigned to the variable on the left side of the equal okay change the zero so that the sum will equal 20 so we have here bar sum is 10 plus 0 which is obviously not 20 so we need to change this to 10 run the test and look at that we did met so tracting so yeah this is pretty obvious now we have the minus symbol for subscribe subtracting change the 0 so the difference is 12 okay 45 - what makes 12 minus 33 yep I guess last time I checked all right perfect multiplication the same they have the asterisks change zero so that the product with equal eighty eight times ten boom and we have division we can also divide one number by another okay with the forward slash Changez zero so then the boat end is equal to two a 33 66 divided by 33 should lead to all right increment a number now this is something also very important we can increment a number by one using the plus plus operator so basically as they say here I plus plus is equal to is the same as saying I equals to I plus 1 so it increments the value okay yeah the entire line becomes I plus plus eliminating the need to the equal sign so we don't need the equal sign change the code to use the plus plus operator on my bar okay so we can see here the my bar has 87 and we want to add one so instead of doing this let me comment this out we can say my bar plus plus so basically is the same as this line let's run it oh yeah I'll attic comment so let me move this they apparently don't like that okay okay Deak romantic number so obviously if we have plus plus we can also do - - which does the exact opposite thing so we decrement by one okay let's quickly do my part - - I run the test perfect wait decimal numbers with JavaScript okay we can also store decimal numbers in variables to decimal numbers are sometimes referred to as a floating-point number or follows not re not all real numbers can accurately be represented in floating-point this can lead to rounding errors yeah you should read this if you want to go more in depth what this means trade the variable my decimal and give it the decimal value with a fraction part okay example 5.7 so we want to declare the my decimal value variable and we want to give it a value let's say one point seven this is a decimal number because we have default but it's pretty obvious you can see it's a lot like math you we can multiply two decimals with JavaScript same as with numbers we can multiply I mean also decimals which is obvious right change the 0.0 so that the product will equal 5.0 okay so we have 2 x 2.5 which will be 5 good divide one decimal by another with JavaScript okay change the 0.0 so that content will equal to two point two all right fix this line of a at noon this so we need to have to point oh four point four divided by two will be went to perfect are you guys following along those of you who are watching the live stream let me know finding a reminder in JavaScript okay this one is a good one also we have the reminder operator or a percentage here I think that's the simple right which gives the reminder of the division of two numbers okay so five modulus two gets called modulus right will be 1 because 5 divided divided by 2 is 2 and something and the reminder will be 1 think that's the worst explanation of the reminder operator but um basically what reminds when you have the division yeah that's not a good explanation you should probably just read this and it would be much better than I explained okay so look at that if we divide if you do the modulus operator on 17 and 2 we get 1 because we have 16 if we divide and remaining is 1 so that's that's it if we do 48 modulus 2 is 0 because 48 is even so we don't have anything left the reminder of pert is sometimes incorrectly referred to as a module spread okay is it very similar to modules but does not work properly with negative numbers okay so it's not the modulus operator look at that I learned something new okay set reminder equal to the reminder of eleven divided by three using the reminder operate okay so it's not the modulus nice so eleven reminder not reminder the reminder of the division 8 of 11 by 3 which should be too let's see also the club reminder we should reminder remain which should be to look at that all right next compound assignment with augmented addition in programming it is common to use assignment to modify the contents of a variable remember that everything to the right of the equal sign is evaluated first so we can say my part equals my FR + 5 to add 5 to my VAR since this is a common pattern there are operators which do both the mathematical operation and assignment in one step once a operator is the + equal operator all right you can see here that we are declaring my bar to be one and then we're doing my bar plus equals five which basically means my VAR equals my bar plus five if we'll have seven here it will be my bar equals my bar plus seven so that's pretty easy over the assignment for a B and C to use the Possible's operator okay so look at this we have e a b a plus 12 so instead of this we can say a plus equals 12 so it's exactly the same thing we learned about the incremental operator the plus plus but that only adds one but if we want to add more we can use this operator which is called augmented addition I didn't know that but I knew existed okay let's comment this out now we have B equals 9 plus B okay so they reverse the order but again we can do B plus equals 9 like that and 4c plus equals Evan like that also let's see what doesn't work yeah it works so it's pretty much does good run the tests next compound assignment with augmented substract subtraction so obviously if we have or addition we have the same for subtraction let's go directly to the exercise so we can quickly change this to be a minus equals six this will be B minus equals 15 and this will be C minus equals one although we could also do this by doing C minus minus but I guess they want this version in this exercise okay then look at that so now we also have the same for multiplication which is nice okay I guess we can just skip to the exercise eight x equals five here then be x equals three which is the same as B equals B times 3 3 times equals all right and I guess the next one will be for division yep let me know in the chat if this is clear enough whoops good enough for you or do you want me to go in more details be patient by four and see by 11 okay and easy declared string variables okay so by now we work with numbers and now we're going into strings you can see that string will have to be declared and we put codes around it we can let's see it is a same because it is a series of zero or more characters enclosed in single or double codes so we can have the first name be Alan with the double codes but at the same time we could let's do it here oh so let's see what we need to create two new strings variables are my first name and let's see VAR my last name okay and here we can put our first name and last name ring and we have Bob okay let's pretty straightforward so we declare our variable name and then we assign it to a string which is a series of characters inside double coats but at the same time we can have single coats like this which is the exact same thing single quotes or double coats are the exact same thing it's called a string literal okay let's run the test and see what we're learning next escaping literal quotes in strings alright so what happens if inside of a string you also want to have a quote well in order to do that we need to escape with the code so we need to tell the computer that this quote should be there inside the string okay yeah so as you can see here we have an example of sample string which says a lot Ellen said Peter is learning JavaScript and you can see that we skipped the quote with backslash also here at the end and the result will be this string which has the codes inside okay keep in mind that in this case well let me show you and then yeah let me just show you what take me let's do the exercise first use backslashes to assign a string to the my string variable so that if you were to print it it will look like this okay let me copy this take place so we don't have to type it all right so look at that what happens if we don't skip the factors it will interpret it piece as a string and then this will be nothing so we'll have an error and expected token because it does javascript doesn't know what this means and then here again we have a string but nothing here and also another error so what we need to do is to escape it so we can do that by putting the backslash here we need the next - here also one here and one here at the end because we have four coats okay look at that so now we have our string B this one trick I wanted to show you is that we need to we need to escape the double codes here because our stealing is declared with double quotes but we can use the single quotes to declare the string and then we don't have to escape the double codes inside let me show you what I mean so we're going back moving all the escape characters and we can just change the first double codes and the last one which is basically declaring that it's a string and inside it we can have double codes which won't want to bug the elastic now so it will know that we declared the string with single code and decided we can have double codes as many times as we want and we don't have to escape it so basically this is the same as doing the escape but sometimes you might also have I am instead of this you'll have I am like that so now because we have also single quotes and double quotes you want to escape those which are surrounding the initial string hopefully this makes sense for you okay run the tests you should use two coats and 400k so we need to do them their way so let's set escape escape it like that run good okay quoting strings with single quotes okay so we can do single or double codes as long as we start and end with the same type of quote and a [Music] all right yeah so I didn't know about this lesson but basically is what I just told you you can see that here we declared the conversation variable to be a string inside a single quote and then we can just use double quotes as much as we want okay and also we have the case where we having double codes and single codes inside our string so we need to escape the one which declares the string okay do not confuse the backslash with the forward slash the backslash is for escaping forward slashes for commenting change the provided string to swing with single quotes at the beginning and end and no escape characters okay so what we have here a link let's change this to single quotes and we can remove this cape character here and [Music] it 21% in 40 minutes okay okay quotes are not the only characters that can be escaped inside a string there are two reasons to use escaping characters now a first one is to allow you to you which allows you to use characters you may not otherwise be able to type out such as a carriage return or to to allow you to represent multiple quotes in a string without JavaScript misinterpret miss and they're prepping of you we learned this in the previous challenge okay so look at that we have all these scape sequences we have single quotes double quotes backslash so if you want to use a backslash inside a string you know you need to escape it first then we have the newline energy turn a tab a word boundary and the form feet never use note that backslash itself must be escaped in order to display as a backslash okay let's see the exercise assign the following three lines of text into the single variable my string using escape sequence okay we need first line then orig return we have a tab we have us backslash second line and third line okay so this is nice you need to use escape characters insert special character okay yeah here is a text with escaped correct sequence is written out so let's copy this and put it inside our strength first light new light okay so backslash n then we have AB backs F backslash okay so tab which is backslash T and then we have backslash so we need to escape so backslash backslash then we have the second line you can see also here in the console what happens then you have the second line and newline so backslash and and look at that now we have the first line tab we have first line then a new line a tab backslash second line new line and third line it might be a little confusing but yeah and also you can't have spaces here if we put faces or something it won't work so they all need to be next to each other okay run the tests and move concatenating strings with plus operator okay we seen this before when we did the operator so we can do we can have a string and then append another string using the plus watch out for spaces concatenation do not add spaces between correct or concatenated strings so you'll need to add them yourself as you can see here my name is Ellen comma and we have no space here but we need a space here build my string from the strings this is the start and this is the end using the plus operator okay let me copy this does it not have to type it all and we want to assign it to my string and we add the plus operator between so we have this is the start and we have a spacing plus this is the end tip says deep-space says that we can do we can remove the space here and add a space like that yeah we can also do this so we can have as many things as we want but instead of doing this is much easier to just add a space before the closing quote here run the test okay oka dating strings with the plus equals operator all right so do you remember that we also did this with numbers you so we can do that the same with strings it's basically the same concept we have our string and we want to add something at the end so we do plus equals which will mean our string equals our string Plus this string okay build my string with two things we have this one we need to declare it like this and we have to do my string cross equals this is the second sentence okay let's see what the what it will console also love my string yeah so we have this is the first sentence and we have the space from here and then this is the second Center good next constructing strings with variables okay sometimes you need to build a string bad lip style by using the content on catenation operator you can invert one or more variables into a string you're building okay perfect so basically what we can do now is we can have variables and we can put them inside our strings by Coquette concatenating it so look at this example we have our name which is free code camp is declared in a variable and then we can say that hello our name is we add it we concatenate it and then we add the rest part of the string which is pretty nice and later if we change this variable to whatever it will be changed in this string also okay let's see what we need to do get my name to Singapore to your name so equal chlorine and set and build my sling with my name between the strings my name is and I am well okay so my name is bass and then we add our variable my name and at the end and I am well like that and now if we check what my stream which STR is you can see my name is flirting and I am well or you let's say I change my name Alex and look at that the string is also changed now my name is Alex this is very useful this is why you're using variables because you want to be able to change it in one place and then will be updated in other places at least this is one case of variables okay look at that 25% depending variables to strings just as we can build a string over multiple lines out of string literals we can also pan variables per string using the possible operator okay oh yeah this is pretty much the same with it before so let's see let's uh magic token into my string objective bull and we can do my stream plus equals objective and now it will will have learning to curl is full okay next find the length of a string all right good we can find the length of a string by saying after our string dot length this will give us the length of the string you Betsy okay if we created we can find all right use the duckling property this is a property that something anytime you see that something is a property later on we'll learn about function but for the function with also also have the parentheses but when we see that length that size that ex that Y those are all properties okey let's see what we need to do use the dot length found the number of characters and assign it to last name length okay we have initially less name like to be zero we have the last name o place and let's see first name length will be less name not length let me also cancel the clog it would currently they forgot to show us how it works okay initially we just set the last name length to be the last name which is low place but we want to get the number of the length so we can just say that length and look at that now we have 8 because it has 8 characters okay next next next use bracket notation to find the first character in a string all right most modern programming languages like JavaScript don't start counting at one like humans do they start at zero this is very important for you to know if you never program before so in programming at least in most modern programming languages we start at zero okay yeah so if for example we have the strength charms and we want to take the first letter we're going to say first name bracket we put the index there and we close the bracket and it will give us see in this case so the bracket intuition we put opening bracket the index of which character we want but keep in mind that we start at zero and then a closing bracket let's let's use it so we can see how it works use the bracket notation to finds the FIR to find the first character in the last so again we have the last name let me also console the clock here or selected of last name you can see now is this string because we just assign it that's linked but if you want the first character we put bracket oops not around it like that we have an opening and closing and inside we put which a character we want if we won the first one we put a zero and look at that we have L if we won the fourth one Betsy the people from the chat what number do we put here if we want the fourth character inside the love Lovelace's thing what number do we put inside the brackets I'm going to check the the what is it the check okay deep space got it right so it will be 3 so the first the fourth letter will be 3 think of it like just subtracting one so if you want the tenth letter or the 908 letter you just subtract one and then you have index 7 because it starts from zero ok well done Ximena well done Mary good oh yeah so you can see the fourth l.o.v.e we get it by using the three alright let's put back zero because this is what they want and go on to the next challenge understand string immutability in javascript string values are immutable which means that they cannot be altered once created for example the following code my string equals Bob and we have here my string of zero so the index zero will be J we cannot change the value of my sing to job because the contents of my string cannot be altered note that this does not mean that my Seng cannot be chained changed just that the individual characters of a string literal cannot be changed the only way to change my string will be to assign it with a new string like this last thing is Bob and then myosin is job so we can't access the individual characters and we can't reassign now correct assignment correct assignment my string so it contains the sing values of hello world using the approach shown in the example above so instead of trying to change the jello word this is my Delaware we by changing the first letter to age we're going to just take this and reassign it to hello world Piper can sign the Rio and we need to assign the entire state not the first character run the tests and this is how we change the jello to hello okay use bracket notation to find the nth character in a string all right you can offset the bracket notation to get the character at other positions yeah we looked at that before let's write a set third letter of last name - equal the third letter of last name variable using bracket notation okay people from the chat tell me again how do we get the third letter in to try looking at the second letter okay so the second letter of the first name we're using we're getting by saying first name brackets one so the third letter we're getting by saying third letter of last name equal last name of two this is how we're getting V here so this is zero one two okay I think this is pretty obvious by now so I'm doing forward the next challenge use back annotation to find the last character in the string okay look at that so now we're using the two things we learned before that length and the bracket notation what happens if you want to get the last character but you don't know I mean you can just count all the letters the characters and then do to the last one get the last one by that you don't want to count all the characters so how you will how you will do it is by using a little mathematics we have the bracket and we get the first induct length of the entire length of the string and then we subtract one because as I said we start from zero not from one and that's how you get the last letter let's see last name that length which is 8 in our case but we want the 17 x oh minus 1 and now lets us on the flog so we can see what happens you can see that we have E but this code also works if we add some more characters here look at that it gets the M if we add the space oops base and pop it will get the P so always it will get the last character next use bracket notation to find the end to last character okay so we can subtract as much as we want to go from right to left instead of going 0 1 2 0 1 2 3 we just go the other way around let's see what we have to do okay second-to-last Oh last name length - do they won the second-to-last right word blanks okay we will now use our knowledge of strings to build a mad lib style word game we're calling world blanks you will create an optional optional humorous fill in the blank style sequence synth anthems okay in a meadow lips game you are provided sentences with some missing words like nouns verbs adjectives and adverbs you then fill in the missing pieces with words of your choice in a way that the completed sentence make sense consider this sentence it was really and we otherwise know and we ourselves that okay this sentence has three missing pieces an objective of verb and an adverb and we can add words of our choice to complete it okay yeah this is nice so we declare four variables a noun an objective of urban and adverb and we have the word blanks we let's see what it has to do a to tutor you will also need to account for spaces yeah so we need to form a sentence using words of our choice along with the words we provided ok so we have a noun dog big Ram pickle okay I guess we can see our plus my noun plus our we can say our objective with nan let's see we can say something like our big dog ran quickly that's what else should we add between have mine so let's just adapt our space my objective our big we also need a face here so let's edit our big dog another two days plus five Plus ace I had work okay and let's consult at blog world Thanks our dog ran quickly yeah it will be nice if we had some other words in between it was really fast hot and we left ourselves silly but now the nice thing with this is that if we change the dog to add it will say our big cat run quickly and then big to small or tiny our tiny cat ran quickly ran slowly slowly yeah but do you understand oh let's head of duct also and a plus okay so keep in mind that we also needed to add eight because we wouldn't have it otherwise you should not change the values assigned to my mouth oh okay so we should not change these all right our big dog ran quickly a 32% perfect good cat yeah multiple values in one variable using javascript arrays boo-ki this is something big now arrays look at that we have the brackets also you start an array declaration with an opening square bracket and it with a closing square bracket and put a comma between each entry like this we have the same peanutbutter comma generally comma Brad modify the new array myarray so that it contains both a string and a number in that order all right so think of the Betsy the array is just a collection of other entries or items you can yeah you need to list of items if you want to store a list of something which are related so let's ease maybe a list of ingredients instead of saying time setting 10 variables to 10 ingredients or ingredient 1 I know Brad ingredient - flour whatever you can just say part ingredients and you can put all these ingredients inside of an array which is nice also in JavaScript the arrays and contain numbers and streams and objects and all of the types so if we have string in the one position is not necessarily that we have string in another one as you can see here they have string and then number you can do that in JavaScript which is good and bad at the same time but yeah that's a topic for another lesson let's see modify the new array myarray set contains both a string and a number of the brain and 70 okay lest one array within another array they go pretty quickly nesting also yeah so obviously we can have molted and then the multi-dimensional arrays you can see here we have an array and then we have um two arrays inside it we can have three arrays and forum array inside an array inside another array it's a it's weird how they went so quickly - Multi multi dimension on the race but yeah you can also nest arrays with another race like this a the nested array called my array okay also the race can have empty values I mean you can have no values that's it will this work yeah access array data with indexes this is pretty much the same as with strings if we want access the first element inside an array we get we get it by saying array of zero because it's also indexed by zero index list we have a joking in the live chat why the programmer quit her job she didn't get her erase erase okay nice one okay let's see okay oh yeah so as I said with the card array and then we can get array 0 which will get the first value is the same thing with it for this for the strings but now we're dealing with the Rings okay create a variable called my data and set it to equal the first value of my array using bracket notation very well my data will be my array zero because we want the first value which is 50 modify array data with indexes all rights amount unlike strings the entries of the array are immutable which means that we can change it so we can say something like my array of zero will be let's see a hundred and nine and now with the console that log my array we can see what it contains let's do it first before signing and then again after signing so you can see that first it's 1864 and 99 what's the what it was declared and then we have one hundred and nine because we assigned the first item ID array it oh we need to put 45 right access multi-dimensional arrays with indexes okay yeah so we can access the multi-dimensional arrays by concatenating here the brackets so we want the first element in the first array and then the first element in the secondary and if we have another rainy side we can do the third one and so on and so forth there shouldn't be any spaces between the rhenium and the square brackets all right keep that in mind using bracket notation select an element from my array such that my data is equal to 8 okay so let's see where is 8 here this is the one 2/3 is the third string third array inside the first array so here we need to put to keep in mind on the third element we subtract 1 because it's 0 in there and we want 7 8 9 so we have the second item so 2 minus 1 is 1 okay good completed manipulate arrays with push yeah so here we have our first method we can put items inside our array by pushing something to it you can see in this example we have array equals to an array and then we want to add another number here at the end so instead of just reassigning the array to be another array with an element an extra element we use the array that push and we give we give it the value we want to put the last spot so push put an item an element at the last part of the array duck pushed up three onto the end of the array okay so we have here multi-dimensional array and we want to push another layer side dog and three let's also cancel the flog my array okay you can see that initially we have an array with two arrays inside then we are pushing another array and we have it here at the end all right manipulate arrays with pop okay look at that my name is useful uhh up returns the value from the end of the array also it removes it uhh let's see the best way to see how it does we can play with it so yeah look at this example first we have three array which has one four and six then we're using three array that pop and we are assigning it to the variable one down which one down is now six and also the race change so we removed the last item from the array let's let's play with here we're also the flog my array and concert log my array after removed from my array will be my array laptop and look at that also keep in mind that that pop doesn't need an index or anything it will just remove the last item from the red my irate that table you can see that initially we have two arrays inside here and then we moved the last one also if we consult that vlog removed from my array you can see its value is now the last item from the bay manipulate array with shift okay chief okay we remove the last one with pop but what if we want to remove the first so we do that by using that shift think of that shape to be the opposite of that pop it removes the first let's see my array that hooks equals to my array that shift okay yeah remove from our array is now Stimson because we use that shape so remove the first one and also it changes the array so it will not only get the first value but it's also going to change the initial array and we have one shift which gets what it does it will push on the first position inside the ring so if shipped removes the first position the first element in that side array and shift will push one and also on shift needs needs a value of what we want to put inside the array let's see on our exercise okay my array we want to unshaved all and oops 35 like that it's too bad they don't have by default console o'clock it will be much easier for us to see what's happening oh let me at it my array and my hurry all right so we have initially my array to be done and dull but then they shift something so they remove John 23 which leaves out with dot three okay so this is the first parcel of and then we have my array sonship so we're pushing Paul and 35 in the first position inside the array shopping list paid a shopping list in a parable my list the list should be a multi-dimensional array containing several sub arrays the first element in each subarray should contain a string with the name of the item the second should be the number representing the quantity all right also a good thing with the race is that we can do them on multiple lines so each it will be much easier for us to be what we are doing okay tell me five products let's see what should we add chocolate bar because we have an example we need 15 but then we need milk and what else and as oh seven and we need animal II was 9 and what else something two oranges we need to okay so now we can see we have a list of M array of arrays the first element of the sub-array is the number and the name of the product and the second one is the quantity keep in mind that we also use the commas where we needed between all the elements of the array and then between all the sub elements of the sub-array okay right usable JavaScript with functions now this is a crucial part in JavaScript functions is a huge topic let's see what they say you okay in JavaScript we can divide but not on in JavaScript in other programming languages as well we can divide our we can divide up our code into reusable parts called functions here's an example function we have the function keyword which is important followed by the function name of your function how do you want to call your function then we have an opening and closing parenthesis and then an opening and closing brackets early brackets and aside the curly brackets we're going to put all the code that we want to run once we call the function so think of the functions like something you might want to use multiple times a block of code which you want to call multiple times okay and then how you're calling the function is by saying the function name and then parentheses again you can see here there is a example we have the function keyword then the name of the function is our reusable function and inside there we want to console of hair world we're calling the function and look at the decided console we have hair world but now the nice part is that if we copy and paste this reusable function five times you can see that it will run five times so it will all these people around this block of code by x and here we can have multiple lines of code let's say we want to say hair in one console and then word in another castle look at that a award hair word hair word five times because we called it five times okay let me quickly change this because we only change the code below this line pay the function called reusable function I'm sorry usable option okay which prints hi world Oh console that love I work okay like that with no explanation for mation point finality and we add the semicolon and after we can call the function usable function like this and look at that we are calling our function hood output hi word to the DEF CON oh I have a comma it shouldn't be there let's see what we're going to learn next week the functions we can pass in parameters okay let's see parameters are variables that act as placeholders for the values that are not to be input function that are to be input to a function when it is called when a function is defined it is typically defined along with one or more parameters actual values of the term that are input or passed into a function what it is called are known as arguments here is a function with two parameters so we have param one and param two and look at that we can console.log them and then later let's take a look at this example function our function with argument we have a and B and then we are console logging in a - B but then when we're calling our function we can say that it should call it with ten and five so now it will do the math ten minus five and we'll get five which is awesome because if we change this to 25 it will do the math for twenty-five minus five and look at that it's 20 or we can say 25 and 17 and it will do the math and it will eight so this is the power of function okay so when we're declaring the function these two are parameters and when we are calling the function the two are called arguments because they are values I don't always know that which is parameter which is argument but yeah this is it I might forget it all so don't worry if you do do okay - - - let's see create a function called function with arcs function function with arcs like dead letter chips two arguments and outputs there some so let's do again a and B now we can do console that log a plus B and underneath here we're going to color function weight args and we're going to pass two numbers that's it seven and ten and look at that inside the console we have seventy if we change this to 73 and forty will have 130 also we can call this with different numbers anytime we call it that's it twenty thirty forty three ok Amica that it does all the calculations so we don't have to write this again we just pass in two numbers and it will be calculated for us Oh let's see 43% submit then go to the next challenge but global scope and functions are in JavaScript scope refers to the visibility of variables variables which are defined outside of a function block have global scope this means they can be seen everywhere in your JavaScript code variables which are used without the VAR keyword are automatically created in the global scope this can create unintended consequences elsewhere in your code or when running a function again you should always declare your variables sweet to the bar okay later we're going to learn about length and constant but as of now we are going to use part hey Rodrigo welcome to the live stream okay so basically global scope think of it like this if you declare a variable outside all of the functions the function will be able to see those variables but if you declare a variable inside the function you can't access it off outside of the function let's see using part declared a global variable my global my global outside of any fraction initialize it with a value of 10 okay so look at that we have my global beat ten now inside the function front one assign five - whoops global without using the VAR keyword oops global will be five okay and look at that because we don't have a bar you weren't inside the function it will be seen outside which is not what we want if we're adding a bar look at that we won't see it outside basically what happens is that the parser will come here and see that it's not declared and it will declare it in the global scope at least that is what I know from my fast in quotes knowledge of JavaScript okay let's go to the next one there's more about functions local scope variables which are declared within a function or local scope okay as well as the function parameters that means that they are only visible within that function it is a function okay we we have this use local scope okay yeah we have bar Lok which is food but we can't see cloak outside it will be not defined okay declare a local variable my part inside my local scope they're my bar which let's set it to 70 look at that inside the function we cancel of my bar and it will say 70 but outside the function if you want to console my VAR it doesn't know what it is so it will be my bar if we say my wire is not defined and it will be a reference error so it doesn't know what it is okay now remove the console of to pass the test okay so we need to remove it because it's an error and we don't want it ok-ran the test global versus local scoping functions it is possible to have both global and local variables with the same name when you do this the local variable takes precedence over the global variable all right so look at this example we have variables some very pair with the values of hat then inside the function my function we have the same variable name and again with a setting it to per value which is fine but inside this function now some var will be head oh it won't care about this comeback which is declared in the global scope but it also it's not an error so you can do this okay that's what we need to do add the local variable to my outfit function to override the value outerwear with sweeter okay so we have outerwear here B shirt but sweeter sweater all right and we want to risk not reassign it we want to create a local variable called outer we're we're yeah and it will be whether I can back a let me add some console that log but we can see what happens here also here a oops all right so you can see that we have it first big t-shirt and then inside the function is sweater and if we console.log outside the function again even after the function is called is still t-shirt so it won't affect it it will only be worthy here all right let's do a couple more and then we're going to take a break written a value from a function we can return okay this is a very important part of the functions you can return something out of the function which you might use later so we can pass in values inside the function with arguments and we can get values outside the function by returning them so you can see here we can create a function + 3 which will take a number it will add 3 to it and it will return it so now if we call the function + 3 and we have the calculations but it will be stored and if we assign it to an answer variable we now have the answer B thirty-third will equal to the return of the mathematical operation all right let's create the function times five function times five that accepts one argument multiplies it by five so we have a number and we return number times five okay see the last line in the editor for an example of how you can test your times five function alright so yeah we can do something like let me remove this here we can declare my num which will be times five and we can pass 17 inside and let's console the clog my num to see its value look at that so we have times 5:17 so it goes inside the function it will multiply by five and it will return it but now we store it inside the mind num variable and then we can console.log it if we don't store it anywhere well it will pretty much do anything here because we just return it but we don't use it so yeah what's the point on doing that okay understanding undefined value returned from a function okay this one is also important to keep in mind if a function does it have early third keyword followed by a value or anything by default all the function even if you don't specify it they will return undefined so you can see here in this example we have the function add 3 we just add 3 to a sum but we don't return anything but if and we put turd anything so if we also log the value of AD 3 look at that it will be undefined even though we if we haven't returned and defined it's still undefined we can just say return some and then it will return the Sun but if we say anything else I mean if we don't say anything it will return undefined all right okay that's better let's do the problem exercise pay the function at five without any argument function add five this function adds 5 to the some variable but its return value is undefined a some blocks equals five so it will add you can see here that we have a global variable sum which is zero and we call this function which changes the global variable so if we do consult that like some here and some again you can see that we call the adverbs be called add three function we add three to the sum we cancel on it and then again we add five and we plug it so it changes the whole value of the sum here this is just some extra information not required for our exercise but the add hope it makes you understand how it works if your recall for from our discussion everything to the right of the equal sign is resolved before the bellies aside this means we can take the return value of a function and assign it to a variable assume we have predefined a function sum which adds the number we can we call sum and returns okay so we did this before we call the function with a number in this case which returned the operation which is then calculated and it will be stored in the variable all the process our action with an argument of seven a process art with seven and the sign needs return value to the variable processed process the process arts all righty stand in line in computer science at Q okay so we are going to the queues now I think this is a good moment to stop for now we have the first part of the basic JavaScript there are let's say we did 53 out of 110 all right okay I'm going to stop now and do the rest of them later today for those of you who are watching live and for those of you who are watching the recording you will be able to find a link in to the description also we'll have a playlist with all of the challenges and all of the projects and everything we did so far in our quest to conquer free code camp all right for those of you who are watching now live if you have any questions regarding what we did so far let me know if not death going then I'm going to up the life swim take a break and I'm going to come back later today and do the second part of this challenge okay deep space you're hungry see you later alright see you later then thanks you all for for joining and thanks for those who are watching the recording I hope this is useful and you can learn JavaScript better if you did give it a like and subscribe if you haven't help me grow this channel so I can create more content for you alright see you later thanks all for joining

Channel: Florin Pop

Views: 8,514

Keywords: freecodecamp, learn programming, programming for beginners, live coding, live, live stream, programming tutorial, freecodecamp curriculum, florin pop, coding, coding for beginners, planning, coding tutorial, javascript, javascript tutorial, basic javascript, javascript for beginners, freecodecamp javascript

Id: ZCZ2u14xsS4

Length: 101min 40sec (6100 seconds)

Published: Tue Feb 25 2020

Reddit Comments

[u/ibadullahk25]

I have watched a lot of tutorials and videos to learn javascript, but I never find any websites where I can find real-life examples and try to solve those problems so I know what is my caliber in Javascript.