(upbeat music)
- JavaScript has some very basic language basics
worth knowing about.
First, write your JavaScript from top to bottom
because that's how the browser will read it.
A good rule of thumb here
is to define all variables and functions and objects
and anything else before you use them
so higher up in the file.
That way, you know the browser has read the object
or the function or whatever it is before you call it.
Otherwise, you might run into problems.
Second, comments, like what you see at the top here,
are used to leave literal comments for yourself
and other humans to explain what's going on.
When you create a comment,
it is ignored entirely by the browser.
So it's purely there for us humans.
In my code editor right now with the color settings,
you can see comments are colored green.
They'll always have a different color from other code.
And it's always consistent in the way you see here.
To leave a single line comment in JavaScript,
you use two forward slashes
and then just the string of texts that is the comment.
You can do that on its own line
and you can also do it inside another line of code.
So here we have a declaration for let
and then we have a comment directly afterwards.
Just remember, everything behind the two forward slashes
will always be the comments.
If you need multi-line comments, you use CSS, comment syntax
so forward slash asterisk to start the multi-line,
and asterisk forward slash to end.
Then you can add as many lines
of text as you want in between these two markers.
If you are using a code editor like VS code,
there's also a shorthand for a more verbose type of comment.
Down here I have a function called updates backpack,
and if I enter forward slash
and then two asterisks and then hit return,
VS code will create a verbose common for me
and even capture that this function
has a parameter called update.
It'll then ask me what type of data is in updates.
I'll say string, and then I can fill in this comment.
And here you see the purpose of a comment.
Now, when I come back to the code, I'll see,
oh, there's a function here.
It's called update backpack.
It outputs HTML.
And it has a single parameter.
It's a string.
And it's called update.
Comments are also often used to quickly
activate or deactivate single
or multiple lines of code for debugging purposes.
This is done by placing your cursor on the line or lines
you want to comment out,
and then hitting control or command forward slash.
So if I hit control forward slash,
I comment out this line of code.
If I do it again, so control or command
forward slash I uncomment this line.
If I want multiple lines,
I just highlight the lines and again,
control or command forward slash to comment them out,
control or command forward slash to take the comment away.
It's a very quick and easy way of doing debugging.
Third, spacing, or white space.
In JavaScript,
spacing is purely for the human user.
That means the browser does not care about spacing at all.
You can write all your JavaScript in a single line
and the browser will still understand, but humans will not.
So it's better to use spacing properly.
The best practice is to use indentation
to visualize hierarchy.
You can see that down here,
we have a constant called backpack
and then inside we've indented all the pieces that go inside
and there's some further indentation
to show what the hierarchy is.
Now, you may have heard a joke or two
about tabs versus spaces.
This indentation is what those jokes refer to.
You see at the top here,
this indentation currently is two spaces.
Now that joke used to make sense
because you had to add either tabs
or spaces manually to do an annotation.
But today this is all handled automatically by the editor.
So if you see down here, it says, tab size four.
So that means if I hit return here and then hit tab,
here we have a single tab and it's four spaces wide.
If I want to change that, I'll go into my code editor
and say, I want to indent using spaces.
And then say how wide I want the indentation to be, two.
And then, you see the indentation I created
is automatically changed.
So that way, no matter what the indentation is
for a document, you can always just convert it
using the code editor.
And there's more, if you're using a tool like Prettier,
this will be sorted out for you.
So you don't even have to think about it.
Fourth, semi-colons.
You will notice that I add semi-colons
to the end of all my declarations.
And you'll also notice that Prettier
will enforce this standard.
Now, some developers will add semi-colons
to the end of declarations,
others will not.
Again, JavaScript does not care either way.
This is a coding and syntax preference for us humans.
In some coding standards, you are required to add coding,
ah, the semi-colons,
in others, you are required to not add them.
The good news is, ESLint and Prettier
will sort this out for you.
So if you go look at code examples and you see either using
or not using semi-colons,
know that this is just a preference.
If anyone ever tells you it's wrong to do one or the other
that's simply not true.
This is purely editor preference.
So, and the tools we use will automatically sort it
out for you.
Finally, quotation marks.
You'll notice in my code I use double quotes
for all strings.
This again is developer preference.
Some developers like to use double quotes,
some like to use single quotes,
and different coding standards
will enforce different styles.
So in some coding standards, single quotes will be enforced
and applied using ESLint and Prettier.
In others, you'll have double quotes
and the same thing will happen.
So just be consistent in what you're doing
and the tools will figure out the rest for you.
The rule of thumb to all of this is:
Number one, be consistent.
And number two,
use tools like ESLint and Prettier
to automate this consistency.
(upbeat music)
(upbeat music continues and then fades)