JavaScript (Lexical Structure)
Tags: javascript, coding, programming, codenewbie
Published: 2021-08-02 12:52:08


{% user cleancodestudio %}

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 


>
> Did you know I have a newsletter? 📬
>
> If you want to get notified when I publish new blog posts or
> make major project announcements, head over to 
> https://cleancodestudio.paperform.co/
>

---

**The Lexical Structure of a software language:**

> _"Specifies a set of basic rules defining how code should or could be written"_


As one of the world's most misunderstood programming language as well as a software language with some weird oddities, there are many questions that come up about what is best practice when it comes to writing JavaScript. In this blog we're going to dive into the **Lexical structure** of JavaScript. Lexical Structure simply specifies a set of basic rules defining how code should be written in a given language.

---

### Unicode

---

JavaScript is written in Unicode. What's this mean? Well, one of the cool, lesser used, and generally considered a poor or bad practice is that we can actually use emojis as variable names. We can use emojis as variable names because JavaScript is written in Unicode.  More importantly, you can write identifiers in any language, for example, Japanese or Chinese, with some rules.

---

### Optional Semicolon

---

In JavaScript (and most other languages) the semicolon is used to separate one given statement from another. What's weird about JavaScript is that this semi-colon is optional. Personally, I opt out of using the semi-colon and just write my statements on two separate lines. Any two statements that are written on the same line will always need to utilize a semi-colon to separate them - but this in itself is considered bad practice. 


---

### Whitespaces and Line Breaks

---

In JavaScript, white space is **NOT** considered as anything meaningful. Spaces and line breaks can be added as you see fit.

For example

```js

axios.get(endpoint)
.then(response => console.log(response))
.catch(errors => console.error(errors))

```

can also be written as 

```js

axios

.get(endpoint)
.then(response => console.log(response))
.catch(errors => console.error(errors))

```

or as 

```js
axios

.get
(endpoint)

.then
(response => console.log(response))

.catch
(errors => console.error(errors))
```


JavaScript doesn't care about the white space. Personally, I'll go about the former statement using the following syntax.

```js
axios.get(endpoint)
     .then(response => console.log(response))
     .catch(errors => console.error(errors))
```

In the real world, you'll definitely want to keep a well-defined style and adhere to that commonly used style. You can and in larger project should enforce this style using a linter or a styling tool like _Prettier_.

---

### Case Sensitive

---

JavaScript is case sensitive. What's this mean for a software language? If you have two variables spelling the same word and one is capitalized while the other is not - then these are considered two different variables.

```js
let helloWorld = 'example'
let HelloWorld = 'heyooo'
```

`HelloWorld` and `helloWorld` are two different variables because JS is case sensitive.

Keywords, variables, function names, and other identifiers must always be typed with a consistent capitalization of letters to be or mean the same thing.


---

### Comments

---

Good old comments. In JavaScript we have two types of comments we can utilize or call upon to add notes that are functionally meaningful within our code.

**Single Line Comments**
```js
// this is a single line comment
```

**Multiple Line Comments**
```js
/*
  This is a multiple line
  comment that we can
  use to write a lot 
  of stuff when
  we need to.
*/
```

---

### Literals and Identifiers

---

**Literals** are defined as a value that is written within the source code. 

For example, a string, a number, a Boolean, an object literal, or an array literal are all literals.

```js

10 // a number literal
true // a Boolean literal
'hey' // a string literal
[1, 2] // an array literal
{ name: 'sarah' } // an object literal
 ```

An **identifier** is simply a sequence of characters used to identify a variable, function, or an object. An **identifier** can start with a letter, dollar sign ($), underscore (_), and may also contain digits. Using unicode, a letter can be considered any allowed char - thus we can also use an emoji. Another way to understand what an **identifier** means is to simply ask yourself what allowed variables names can I use in this language.

```js
Name
name
NAME
_name
$name
😄
```

Are all allowed variable names - aka allowed identifiers within JavaScript. 

---

### Reserved Words

---

Most (if not every) software language has a list of **reserved words**. These **reserved words** do special things that allow the software language to work properly. In JavaScript we have a list of **Reserved Words** that are not allowed to be used as identifiers due to the language saving these words to implement special functionality. 

Some **Reserved Words** in JavaScript include:
- abstract
- arguments
- boolean
- break
- byte
- case
- catch
- char
- class
- const
- continue
- debugger
- default
- delete
- do
- double
- else
- enum
- eval
- export
- float
- extends
- false
- function
- final
- goto
- if
- finally
- float
- implements
- yield
- import
- in 
- instanceof
- int
- interface
- let
- package
- private
- lang
- native
- new
- null
- protected
- public
- return
- short
- static
- super
- switch
- synchronized
- this
- throw
- throws
- transient
- true
- try
- typeof
- var
 -void
- volatile
- while
- with

Note, that not all reserved words do something within JavaScript currently. Many of these reserved words are simply marked as unusable by the language so that future versions of JavaScript where these reserved words add behavior to JavaScript won't cause legacy applications of JavaScript programs to break or need to be changed because they used the keywords that now do something as identifiers before these keywords were able to do anything within JS.

---

[Clean Code](https://cleancode.studio/clean-code)
[Clean Code Studio](https://cleancode.studio)
[Refactoring Code](https://cleancode.studio/refactoring)
[Computer Science Algorithms](https://cleancode.studio/algorithms)
[Data Structures - JavaScript](https://cleancode.studio/data-structures)
[Design Principles](https://cleancode.studio/design-principles)

---

{% user cleancodestudio %}

>
> Did you know I have a newsletter? 📬
>
> If you want to get notified when I publish new blog posts or
> make major project announcements, head over to 
>

{% codepen https://codepen.io/zhorton34/pen/BaRPYdB %}