JavaScript and it’s Lexical Structure

Learn building blocks of javascript like unicode, case sensitivity, semicolons, comments, white space, literals, identifiers, and reserved words to understand the lexical structure of it.

To understand the structure of JavaScript, you need to learn the following building blocks of it: Unicode, case sensitivity, semicolons, comments, white space, literals, identifiers, and reserved words.

Nowadays, javascript are used in every websites in a different forms. Frameworks like ReactJS, NextJS, NodeJS, VueJS, etc. become more popular to meet the market demand of rapid development. In such cases, understand the lexical structure of it becomes more important for every developer, who works with it.

Unicode

You can use Unicode in JavaScript. So, you can use Emojis as variable names and write identifiers in any language, for example, Japanese or Chinese, with some rules. 

If you want to know whether your Unicode variable is acceptable or not, you can check it at https://mothereff.in/js-variables.

Case sensitivity

JavaScript is case-sensitive like many languages. So, a variable name written in a lower case format is different from the same variable name written in a camel case format.

Semicolons

JavaScript has a very C-like syntax, and you might see lots of code samples that feature semicolons at the end of each line.

Semicolons are not mandatory in JavaScript, and it does not have any problem that does not use them. Many developers, coming from languages that do not have semicolons, also started avoiding using them in JavaScript code.

It goes to personal preference and your programming behavior. If you are using those languages where semicolons are mandatory, you can use the same behavior for your JavaScript code.

Comments

Using comments helps us to understand code and its purpose. Each programming language has its own set of syntax when it comes to writing comments.

You can use two kinds of comments in JavaScript:

Single-line comments: Single-line comments begin with //. It will ignore all the things immediately after // syntax until the end of that line. It is also known as inline comments.

// Single-line comment

Multi-line comments: Multi-line comments begin with /* and end with */. You can write as many lines as you want in between these syntaxes.

/* Multi-line
Comment */

Usually, most developers use /* and */ syntax to writing multi-line block comments as JavaScript does not give any error. But the standard way to use multi-line comments in JavaScript is to use block comments as follows;

  1. Start with /** in a blank line.
  2. End with */ at the end line.
  3. Use * at the beginning of each line between the start and the end.
/**
 * Multi-line comment as
 * block comments
 */

White space

JavaScript does not consider white space meaningful like Python. You can add spaces and line breaks in any fashion.

In practice, you will most likely keep a well-defined style of indentation and adhere to what people commonly use.

Literals

We define as literal a value that is written in the source code, for example, a number, a string, a boolean, or also more advanced constructs, like Object Literals or Array Literals:

Identifiers

An identifier is a sequence of characters to identify a variable, a function, or an object. There are specific rules for identifiers as follows,

  • It should start with a letter (it could be any allowed character like emoji 😄 or Unicode words), the dollar signs $, or an underscore _.
  • It can contain digits.

Reserved words

You cannot use reserved JavaScript words as identifiers. Some of the reserve words are as follows,

break
do
instanceof
typeof
case
else
new
var
catch
finally
return
void
continue
for
switch
while
debugger
function
this
with
default
if
throw
delete
in
try
class
enum
extends
super
const
export
import

These reserved words are JavaScript functions or variables, which are used for different operations using JavaScript.

ReactJS Introduction

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

ReactJS is one of the most popular JavaScript front-end libraries for building user interfaces with a strong foundation. It has a robust and rapidly growing developer community and a declarative, efficient, and flexible library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the application view layer. 

Initially, it was developed by Jordan Walke, a software engineer at Facebook and maintained by Facebook. Later, it was used in other Facebook products like WhatsApp & Instagram. Facebook implemented ReactJS in its newsfeed section in 2011, but it was released to the public in May 2013.

The main objective of ReactJS is to develop interactive User Interfaces (UI) with the help of virtual DOM (JavaScript object) to improve application performance because the JavaScript virtual DOM is faster than the regular DOM because, it only changes individual DOM elements instead of reloading complete DOM every time. It uses component and data patterns that improve readability and helps to maintain larger apps.

The components are the heart of all React applications. These component are used to make a React application. Each component is responsible for outputting a small, reusable piece of HTML code and can be nested with other components to allow complicated applications.