Variables and Printing

Let's take a quick peek into JavaScript, which is the main programming language used in this course. The focus here is on more recent features of JavaScript, which we also use within the course. We assume that you have some previous experience from programming, know basic concepts in programming such as variables, control statements, functions, and have some experience in using basic data structures (e.g. arrays/lists, maps).

In the examples below, we assume that you are working in a programming environment and have installed Deno. In practice, you can also try out the examples in the browser console. In this case, however, you need to change the names of constant values if you define them multiple times, or alternatively, shut down the browser console every now and then.

In the examples, we assume that the code is placed within a file called app.js. In addition, naturally, we assume that you save any changes made to the app.js file before executing the examples.

Variables

Variables are defined in two ways. Defining a variable using let introduces a variable with a value that can be changed. Constants (i.e. variables whose values cannot be changed, we might even argue that they shouldn't be called "variables") are defined using const. In JavaScript, the type of the variable is inferred automatically.

Below, we create two variables and output them to the console log.

let name = "B. Eich";
let yearOfBirth = 1961;

name = "Brendan Eich";

console.log(name + " was born in " + yearOfBirth + ".");

The output of the program is as follows.

deno run app.js
Brendan Eich was born in 1961.

If we would declare the name as a constant, changing its value would not be possible.

const name = "B. Eich";
let yearOfBirth = 1961;

name = "Brendan Eich";

console.log(name + " was born in " + yearOfBirth + ".");

When we run the above program, we see an error. The error states that we are trying to assign a value to a constant variable (which is not possible).

error: Uncaught TypeError: Assignment to constant variable.
name = "Brendan Eich";
     ^
    at file:///path-to-file/app.js:4:6

Block scoping

Both let and const are used to define block-scoped variables. Broadly speaking, a block refers to an area that has been defined using curly brackets, e.g. { this text is within a block }. Block scoping means that the variables exist only within the block where they have been defined (and, also, within blocks nested within the block).

In the following example, the variable name is defined within a block, printed within the block, and then printed outside the block.

{
  const name = "B. Eich";
  console.log(name);
}

console.log(name);

As the variable is block-scoped, logging the variable works within the block, but not outside the block. When the program tries to log the name variable outside the block, we see an error Uncaught ReferenceError: name is not defined.

deno run app.js
B. Eich
error: Uncaught ReferenceError: name is not defined
console.log(name);
            ^
    at file:///path-to-file/app.js:6:13

On the other hand, as mentioned previously, the variable can be accessed anywhere within the block where the variable is defined, also within nested blocks.

{
  const name = "B. Eich";
  console.log(name);
  {
    console.log(name);
  }
}

deno run app.js
B. Eich
B. Eich

Template literals

Writing code that uses variables as a part of the output or, more broadly, in strings, can be done concisely with template literals. Template literals are strings into which variable values can be embedded directly. A template literal starts and ends with a `backtick`. Variables are embedded into template literals using a dollar sign and curly brackets -- the variable name is added within the curly ${brackets}.

The following example shows how template literals are used.

const name = "Brendan Eich";
const yearOfBirth = 1961;

console.log(`${name} was born in ${yearOfBirth}.`);

deno run app.js
Brendan Eich was born in 1961.

VSCode tip: since it is more tedious to type backticks than quotes, there is an extension that converts a string automatically to a template string upon typing ${ within the string.