Tutorial: Javascript statement, syntax and comments
Tags: javascript, programming, codenewbie, tutorial
Published: 2022-01-25 08:37:48

---
title: Tutorial: Javascript statement, syntax and comments
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["javascript", "Programming", "codenewbie", "Tutorial"]
canonical_url: https://www.devwares.com/blog//javascript-statement
---

## JavaScript Statement, Syntax and Comments

A computer program is a set of "instructions" that a computer will "execute". These computer instructions are known as statements in a programming language. A list of programming statements makes up a JavaScript program.



Values, Operators, Expressions, Keywords, and Comments make up JavaScript statements. Many JavaScript statements may be found in most JavaScript apps. The assertions are performed in the same order as they are written, one by one. JavaScript statements are separated by semicolons.

**JavaScript code:**

```javascript
var a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c

```

Multiple statements on a single line are permitted when separated by semicolons. It is not necessary, but highly suggested, to terminate statements with a semicolon. Multiple spaces are ignored by JavaScript. You may make your script more legible by adding white space.

**Javascript Code:**

```javascript
var person = 'Hege';
var person = 'Hege';

```

Leaving space around operators is a smart idea. ( = + - \* / ):

**JavaScript Line Length and Line Breaks**

Programmers want to keep code lines under 80 characters long for readability. If a JavaScript statement is too long to fit on a single line, break it after an operator.

**Code:**

```javascript
document.getElementById('demo').innerHTML = 'Hello Dolly!';

```

**JavaScript Code Blocks** Inside curly braces{...}, JavaScript statements can be grouped together in code blocks. The goal of code blocks is to establish a set of statements that will be executed at the same time. Statements clustered together in blocks can be found in JavaScript functions, for example:

**JavaScript Code:**

```javascript
function myFunction() {
  document.getElementById('demo1').innerHTML = 'Hello Dolly!';
  document.getElementById('demo2').innerHTML = 'How are you?';
}

```

**JavaScript syntax**

The JavaScript syntax is a set of principles for writing JavaScript programs. The JavaScript syntax distinguishes between two kinds of values:

- Fixed values
- Variable values Fixed values are called Literals. Variable values are called Variables.

**JavaScript Literals**

The following are the two most significant syntactic rules for fixed values:

1. Decimals are used with or without numbers.
2. Text enclosed in double or single quotations is referred to as a string: Eg "Johnny Smith" 'Johnny Smith'

Actions to be done are identified using JavaScript keywords. The var keyword instructs the browser to create variables in the following way:

**Code:**

```javascript
var x, y;
x = 5 + 6;
y = x * 10;

```

The var keyword instructs the browser to create variables in the document:

**JavaScript Identifiers:**

Names are identifiers. Variable names in JavaScript are given using identifiers (and keywords, and functions, and labels). In most computer languages, the regulations for legal names are similar.

- The initial character in JavaScript must be a letter, underscore (\_), or dollar sign (\$).
- Letters, numerals, underscores, or dollar signs can be used as subsequent characters.
- As the first character, numbers are not permitted. This allows JavaScript to distinguish between IDs and numbers. The case of all JavaScript identifiers is important. The variables lastName and lastname are not the same thing:

**Code**

```javascript
var lastname, lastName;
lastName = 'Doe';
lastname = 'Peterson';

```

**JavaScript Syntax** The JavaScript syntax is a set of principles that describe how JavaScript applications are built:

```javascript
var x, y, z; // Declare Variables
x = 5;
y = 6; // Assign Values
z = x + y; // Compute Values

```

**JavaScript Values** The JavaScript syntax distinguishes between two kinds of values:

- Fixed values also called Literals.
- Variable values also called Variables.

**JavaScript Literals:** The following are the two most significant syntactic rules for fixed values:

1. Decimals or no decimals are used to write numbers:

--- 10.50, 1001

1. Text enclosed in double or single quotations is referred to as a string: --- "John Doe", 'John Doe'

**JavaScript Variables:** Variables are used to hold data values in computer languages.

The var keyword is used in JavaScript to declare variables.

When assigning values to variables, the equal sign is utilized.

The variable x is defined as a variable in this example. The value 6 is then allocated (given) to x:

```javascript
var x;
x = 6;

```

**JavaScript Operators** To compute values, JavaScript employs arithmetic operators (+ - \* /):

`(5 + 6) * 10`

To assign values to variables in JavaScript, use the assignment operator (=):

```javascript
var x, y;
x = 5;
y = 6;

```

**JavaScript Expressions**

An expression is a set of values, variables, and operators that produces a result.

An evaluation is the name given to the process of computing.

For example, 5 \* 10 evaluates to 50:

`5 * 10`Expressions can also contain variable values:

`x * 10`Values can be numbers or strings of various types.

For example, "John" + " " + "Doe", evaluates to "John Doe":

"John" + " " + "Doe"

**JavaScript Keywords** Actions to be done are identified using JavaScript keywords.

The var keyword instructs the browser to create variables in the document:

```javascript
var x, y;
x = 5 + 6;
y = x * 10;

```

**JavaScript Comments**

avaScript statements aren't all "executed."

Comments are regarded as code following double slashes / or between / _and_ /.

Comments will be ignored and will not be carried out:

```javascript
var x = 5; // I will be executed

// var x = 6; I will NOT be executed

```

Below you will find more information on comments.

**JavaScript Identifiers**

Names are identifiers.

Variable names in JavaScript are given using identifiers (and keywords, and functions, and labels).

In most computer languages, the regulations for legal names are similar.

The initial character in JavaScript must be a letter, underscore (\_), or dollar sign (\$).

Letters, numerals, underscores, and dollar signs can all be used as subsequent characters.

As the first character, numbers are not permitted. This allows JavaScript to distinguish between IDs and numbers.

JavaScript has a case-sensitive syntax. The case of all JavaScript identifiers is important.

The variables lastName and lastname are not the same thing:

```javascript
var lastname, lastName;
lastName = 'Doe';
lastname = 'Peterson';

```

VAR or Var are not interpreted by JavaScript as the keyword var.

**JavaScript and Camel Case**

Programmers have traditionally used a variety of methods to combine numerous words into a single variable name:

- Hyphens:

- Phrases with hyphens: first-name, last-name, master-card, inter-city In JavaScript, hyphens are not permitted. They're only for subtractions.

- Underscore Place an underscore next to first name, last name, master card, inter city.

- Upper Camel Case (Pascal Case). FirstName, LastName, MasterCard, InterCity.

- Lower Camel Case: Camel case, which begins with a lowercase letter, is commonly used by JavaScript programmers: firstName, lastName, masterCard, interCity.

**JavaScript Character Set**

The Unicode character set is used by JavaScript. Unicode encompasses (nearly) all of the world's characters, punctuations, and symbols.

**JavaScript comments:** JavaScript comments can be used to explain and improve the readability of JavaScript code.

**Single Line Comments:** // denotes the beginning of a single-line comment. JavaScript ignores any text between // and the end of the line (will not be executed). Each code line in this example is preceded by a single-line comment:

**Code:**

```javascript
// Change heading:
document.getElementById('myH').innerHTML = 'My First Page';
// Change paragraph:
document.getElementById('myP').innerHTML = 'My first paragraph.';

```

**Multi-line Comments:** Comments that span multiple lines begin with / _and conclude with_ /. JavaScript will ignore any text between / _and_ /.

**Code:**

```javascript
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById('myH').innerHTML = 'My First Page';
document.getElementById('myP').innerHTML = 'My first paragraph.';

```

To illustrate the code in this example, a multi-line comment (comment block) is used. Single-line comments are the most prevalent. For formal documentation, block comments are frequently utilized. Preventing Execution with Comments Code testing can benefit from the use of comments to avoid code execution. When you put // in front of a code line, it turns it into a comment instead of an executable line.


[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [CSS Text and Layout](https://www.devwares.com/blog/css-text-and-layout)
- [CSS Flexbox](https://www.devwares.com/blog/css-flexbox)
- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast)
- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast)

- [Contrast Installation](https://www.devwares.com/docs/contrast/react/Installation/)
- [Charts](https://www.devwares.com/docs/contrast/react/chart/)
- [Accordion](https://www.devwares.com/docs/contrast/react/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/react/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/react/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/react/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/react/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/react/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/react/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/react/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/react/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/react/components/buttons/)
- [Card](https://www.devwares.com/docs/contrast/react/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/react/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/react/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/react/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/react/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/react/components/footer/)
- [Icon](https://www.devwares.com/docs/contrast/react/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/react/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/react/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/react/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/react/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/react/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/react/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/react/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/react/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/react/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/react/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/react/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/react/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/react/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/react/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/react/components/select2/)
- [SmoothScroll](https://www.devwares.com/docs/contrast/react/components/smoothscroll/)
- [Slider](https://www.devwares.com/docs/contrast/react/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/react/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/react/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/react/components/switch/)
- [Navbar](https://www.devwares.com/docs/contrast/react/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/react/navigation/pagination/)
- [Sidebar](https://www.devwares.com/docs/contrast/react/navigation/sidebar/)
- [Tab](https://www.devwares.com/docs/contrast/react/navigation/tabs/)
- [Date Picker](https://www.devwares.com/docs/contrast/react/sections/datepicker/)
- [FileUploader](https://www.devwares.com/docs/contrast/react/sections/fileuploader/)
- [Time Picker](https://www.devwares.com/docs/contrast/react/sections/timepicker/)
- [Editable Table](https://www.devwares.com/docs/contrast/react/table/editabletable/)
- [Table](https://www.devwares.com/docs/contrast/react/table/table/)
- [Data Table](https://www.devwares.com/docs/contrast/react/table/datatables/)
- [Widgets]
(https://www.devwares.com/docs/contrast/react/widgets/)
- [Forms]
(https://www.devwares.com/docs/contrast/react/forms/)