JavaScript Lexical Environment
Tags: javascript, beginners, tutorial, codenewbie
Published: 2022-07-06 23:02:28

## Table of contents 
  * [Introduction](#intro)
  * [Text](#text)
  * [Comments](#comments)
  * [Literals](#literal)
  * [Identifiers & Reserved words](#i&r)
  * [Unicode](#unicode)
  * [Conclusion](#conclusion)


### Introduction <a name="intro"></a>

If we are not familiar with the term **Lexical Environment**, then look no further. In this article, we will learn and discuss what the **Lexical Environment** is & means in the Javascript language. After going through this article, we can take this knowledge to any other programming language as the concepts are similar in different languages. So buckle up and get ready to **learn!**

**So why is it important to understand the "Lexical Environment"?** 

Understanding how the environment works will not only benefit us now, but it will benefit us in reading, writing, and debugging code. We will always see the fundamentals/basics when coming across javascript code. So understanding these rules at a very early stage of our career or even later on can still be super beneficial. 

Here is a list of topics we will dive in-depth
 
- Text
- Comments 
- Literals
- Identifiers / Reserved words 
- Unicode 
- Semicolons

Be on the lookout for some tech terminology words. If we are unfamiliar with the terminology, do not worry, as definitions will be shared when we believe a big word comes up. Here is an example below

#### Big Word Definition 
> **_Syntax_: the arrangement of words and phrases to create well-formed sentences in a language**

### Text <a name="text"></a>

We need to keep a few practices in mind when writing Javascript code. One important rule to note is case-sensitive. Like in the English language, when we write sentences, we must follow a set of grammar rules we learned in school to have proper grammar. In JavaScript, when we name a variable, we can use the same word differently, each having its distinct identifier. For example

```
car <--- one name
Car <--- second name
CAR <--- third name
cAr <--- forth name
```

Each of these _names_ is distinctive, where **case-sensitive** comes into play. We must type the same **characters** in our code when creating **variable** names and using **reserved words** in our script; otherwise, we will get a different result or an error. 

Another neat feature that the _lexical environment_ provides is ignoring **white spaces**. In other programming languages like _python_, it is safe to know that its **environment** is strict regarding _indenting_ or _spacing_. Luckily we do not have to worry about that issue in the JavaScript environment. 

Why is this important? Well, it helps us format our code neatly and consistently. So we can _indent, line break, tabs_, and add as many _spaces_ as we would like, and JavaScript will ignore it.

#### Big Word Definition 
> **Case-Sensitive**: determining between capital and lowercase letters

#### Big Word Definition
> **White-Space**: represents a blank space punctuation character in the text

#### Big Word Definition
> **Characters**: A character is either a symbol (letters, numbers, punctuation)

### Comments <a name="comments"></a>

So what exactly is a _comment_, and how can we use them? 

Well, its name is pretty much the description. However, the purpose of _comments_  is to help us write _notes_ about the code or specific function. Maybe we are collaborating with another developer and have a suggestion about formating a script. There are a few ways we can add comments to our code. For example 

Anything in front of two forward slashes **//** is considered a _comment_; this allows us to create a **single-line** comment. 

```
// this is a comment
```

If we want to add a bit more information, we can add multiple lines of comments, /* anything between here is a comment */ 

```
/* 
Anything between these characters
Javascript ignores and considers them as comments.
*/ 
```

Comment inside a function

```
function car(){
 // this is a comment in a function block
}
```

### Literals <a name="literal"></a>

_**Data values**_ that appear in our script. There are many ways that **literals** are represented in our script. 

- array literals 
- Boolean literals
- string literals 
- numeric literals
- object literals 
- floating-point literals

These are values that we literally provide in our script. 

```
var name = 'Oscar' <-- string literal
var oddNum = 3 <-- numeric literal
var numbers = [1, 2, 3, 4, 5] <-- array literal
```

### Identifiers & Reserved words <a name="i&r"></a>

We use _**variables**__ when we want to store **data values** in our javascript code. We give _variable names_ to act as a **reference** to our _data value_. We use **identifiers** to name our _variables, functions, or properties_. Containing a standard set of characters/letters, _dollar sign_ $, _underscores_ _, and digits allows us to create variables, functions, and property names in many ways. 

In our javascript environment, we have access to **reserved words**, and these words are part of the javascript programming language with functionality pre-built for us and ready to use. 

```
break
case
catch
class
const
continue
debugger
default
delete
finally
else
if
import
new
return
super
```

If we are curious and want to dive more depth into the definitions of the reserved words, check out MDN [keywords](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords). 

### Unicode <a name="unicode"></a>

When we write javascript code, we use the Unicode Character set, and it is best practice to use only the ASCII letters and digits in our identifiers. 
That does not mean we are not allowed to use other symbols, though, no emojis; what does this mean? In our script, we can use mathematical symbols and non-English languages as variables.

### Conclusion <a name="conclusion"></a>

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far! 



- [Twitter](https://twitter.com/CleverOscarDev)
- [LinkedIn](https://www.linkedin.com/in/clever-oscar/)
- [Github](https://github.com/CleverOscar)