Lesson 03: Primary Characteristics of JavaScript

JavaScript Compiles its Interpreted Language

Introduction

In the previous lesson, we saw that a language like C# (also languages like C++, Visual Basic, F#, Pascal, etc) uses an internal application called a compiler that analyses all the code submitted to it. If everything is alright, the compiler gathers everything and converts it in a complicated language, called the machine language, that the computer can understand.

Higher languages like JavaScript (also HTML) also use an internal application but called an interpreter. The interpreter primarilys works exactly like a compiler. It analyzes the code to check the code. The webpage interpreter reads the code from top to bottom. It reads the HTML tags and creates an ordered list to establish how the HTML appear. It adds the CSS formats to each tag to specify how the tag should appear. Then interpreter starts reading the JavaScript code. It ignores the comments and empty spaces to consider only the code sections that will influence both the HTML tags and their CSS formats. On the valid JavaScript code, the interpreter checks for errors or things it doesn't understand. If everything is alright, the interpreter submits its findings to the browser to display the results to the visitor.

Minification

We have learned that, when writing your code in JavaScript and/or one of its libraries, to make your code easier to read, you should include empty spaces and comment. Here are examples:

// Identify the employee by name.
var firstName = "James",
    lastName  = "Caulson";
// Specify the hourly salary
var hourlySalary = 22.3;
// Specify the time worked
var timeWorked = 38.5;
// Create full name
var fullName = firstName + ' ' + lastName;
// Calculate the net pay
var netPay = hourlySalary * timeWorked;

Minification is the technique used by the JavaScript interpreter to optimize your code. Among the techniques it uses, it removes the comments and empty spaces that don't matter for the functionality of your code. From the above code, it may come up with code as follows:

var firstName="James",lastName="Caulson";
var hourlySalary=22.3,timeWorked=38.5;
var fullName=firstName+' '+lastName;
var netPay=hourlySalary*timeWorked;

The interpreter performs many other operations such as renaming variables and reducing the amount of code necessary to get the job done.

Hoisting

In C#, you must declare a variable before using it, such as before getting its value. Here is an example:

@{
    var aphorism = "Absence of evidence is not evidence of absence";

    <p>@aphorism</p>
}

If you try accessing a variable before it has been declared, you would receive an error. That's the case for the following code:

@{
    <p>@aphorism</p>

    var aphorism = "Absence of evidence is not evidence of absence";
}

The error is because the C# compiler reads and immediately analyzes the code from top to bottom. When the compiler encounters a name, if the name represents a variable, the compiler checks whether it is a declaration, based on the fact that the variable is preceded by a valid data type or a keyword (such as var or dynamic). It that's not the case, the compiler checks whether the variable was already declared or the variable exists in another file that the compiler is already aware of. If none of these conditions can be verified, the compiler presents an error (we say that it throws an exception).

The JavaScript interpreter also reads code from top to bottom but it doesn't immediately start processing everything. It first checks everything and creates a list that resembles a tree (in fact it is called a tree list). The list starts with the variables declarations. This means that as the JavaScript interpreter is reading the code, if it encounters the declaration of a variable, it internally puts that declaration in the top of its virtual list. When the list is ready, then the interpreter starts processing the code. As a result, you can access a variable that has not yet been declared, as long as it is declared somewhere in the code. To put it another way, you can first use a variable before declaring it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<p class="right">Affiche</p>

<script type="text/javascript">
    aphorism = "Absence of evidence is not evidence of absence";
    
    // . . .

    var aphorism;
</script>
</body>
</html>

Hoisting is the ability to access a variable before it has been declared.

Working in a Strict Mode

By default, in JavaScript, as seen above, you don't have to first declare a variable before using it. You can just write a name of a variable and immediately use it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

<script>
    evidence;
    
    evidence = = "Absence of evidence is not evidence of absence";
</script>

</body>
</html>

This type of code may create various categories of confusions such as using the same name many times (accidentally thinking that you are using different variables). One solution is to make sure that every variable must be declared before being used. To assist you with this, JavaScript supports a declaration known as use strict. To use it, include this expression in single-quotes somewhere in your code, preferably on its own line, as the first statement of your script. Here is an example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>

<script>
    'use strict';
    
    . . .
    
</script>

</body>
</html>

Not all browsers support the strict mode; even those that support it don't behave the same. For example, in some browssers (such as Microsoft Edge), the variables that are used without being declared would be ignored.

JavaScript Compiles its Interpreted Language

Introduction

Minification

We have learned that, when writing your code in JavaScript and/or one of its libraries, to make your code easier to read, you should include empty spaces and comment. Here are examples:

// Identify the employee by name.
var firstName = "James",
    lastName  = "Caulson";
// Specify the hourly salary
var hourlySalary = 22.3;
// Specify the time worked
var timeWorked = 38.5;
// Create full name
var fullName = firstName + ' ' + lastName;
// Calculate the net pay
var netPay = hourlySalary * timeWorked;

var firstName="James",lastName="Caulson";
var hourlySalary=22.3,timeWorked=38.5;
var fullName=firstName+' '+lastName;
var netPay=hourlySalary*timeWorked;

The interpreter performs many other operations such as renaming variables and reducing the amount of code necessary to get the job done.

Practical Learning: Ending the Lesson

Close your programming environment


Previous	Copyright © 2001-2019, FunctionX	Next