DEV Community

Tae'lur Alexis πŸ¦„βš›
Tae'lur Alexis πŸ¦„βš›

Posted on • Updated on • Originally published at taeluralexis.com

#100DaysOfVanillaJS: JavaScript Lexical Structure, As Explained By Pokemon

Alt Text
Today I want to share a few important rules about writing in JavaScript that I feel is important for you to know, especially if you are just starting your coding journey or overall seeking to better your understanding of the language. As a self-taught developer learning JavaScript, I don't recall finding JavaScript tutorials catered to beginners that explicitly taught the lexical structure of the language so I figured I'd share with you.

Feel free to bookmark this short post to keep as a basic reference as it will be helpful to be mindful of these rules as you start building stuff with JavaScript!

What Does Lexical Structure Mean?

Alt Text

It's not as complex as it sounds. Every programming language has a lexical structure, which is a set of basic rules you must follow when you're writing code in a language such as how to write comments and name variables.

JavaScript Is Written In Unicode

Alt Text

Unicode is an international encoding standard supported by almost every writing system and is used in JavaScript, which means you can use emojis or Japanese characters in your code for instance. If you want to read more about unicode (it's not mandatory learning in order to write JavaScript code), go here.

Whitespace

Whitespace does not affect your code in JavaScript. You can hit indent and tab as much as you want but if I'm working in an already existing codebase, I usually follow their formal or style of indenting. If you're more experienced with coding, you may be aware of tools like Prettier which help format your code to be readable.

Semicolons Are Optional

Semicolons are generally used to indicate the end of a statement but they are not mandatory. You will not encounter an error if you were to choose to not end a variable you declare with a semicolon. I personally use semicolons because to me it makes code more readable for my eye but you don't have to use them.

JavaScript is Case-Sensitive

Alt Text

The spelling of the names of your variables, functions, keywords and other identifiers must be exact. So that means myName and MyName are not the same. Another example is with booleans, a topic we'll be touching on later in the series. If we were to set a variable to True instead of true, you would encounter an error.

Comments

There are 2 different ways to create comments. You can either make a single line comment using 2 forward slashes or create a multi-line comment using a forward slash and an asterisk to create longer, more meaningful comments if you need to.

What Are Identifiers?

Identifiers are names. It's how we create references to our variables and functions. You can start any variable name with a dollar sign, underscore or letter. The main rule is to not use numbers as the first character in our identifiers.

Reserved Words

Many of these reserved words are already used in JavaScript like let for instance. It would be rather confusing if we decided to create a declare a let variable and name it let.

Alt Text

Literals

A literal is a piece of data that appears directly in a program such as numbers, strings (text encapsulated by quotation marks), boolean values and null.

So...What are we learning next?

Alt Text

So next we will continue on diving deeper into the primitive data type strings and the different ways we can manipulate them so this will get way more fun and practical! Thanks for reading, hope you enjoyed!

Top comments (10)

Collapse
 
coffeecraftcode profile image
Christina Gorton

Love this series Tae'lur. I'm finding it super useful and I know lots of others will too. I really like the visuals too. Keep up the great work.

Collapse
 
taeluralexis profile image
Tae'lur Alexis πŸ¦„βš›

Yay thank you Christina! Are there any topics you want me to cover specifically in the series so I'll take note? :)

Collapse
 
coffeecraftcode profile image
Christina Gorton

Looping through objects has been a big pain point for students I teach.

Also array methods and most ES6+ features.
We taught some JS and then moved to React. A lot of students who jump in to frameworks don't realize what is just JavaScript and what is framework specific.

Collapse
 
morjodomo profile image
πŸͺ CAPITALISTS HATE HER

Why do you put console.log(const [variablename]) - Does that do anything that just console.log (variablename) doesn't?

I didn't know you could do that, so I'm glad you pointed it out!

Collapse
 
taeluralexis profile image
Tae'lur Alexis πŸ¦„βš›

You actually just pointed out an error lol I didn’t even notice I wrote that. Thank you so much for pointing it out. Only the variable name should be in the parentheses, not the type of variable too :)

Collapse
 
morjodomo profile image
πŸͺ CAPITALISTS HATE HER

I'm glad I asked lol I was going "Wow, learning all sorts of things today!"

Thread Thread
 
taeluralexis profile image
Tae'lur Alexis πŸ¦„βš›

Yess thank you! It's fixed and updated now lol :)

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Gracias

Collapse
 
iamentadesign profile image
Sincere Neter

Thanks for helping us beginners πŸ‘πŸΎ

Collapse
 
loganblackk profile image
Logan

I'll be joining you for 100 days. Love your using Pokemon btw!