Learning Code to create applications with AI - 192 LinkedIn Live - Joe Apfelbaum

20 to 30 lines of code.

Yeah.

Right.

Yeah.

You don't have to write that for every button. Right. If I have to—

Right. So that's, it's almost like having a header and a footer for a website and a navigation that just stays the whole time. You wanna be able to call it every time right now. I totally get that. So my question is, when do you use a let and when do you use a const? When you need it to change, you use a let, and when you need it to be consistent, constant, you use a const.

Right? Exactly, exactly. Uh, let and const both are used to create, uh, variables.

Okay.

But let in this case will be a variable whose value might be dynamic, such as if I am creating a counter, uh, and every time the value of the counter changes every time I click the button, right?

Yeah.

This means that value of the variable called let is going to change every time, right? Is equal to 1. Yeah. But const, if I do const counter 1, I cannot be like, right? Yeah. I cannot be like counter is equal to 2. This is going to throw an error, right? It's going to be like you cannot change a value. Now, why is there limitation on let and on const? Like, why, why we would have to use const in the first place, right? Why do we have to add a limitation? Well, there are 2 reasons for this. The first thing is that some of the values don't actually change, such as a username would never change on a website because it's a unique identifier, right? Or if you want to represent the color orange, the hexadecimal for the color orange would never change, right?

Right.

predefined value.

Or if you don't want it to change for security reasons, you want to set something and not have it change, use const.

Yeah, you can do that as well. Now, also, like, this exact hexadecimal represents color white, right?

Right.

Is it ever going to change? No. So, why do you mean we have to, like, use it let, right? We have to just be— we can also be like const. So in future, if a developer goes like, maybe I want to change the value of white to this, which is actually black, not white, right? The code is going to be like, why are you changing a value of a constant? Like white, the value of white is never going to be from— it's never going to get changed from this. to this, it's going to throw an error like, why do you even have to do this? So like, like this we can save ourselves from making mistakes.

So let's—

so, so let's do that.

When would you put async before the word function?

Okay, great. Now this concept is a bit complex, but I'm going to make it very simple. The one thing that I told you, uh, when, uh, we were working with the script HTML is that Whenever you're running a set of code, it executes line by line.

Correct.

From top to bottom, right? Now the question about async, if I go into the engineering of this, it's a very complex concept. But async simply means is that the code is executing line by line, right? But there are some times when a specific piece of code might take a bit of time to finish. Such as when I click a button and try to upload my username.

Right.

Client to server.

Or a file. You want to upload an image.

Upload an image, right? We can never know in advance how long uploading this file is going to take us to upload this file from our frontend to our database or from our backend to our database. So async basically tells is that this specific set of code is not asynchronous, but I want to make it asynchronous. So let's say if I want to fetch some details from an external API.

Yeah.

Let's call this response. I can be like fetch And example API could be like, uh, https://localhost:3000 or whatever that is, right? So let's call it— could be an example API like this, and this could be localhost. Now this points to, uh, HTTP. See, we are on the internet, you're reaching out to a server And on the server, we are saying that there is a folder called new. And in that folder, we have a file called HTML.

Yeah.

Now, we never know how long it's going to take us to fetch that file from that remote server, right? What we do is that the thing that we want to do is that we know that when the HTML file loads, it's going to put its response into this And I want to console.log that response. Right?

Mm-hmm.

Now what happens is that fetch is not a synchronous call. It's going to take a lot of time. So JavaScript is not going to wait here. Right? It's going to come here. It's going to see, okay, I have to fetch a file from a remote server. Okay. I'll do that in background. Let's move on with the next step. And in the next step, it's trying to console.log the response. But response is undefined because we haven't actually fetched the file yet.

Right.

Going to take 5 seconds. So I'm going to be okay. You know what? I'm going to add async here in the start of the function. And I'm going to be here like await. This means that when you get here on this line of code, I know this is going to take 5 seconds or 10 seconds or 15 seconds. But I want the compiler to await here. You're not going to execute anything that's after this.

Until that gets loaded.

Yeah, once you— once the response is loaded, and you save into a variable, and then you're going to move here. Because I know, before you get the response and move to the next line, it's going to throw an error because response is going to be undefined.

Got it.

It's not still— so I'm going to be like await here.

So whenever you need to use await, you got to use async function in order for await to work.

Exactly. Await cannot be top level. It always has to be in a body of a function. And the function has to be called async.

Okay. What does async stand for?

Asynchronous.

Okay. It's like Ajax, asynchronous JavaScript in XML.

Mm-hmm.

Okay. So, The concept of, of like cases, can you just quickly explain, um, the runtime listeners and then try, switch, case, case, try, break? Can you explain that?

Okay, yeah, I can do that. You know what, for that, let's create a very simple calculator. you're going to understand the switch case very easily. So how do you— let's say I want to create a calculator that asks the user for 2 operands, right? The operand 1 can be 2 and the operand 2 can be 4. And then I'm going to ask the users, do you want to add them? Do you want to negate them? Do you want to divide them? Whatever you want to do, like, that's up to the user.

Okay.

I'm going to be like const operand1, prompt. So, I'm going to prompt the user to— and I'm going to say enter operand 1.

Okay.

Right?

Okay.

So, whatever the user enters is going to be saved in this variable. And for now, just for the sake of this—

So, the prompt is going to be a little box that pops up like an alert box that tells you put in the amount.

Yeah. And whatever the value that put— you put into this prompt.

Why did you put in a plus prompt?

A plus prompt is that any value that is taken from a prompt is actually a string. And I want to convert that into a number.

Now these are data types. What is plus? Oh, plus says turn it into a number.

Yeah. Plus, like, if ever the value that we get from prompt would be this. string. It's going to convert this into just a simple number.

Got it.

So in future, you can like add mathematical operations onto this.

Got it. Like in my database, I have— in my database, I have stored dates, but the dates are not numbers. They're numbers, but they're not really numbers. So I can't really sort and filter them.

Exactly. Exactly.

Got it.

So let's ask the user for a number. It's going to be like, okay, whenever this page loads, this line of code is going to get executed. It's going to open up a prompt. I'm going to be like 23. And when I do okay, and then it's going to run afterwards. So, it's blocking here. I'm gonna do okay. In the console, I get 23.

But you didn't tell it to await, right? You just—

Yeah.

So, how does it know to wait?

Uh, this is not, uh, this is not a promise. So, There are few things. For prompt, the compiler is just going to await by default. This is not a promise. So promises is another concept in JavaScript, but just understand that fetching a remote value from a remote server, the browser is not going to await for this. The compiler is just going to move on to the next line. But for prompt, alert, and stuff like that, it's just going to await by default. You can understand it like that. So moving on to switches, right? I got the first operand and I'm going to be like const operand2 because I want to know like what is the other operand that you want to work on. So I'm going to be like enter second operand, right? And here I'm going to also be like, enter first operand. And again, when the user enters this, I'm going to save this and I'm going to console both of them together. Maybe like operand 2, operand 2. And the first operand the user enters is 23. And the second is 34. Both of them are consoled. Now here comes the switch, right? I'm going to ask one more thing from the user, right? Const operator. I'm going to be like prompt, uh, please select an operator, and the operator could be plus It could be minus, it could be divide, or it could be multiply. And I'm going to use this console.log, this operator as well, to see what we are getting as a value, right? So if I go like, uh, enter first operand 23, you can enter second operand 34, uh, enter operator. I'm going to be like plus. I'm going to do enter. It's also consoled. So these are 3 set of values that we got from the user. Now there comes a situation, right? This means that the user wants to plus these 2 operands because he's giving us a plus. If he would have given us a minus, we would think like user wants to, uh, uh, negate these values, right? So We have to conditionally run a set of code. So I can be like switch and operator, right? And this switch is going to, uh, I don't actually remember the switch case syntax. Uh, please write switch case syntax JavaScript. Yeah, this is how you write it. So I'm going to be like operator here, right? And now what happens is that when we do this, it's going to conditionally run a set of code. So if the value of operator is plus, I want to run whatever is in here between this case and this break. If the value of the operator is minus, I want to run whatever is in this case and break. And default basically means that if the value of the operator is not even a plus, not even a minus, what do you do? You just run this anyways. So that's what it is. So we have 4 cases here, right? We have, uh, we have a plus, we have a minus, We have a divide and we have a multiply. So I just want to console to the user operator operand 1 plus operand 2 if the value of operator is plus. And this goes same for this, uh, I'm going to minus the operands and console the value. I'm going to divide the operands and console the value. I'm going to multiply the operands and console the value. If none of this happens, I'm going to console to the user, please enter a, a valid operator. Does this make sense, Joe?

Yeah.

So based on the value of the operator we are going to conditionally run a specific set of code. So if the value of the operator is plus, whatever is between this case and this break is going to run. If it's minus, this is going to happen. If this divide, this and this. So we are conditionally running a set of code, and then it doesn't have to be one line, like it can be thousands of hundreds of lines, but whatever is between this break in case It's going to run. So if I go here and go to my practice, I can be like 2 and the second operand would be 4. And if I be like, uh, please enter operator, if I enter plus here, right, it's going to store the value to this operator. And if the value of the operator is equal to plus, this is going to run. If I be like, uh, okay, let's see what happened. Plus, see, it console.log 6. So 2+ 4 is 6. And how did that happen? Because I was consoling operand1 and operand2 and I was adding them. Similarly, if I be like 4, 2, and I wanna negate them If I do okay, this time this is not going to execute. This time this is going to execute, and the answer would be two. So switch case is basically about running a specific set of code based on a condition. So we are conditionally running a specific set of code, right? So our real use case, a very good simple example of this would be if a user clicks a button. that says create an account, I'm going to run a specific set of code that's here. If the user clicks a button that says delete my account, I'm going to run a code— specific set of code that deletes the user's account, which is going to be between this case and break.

Understood.

And just closing with that, if-else is basically switch cases again. So this, all of this could have been like, uh, if operator is equal to equal to plus run whatever is in this parenthesis, else if operator— now this is very close to English— is equal to equal to minus, run this, whatever is in here. And we can again be like else if. It's up to you how long you want to chain this, right? Operator is equal to, uh, divide, whatever is here, you have to run this else if. And yeah, that's how it goes. And switch case and, uh, else if are very similar to like this. So if the operator is Equal to equal to multiply, run whatever is here, right? So switch and if-else are very similar like this. So if you want to see them side by side, this is how it looks. You can, you can either write a switch case to conditionally run a set of code, or you can write an if-else to conditionally run a set of code. Based on a condition.

What would be the difference between the switch case and the if case?

Well, the difference between a switch case and an if case is mostly about your preference.

Mm-hmm. There's no other difference other than the preference of what words to use?

I'm not exactly sure if there's a technical difference between them. But as far as I know, I think there's just a preference difference. And similarly, if you want to add a default to here, you can be like else, it's going to run anyways, no matter whatever the condition is. But it's all about, I think, preference. But let's ask this ChatGPT, uh, what's the difference Between if-else and switch, is it all about preference?

I love that you're bringing that up. Yeah.

So what Chetjiviri says is that programming lies in the use cases, readability, and performance.

Oh, wow.

While both are used for conditional execution, they have distinct characteristics that make, uh, that they make one or more suitable than other. Used when you have a range of conditions to evaluate. Used when you have need to compare a single variable. Okay, yeah, that makes sense.

Okay, so else is when you compare a single variable and then switch is when you compare multiple variables.

So one use case that could be different between switch and else if is that here we're just comparing operator and this value, or operator and this value. But here we can be like run if, if the operator is equal to plus, or run else if, if the operator—

There's no else switch.

Not equal to minus. Right? So this is going to run. So the condition is this condition and this condition can be completely different from each other. And I can be like, run this if name is equal to Navid.

Right.

So if the variable— if the—

I don't understand. So one thing I still don't— I didn't get the aha moment of the if-else is It says if operator is equal to plus, then what will happen?

If, if the value of operator is equal to plus, then what will happen? Whatever is between this open bracket and this closing bracket is going to execute. So if I write this set of code, this is going to execute. None of this. So when the, when the program executes from top line to bottom line, right, from top to bottom, as it does, it's going to come here and it's going to be like, okay, is it, is the operator equal to plus? It's going to see, yeah, it's going to execute this. It's going to ignore all of this. It's just going to move on with the rest of the code.

And what happens if you don't have an else at the end of if? What happens if it's none of them? Will it throw an error?

No, it just continues. If it's none of them, none of the condition is going to execute. It's just going to continue with the code.

Okay, got it.

So that's, that's the just main difference between switch and if-else is all about running code conditionally based on specific conditions. I think that like covers 40% of your JavaScript.

Okay. Well, not exactly, but the JavaScript that you're writing, like, do you ever do while? Do you ever use while?

While? Yeah, I do while. What is while? Looping, right? That's called looping. So while is, let's say, let's say if I be like Let's create a variable called let counter is equal to 1.

Yeah.

And I'm going to be like while, and again while is very similar to if, whatever is between here is going to execute if the condition here is true. So the condition here could be true. I'm going to be like if counter is less than 10. console.log whatever is here. And I'm going to just console.log the value of counter again.

How do you make it loop over and over and over to check?

It loops itself.

Oh, so it just keeps running over and over and over. How do you end the— how do you end the loop?

Yeah, if I see I have not saved the file here. If I save the file here, What is going to happen is that the program is going to come here, it's going to see, okay, is counter less than 10? And the actual value of counter is 1. So yeah, it's less than 10. It's going to execute this. It's going to come again to line number 5 and see, is counter less than 10? Yeah, it's less than 10. So it's going to go into an infinite loop. So to end this, we have to create a condition where this condition would be incorrect. And once this is falsy, it's just going to execute with the rest of the code. So how can I do that? Every time this code is executed, I'm going to be like counter is equal to whatever the value of counter is plus 1. So initially when the counter happens, this runs one time. It is going to log the value of the counter and increment the value of this by 1. It's going to go from 1, from 2, and this is going to happen for from 2 to 3, 4, 5, 6, 7, and each time up to 9, this condition is going to be true. But once this value is equal to 10, which happens every time this thing runs, right, we increment this, we are going to reassign a value to counter, which is whatever the value of counter is plus 1. So once it's equal to 10, it's going to be like, is counter actually less than 10? It's no, it's not actually less than 10, it's actually equal to 10, right? So it's not going to log the value after 9. If I go here and go to practice and yeah, refresh, uh, did it— did this actually execute? Um, let's see. Counter is equal to 10.

Do you ever do an await under the while?

Under the while, no. We don't do await.

What about an if under the while?

If under the while. So, you want to do like—

While, and then it keeps checking, checking, checking. And then you do an if under the while in the same thing. Does that make sense or not really?

Yeah, but the if is not going to break us out of the body.

Oh, it's not going to break the body of the while.

Yeah, because even if this if is false, it's just not going to execute whatever is the body in the if, right? Okay. But the counter every time is going to While is going to re-execute, if is going to be false. Next time it re-executes, if is going to be false, but it's not going to break us out of the body. To break us out of the while, this needs to be false.

Got it. So you have to do some type of logic that makes it false in order to break it out.

Yeah. Yeah. So see, initially the value of counter was 1. What I did was that I know this is going to execute one time. Because obviously the counter is 1 and it's less than 10. It's going to log the value 1 and it's going to increment this.

Got it.

So it's going to— next time when it—

Do you ever use something called catch?

Yeah, we use catch.

Joe, we're running onto your next meeting. Okay. Well, we got to hop. We'll review this next time. I'm going to do a little bit of reading up on this and kind of play with this a little bit more. But I wanna review that extension, um, and really understand the different functions in the extension so I could understand the whiles, the ifs, the switch, the await, the function, the return, the try. Okay.

No.

These are objects.

So how do you—

all these things are called objects?

No, these are not called objects.

The if is called a what? What's that, a property?

If it's called if, it's a condi— it's just called if.

But if is purple and a function is blue. And so like if and return are both purple and continue is purple and await is purple. Why?

That's just syntax highlighting. So you can even write your code in a Notepad. Oh, like you can come here.

But it highlights it in purple because it's a certain type of code. Because catch and try and for and if and break are the same type of code, right?

The color doesn't actually matter, right? I can write the code here.

No, no, I understand that. But I'm just saying like the IDE is making it a certain color because it's, it's the same thing. No?

Mm-hmm. So the IDE is just trying, trying to make, uh, make sense out of this stuff for us to understand just by using colors.

Awesome. Well, I appreciate you. Thank you very much for being on here with me. Thank you for your support, and we'll schedule another session together.

Okay, so, uh,