Top image

WEB design and programming - HTML | CSS | Java Script | PHP

Basic JavaScript

JavaScript: Variable

WHAT IS A VARIABLE?

A Variable is a named memory location which can be stored any information( = data).

You can assign any values like number 3, string “Hello”, or an other information (like a user e-mail address) into the variable, to be used at a later time.

Here’s what variable look like:

let fruit = "apple";
let greeting = "Hello";
let programming = "Java Script";

DECLARE A VARIABLE

The variable has 3 types of keywords which are var, let and const, to declare a new variable.

Since var is a old type keyword used before [ES2015] which is newer version of JavaScript, we will use let or const keyword in this article.

let and const

[ES2015] const

const keyword define a value that can not be reassigned into the variable.

const websiteName= "ACHIWEB";
Break down

① Put the keyword const to declare a variable
② A variable name that you want to name
③ Assign a value(date) with use = operator.

notice

> can not be reassigned the values to its variable declared with const keyword.

[ES2015] let

A way to use let keyword is almost same as const keyword.

let websiteName= "ACHIWEB";
Break down

① Put the keyword let to declare a variable
② A variable name that you want to name
③ Assign a value(date) with use = operator.

notice

> can be reassigned a new value the into its variable with let keyword.

You can reassign an another value into its variable declared with let keyword over again.

let count = "";
count = 1;
count = 2;
count = 3;

notice

> let keyword can define the variable without initial value, compare to const keyword. The variable without initial value has originally a default value, “undefined“.

JavaScript: Naming conventions

Here’s a part of examples of the naming conventions of JavaScript:

> end the command with a semi-colon (;)

> Cannot contain spaces

– Normally, engineers would use camelCase for names with multiple words and every new word will be started capitalized instead.

> Cannot contain reserved symbols

– math symbols (+, -, =, etc…)
– JavaScript-specific symbols ({, }, :, etc…)

> Cannot begin with a number

notice

> There are more rules to declare avariable.

[ES2015] Variable and template literals

The variable can be written with the template literal which you have learned in previous chapter.

You can embed its value of the variable when you write ${variable name} inside of the template literals:

const str = "string";
console.log(` This is a ${str}.`); // => "This is a string"

By this, it allows to omit + operators to connect strings.

notice

> Here is a post of Data types and Literal.

EVALUATE A VARIABLE

How evaluate a variable?

Let’s attempt the variable in a web console tool of a browser.

How to evaluate a variable in the browser

One of a way executing JavaScript is using a developer tool of a web browser. In this time, We will use Chrome to attempt to evaluate a JavaScript code.

Use a shortcut key Ctrl + Shift + I (Windows) or Command + Option + I (Mac), to open up the web console tool. You also can open it with menu bar above.

Here’s how variable evaluated look like:

web console

notice

> Click Console tab on second of right top.
> You can execute a code of JavaScript by a line on a function called “REPL” of a command line.
> You can create a new line with Shift + Enter to enter a several lines.
> It may easier to check a JavaScript code compare to creating a new HTML file.
> However, since it is slightly different from behavior of JavaScript with HTML file, it should be careful for understanding their actual behavior.

COLUMN: Why are variables needed?

Because to use that a programming code clarify and be shorter. Otherwise you would have to set a same value again and again, which could disrupt all over the code.

Variable is not a box

There may be examples of attempting to get a images that variables is like boxes, but variables are not boxes.
When you create the variable, the data (values) newly created by you will store in a memory inside the computer, and the name assigned to its storage will becomes the variable.

“Create data (values) in each bite of memory in the computer and attach a name tag”

If you want to describe a variable as an image, this example may be closer than comparing it to a box.
Although, attempting to capture the concept of a computer language as a visual representation of the real world could destroy the underlying logic of a program.
We should get into the world of programs by properly grasping the specification and purpose of variables in object-oriented, rather than understanding it as an unclear image.

REVIEW A VARIABLE

> const keyword can declare the variable that can’t reassign a new value.

> let keyword can declare the variable that can reassign a new value.

> Using const keyword is expected to reduce a bug with banning to reassign the value.

> Variable has the naming conventions to declare it correctly.

> We can attempting to check how a movent of the variable in the web console.

▼Check out the next post
https://achiachi.sakura.ne.jp/awp/654/