Clean Code - Variables - Beau teaches JavaScript

Using Meaningful and Pronounceable Variable Names

The first thing to do when it comes to making your variables more readable, reusable, and refactored is to use meaningful and pronounceable variable names. As seen in the example, using variable names like `y y y y MMS DST` can be confusing and hard to understand. Instead, we should use variable names that are descriptive and easy to pronounce, such as `year month day`. This makes it easier for other developers to understand the code and also reduces the chances of errors.

Using ES6 Constants When Variable Values Do Not Change

Another important aspect of writing clean and readable code is using ES6 constants when variable values do not change. In the example, we have a variable named `first US president` which always has the value `George Washington`. Using ES6 constants in this case would make the code more concise and easier to read. Instead of having `VAR first US president = George Washington`, we can use `const firstUSPresident = "George Washington"`. This makes it clear that the value will not change, and also reduces the chances of errors.

Using the Same Vocabulary for the Same Type of Variable

When it comes to writing clean and readable code, it's also important to use the same vocabulary for the same type of variable. For example, when we have functions or variables like `get user info`, `get client data`, and `get customer record`, it can be confusing to keep using different words. Instead, we should use the same word consistently throughout the codebase. In this case, we can just use `get user` in every part of the program.

Searchable Names

When writing code, it's also important to consider the readability aspect from a search perspective. When we see an unfamiliar variable name, it's not clear what value that variable represents. To make our code more readable and searchable, we should put meaningful values next to our variables as shown in this example:

`VAR i = 525600`

By putting `i` next to `525600`, we can clearly understand the significance of the value.

Using Searchable Names

Another benefit of using searchable names is that we don't have to remember what some values represent. We should make sure to put our variables in a way where they are easy to search and understand for other developers who might be reading or maintaining our codebase. So, putting the variable name `year month day` next to `VAR y y y y MMS DST` would make it easier for others to find that information.

Explanatory Variables

When we have complex logic in our code that is hard to understand at first glance, using explanatory variables can help clarify things. For example, if we see this variable:

`const city state reject match citystate reject`

It's clear what each part of the variable represents. However, it would be more readable and easier to understand if we had an explanatory variable like `VAR cityStateMatch`. This makes our code easier for other developers to read and understand.

Avoiding Unneeded Context

When writing code, there are times when we might add context that is not necessary to our variables or functions. For example:

`var car make Honda car car model Accord car color blue`

Here, we have repeated `car`. It's clear what `car` means, so adding another instance of `car` doesn't provide any additional information. When it does, however, like in the case where we are trying to paint a car, we should call it by its name for clarity and readability.

The Benefits of Short Circuiting

Short circuiting is another technique that can make our code more readable and efficient. By comparing `i` with `525600`, we see that we have added unnecessary repetition in the loop. Instead of `for (VAR i = 0; i < 525600; i++)`, we could use short circuiting to get around this. The function would check if `i` is less than `525600`, and only then execute the rest of the code.

Here's an example:

```

function createMicroBrewery(name) {

var breweryName = name;

var breweryType;

if (name) {

breweryName = name;

} else {

breweryName = "hipster Brew Company";

}

return { breweryName, breweryType };

}

```

Short circuiting is a cleaner alternative to using long conditionals or nested if statements.

"WEBVTTKind: captionsLanguage: enclean code in JavaScript variables I'm going to be sharing some guidelines to make sure your variables are readable reusable and refactor the first thing is to use meaningful and pronounceable variable names you can see in this example VAR y y y y MMS DST equals moment. format so and so on instead of calling it y y y y mm sdtr just call it year month day so this variable is a lot more meaningful and you can easily pronounce it uh the next thing is use es6 constants when variable values do not change we have VAR first US president equals George Washington instead of using VAR you should use const because the first US president is always going to be George Washington the next thing is use the same vocabulary for the same type of variable if you have um three different functions or variables we have get user info get client data get customer record let's say these are in different parts of your program well it it's all basically the same thing a client can be considered a user a customer can be considered a user you should call these the same thing in each part of your program so we're just going to get rid of those two and we're going to make this just get user get user you don't have to say um get info data well we know it's going to be data so just call them get user in every part of your program so it's easier to remember what you Ed the next thing I want to talk to you about is use searchable names so if you look at this function or this for Loop for VAR I equal z i is less than um 525,600 so what is this number here what does that number mean it's actually better to put it right in your program what what that number means the truth is we will read more code than we will ever write so it is important that the code we do write is readable and searchable so we're going to declare what this variable means um in a capitalized VAR Global so we're going to put and then we can just change this to now it's a lot more obvious what what that's supposed to be in the program and as an added benefit of it being more readable it's also more searchable if you want to search for that number in the program if you can just search for the name of the variable next thing I want to talk about is to use explanatory variables so if you see this const city state reject and then this whole um reject thing and then save city state City citystate reject. match citystate reject and you just look at all this whole thing so there's a way to make this a little more readable because so what is this thing right here and what is this thing what if we could just make this into a variable let's just work backwards I want this to be City and I want this this to be State now we have to go and fill these in so we're going to do so you can see uh it's doing the same thing except it's just breaking it down a little more so it's more obvious what's happening first we're trying to find the the match and then we break it apart into city and state and then when we call the function it's more obvious what we're passing into the function okay next up is don't add unneeded context so if we look at this whole thing um varar equals car make Honda car car model Accord car color blue and we call the function function paint car car car. car color equals red so look at this part right here car docar color so we have a repetition we have car and we have car again right here car color so when you are um storing the car make don't call it car make just call it make because we already have car right here and then for model just call it model car color just call it color and then down here you can just call car. color and then you won't have to repeat yourself just unneeded context let's go down a little bit more um the last one I'm going to talk about is short circuiting is cleaner than conditionals so let's look at the bad example first the function create micro Brewery name our Brewery name if name then Brewery name equals name else Brewery name equals hipster Brew Company there's a way to make this a lot quicker if we can just take this whole thing out and make this into a conditional and that's it so this whole thing was this this conditional here was the same as that whole thing before so it's a lot cleaner it does the exact same thing and it's easier to read it's easier to understand understand well thanks for watching my name is Bo KS if you check the description you can see a link to what inspired this video don't forget to subscribe and remember use your code for goodclean code in JavaScript variables I'm going to be sharing some guidelines to make sure your variables are readable reusable and refactor the first thing is to use meaningful and pronounceable variable names you can see in this example VAR y y y y MMS DST equals moment. format so and so on instead of calling it y y y y mm sdtr just call it year month day so this variable is a lot more meaningful and you can easily pronounce it uh the next thing is use es6 constants when variable values do not change we have VAR first US president equals George Washington instead of using VAR you should use const because the first US president is always going to be George Washington the next thing is use the same vocabulary for the same type of variable if you have um three different functions or variables we have get user info get client data get customer record let's say these are in different parts of your program well it it's all basically the same thing a client can be considered a user a customer can be considered a user you should call these the same thing in each part of your program so we're just going to get rid of those two and we're going to make this just get user get user you don't have to say um get info data well we know it's going to be data so just call them get user in every part of your program so it's easier to remember what you Ed the next thing I want to talk to you about is use searchable names so if you look at this function or this for Loop for VAR I equal z i is less than um 525,600 so what is this number here what does that number mean it's actually better to put it right in your program what what that number means the truth is we will read more code than we will ever write so it is important that the code we do write is readable and searchable so we're going to declare what this variable means um in a capitalized VAR Global so we're going to put and then we can just change this to now it's a lot more obvious what what that's supposed to be in the program and as an added benefit of it being more readable it's also more searchable if you want to search for that number in the program if you can just search for the name of the variable next thing I want to talk about is to use explanatory variables so if you see this const city state reject and then this whole um reject thing and then save city state City citystate reject. match citystate reject and you just look at all this whole thing so there's a way to make this a little more readable because so what is this thing right here and what is this thing what if we could just make this into a variable let's just work backwards I want this to be City and I want this this to be State now we have to go and fill these in so we're going to do so you can see uh it's doing the same thing except it's just breaking it down a little more so it's more obvious what's happening first we're trying to find the the match and then we break it apart into city and state and then when we call the function it's more obvious what we're passing into the function okay next up is don't add unneeded context so if we look at this whole thing um varar equals car make Honda car car model Accord car color blue and we call the function function paint car car car. car color equals red so look at this part right here car docar color so we have a repetition we have car and we have car again right here car color so when you are um storing the car make don't call it car make just call it make because we already have car right here and then for model just call it model car color just call it color and then down here you can just call car. color and then you won't have to repeat yourself just unneeded context let's go down a little bit more um the last one I'm going to talk about is short circuiting is cleaner than conditionals so let's look at the bad example first the function create micro Brewery name our Brewery name if name then Brewery name equals name else Brewery name equals hipster Brew Company there's a way to make this a lot quicker if we can just take this whole thing out and make this into a conditional and that's it so this whole thing was this this conditional here was the same as that whole thing before so it's a lot cleaner it does the exact same thing and it's easier to read it's easier to understand understand well thanks for watching my name is Bo KS if you check the description you can see a link to what inspired this video don't forget to subscribe and remember use your code for good\n"