DEV Community

Oscar Ortiz
Oscar Ortiz

Posted on

JavaScript Lexical Environment

Table of contents

Introduction

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

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
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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.
*/ 
Enter fullscreen mode Exit fullscreen mode

Comment inside a function

function car(){
 // this is a comment in a function block
}
Enter fullscreen mode Exit fullscreen mode

Literals

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
Enter fullscreen mode Exit fullscreen mode

Identifiers & Reserved words

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
Enter fullscreen mode Exit fullscreen mode

If we are curious and want to dive more depth into the definitions of the reserved words, check out MDN keywords.

Unicode

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

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!

Top comments (0)