JavaScript Syntax & Structure Tutorial
Tags: javascript, beginners, tutorial, writing
Published: 2022-07-07 22:54:36

As with any language, programming languages are defined by sets of rules. The rules (or syntax) are what we follow when we write our code, which form the logical structure of our programs.

This article marks the beginning of a series I’ll be writing on learning the JavaScript fundamentals. Be sure to check back often!

Let’s dive right in with the building blocks of JavaScript. We’ll be looking at values (literals & variables), camel casing, unicode, semi colons, indentation, white spacing, commenting, case sensitivity, keywords, operators and expressions! 

By taking the time to learn the fundamentals, we’ll be well on our way toward building more functional and readable code!

## JavaScript Values
In JavaScript there are two types of values: Fixed values (or **literals**) and Variable values (**variables**).

### Literals
Literals are defined as values that are written in our code, such as numbers, strings, booleans (true or false), as well as object and array literals (don’t worry too much about these just yet). Some examples include:
![Javascript Literals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpp5gv5wxmpd398g0c7w.png)
_Note: I’ll be writing about data types in detail in the next article in this series, stay tuned!_

### Variables
Variables are named values which store data. In JavaScript we declare our variables with the `var`, `let` or `const` keywords, and we assign values with the equal sign `=`.

For example, `key` is defined as a variable. Which is assigned the value `abc123`:
![Javascript Variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2zfopi55jghmh6sbtkh.png)
When to use `var`? Don’t. It really should only be used when working with legacy code. Its the old pre-ES6 syntax.

When to use `let`? Use it if your variable needs to be updated within the program (it can be reassigned).

When to use `const`? Use it if your variable holds a constant value. It must be assigned at the time of declaration and it cannot be reassigned.

## Camel Case
What if our variable name consists of more than one word? For example, how would we declare a variable we wish to name “first name”?

Could we use **hyphens**? e.g. `first-nameNope`, `-`’s are reserved for subtractions in JavaScript.

What about **underscores**? e.g. `first_name` We could, but it has a tendency to make our code look messy and confusing.

The solution? **camel case**! e.g. `firstName`. The first word is lower-case, the first letter of any subsequent words are upper-case. This is the convention within the community.

Note: It’s quite acceptable however, to name your `const` variables in upper-case with underscores e.g. `const DEFAULT_PLAYBACK_SPEED = 1;` This would make it clear to others that the value is fixed. Otherwise just stick with camelCase!

## Unicode
JavaScript uses the unicode character set. Unicode covers just about all of the characters, punctuations, and symbols that there are! Check out the [complete reference](https://unicode-table.com/en/). This is great as we can write our names in any language, and we could even use [emojis](https://emojipedia.org/) as variable names (because why not?).

## Semicolons
JavaScript programs are made up of a number of instructions known as statements. Such as:
![Javascript Statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lw39b48g4en21ki15sp.png)
JavaScript statements often end in a semicolon `;`.

However, **semicolons aren’t always mandatory**! JavaScript does not have any issues if you don’t use them.
![Javascript Statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cteutrst3m54l89ianc.png)
There are however, some situations where they are mandatory. For instance when we use a `for` loop, like so:
![Javascript Statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8amfiwt6i78uzvyje1y.png)
When using a block statement however, semicolons are not to be included after the curly braces, for example:
![Javascript Statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djprgjoeyngin73urwzs.png)
If we’re using an object however, such as:
![Javascript Statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqhcmrcrjodrlaskp551.png)
Then our `;`’s are required!

Over time you’ll start to memorize where semicolons can and can’t be used. Until then it’s wise to use them at the end of all statements (with the exception of block statements!)

Plus it really is a common convention is to use them regardless, it’s considered good practice as its reduces the probability of errors.

_Note: Once you really get going with JavaScript, start using a linter such as [ESLint](https://eslint.org/). It’ll automatically find syntax errors in your code and make life much easier!_

## Indentation
In theory we could write an entire JavaScript program on one line. However this would be just about impossible to read and maintain. Which is why we use lines and indentation. Lets use a conditional statement as an example:
![Javascript Indentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10dbnqcjndfok84l6ug3.png)
Here we can see that any code inside a block is indented. In this case its our comment code `// code to run if true` and then `// code to run if false.` You can choose to indent your lines with either a few spaces (2 or 4 are common) or a tab. It’s entirely your choice, the main thing is to be consistent!

If we are nesting our code, we’d indent further like so:
![Javascript Nesting Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq54er6u38blt9c7q1ik.png)
By applying indentation you’ll have much cleaner, more maintainable and easier to read code!

## White Space
JavaScript only requires one space between keywords, names and identifiers, otherwise any white space is completely ignored. This means that as far as the language is concerned, there is no difference between the following statements:
![Javascript White Space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj8aog0wp1lay26iijlr.png)
I’m sure you’ll find the second line much more readable. And another example:
![Javascript White Space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsyqztatu9ljtvh90190.png)
Again, the second line is much easier to read and debug! So feel free to space out your code in a way that makes sense! For that reason, this is also an acceptable use of white space:
![Javascript White Space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2redl3rqa20xdsuaqcm7.png)

## Commenting
A comment is un-executable code. They’re useful for providing an explanation of some code within a program. And also to ‘comment out’ a section of code to prevent execution — often used when testing an alternative piece of code.

There are two types of comments in JavaScript:
![Javascript Commenting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuekbybc1rykjj4vnil3.png)
The first syntax is a single line comment. The comment goes to the right of the `//`

The second a multi-line comment. The comment goes in between the asterisks `/* here */`

A longer multi-line comment:
![Javascript Commenting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fgmlpd4ynzvkaxhporil.png)

## Identifiers
In JavaScript, the name of a variable, function, or property is known as an identifier. Identifiers may consist of letters, numbers, `$` and `_`. No other symbols are permitted, and they cannot begin with a number.
![Javascript Identifier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyzgfufiznr0h4qlhfxi.png)

## Case Sensitivity
JavaScript is case sensitive! An identifier named `test` is different from `Test`.

The following will throw an error:
![Javascript Case Sensitivity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52fkgnegw2imqpig6jbq.png)
In order to ensure that our code is readable, it’s best to try to vary our names, so no identifiers are found looking too similar.

## Reserved Words
There are a number of words within JavaScript that may not be used as identifiers. Those words are reserved by the language, as they have built-in functionality. Such as:
![Javascript Reserved Words](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq9carzp5nh4lwqenaqy.png)
See the full [list of reserved keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_keywords_as_of_ecmascript_2015).

You certainly don’t need to commit these words to memory! If you get any strange syntax errors pointing to a variable, you can check the list and change the name.

## JavaScript Operators
Arithmetical operators `+ -` `*` and `/` are primarily used when performing calculations within JavaScript, such as:
![Javascript Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmfpo5y5fcq4lr5z1ksl.png)
The assignment operator `=` is used to assign values to our variables:
![Javascript Operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0xaxvclhy7nle0hlsfc.png)

## JavaScript Expressions
An expression is when we combine values, variables and operators to compute a new value (known as a evaluation). Such as:
![Javascript Expressions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53zl80wvhp6irl0q3or3.png)

## Summary
And there we go! This article aimed to provide a general overview of the basic syntax and structure of JavaScript. We’ve looked at many of the common conventions, however, remember you can be somewhat flexible — especially when working in collaborative environments with their own particular standards.

Syntax and structuring both have an important role to play for both the functionality of our programs as well as for code readability and maintainability.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)