Gramatika a typy

Tato kapitola probírá základní gramatiku, deklaraci proměnných, datové typy a literály JavaScriptu.

Základy

JavaScript si většinu své syntaxe vypůjčuje od Javy, je ale také ovlivněn jazyky Awk, Perl a Python.

JavaScript je case-sensitive (rozlišuje velikost písmen) a používá kódování znaků Unicode.

V JavaScriptu jsou instrukce označovány jako příkazy a oddělují se středníkem (;). Mezery, tabulátory a znaky zalomení se nazývají prázné znaky. Zdrojový text JavaScriptu je procházen zleva doprava a převádí se na sekvenci vstupních prvků, kterými jsou symboly, řídicí znaky, zakončení řádek, komentáře a prázdné znaky. ECMAScript také definuje určitá klíčová slova a literály a zahrnuje pravidla pro automatické vkládání středníků (ASI) na konec příkazů. Nicméně se i tak doporučuje vkládat středníky vždy za každý příkaz; předcházíte tak vedlejším efektům. Více informací získáne v podrobné referenční příručce o lexikální gramatice JavaScriptu. 

Komentáře

Syntaxe komentářů se shoduje s C++ a spoustou dalších jazyků:

// řádkový komentář
 
/* toto je delší,
   víceřádkový komentář
 */
 
/* Komentáře ale nemůžete /* vnořovat */ SyntaxError */

Deklarace

V JavaScriptu existují tři typy deklarací.

var

Deklaruje proměnnou, volitelně jí přiřazuje i hodnotu.

let

Deklaruje lokální proměnnou pro scope bloku kódu, volitelně jí přiřazuje i hodnotu.

const

Declaruje pojmenovanou konstantu, která je jen ke čtení.

Proměnné

Proměnné používáme jako symbolické názvy pro hodnoty v naší aplikaci. Názvy proměnných označované jako identifikátory podléhají jistým pravidlům.

Javascriptový identifikátor musí začínat písmenem, podrtžítkem (_) či dolarovým znakem ($); následujícími znaky pak mohou být i číslice (0-9). Protože je JavaScript case sensitive, zahrnuje množina písmem jak znaky of "A" do "Z" (velká písmena), tak i od "a" do "z" (malá písmena).

V identifikátorech můžeme použít znaky ze sady ISO 8859-1 nebo Unicode, jako jsou například å a ü. Stejně tak můžeme v identifikátorech používat i Unicode escape sekvence.

Příklady povolených názvů jsou Number_hits, temp99, a _name.

Deklarace proměnných

Proměnnou můžeme deklarovat třemi způsoby:

• Klíčovým slovem var. Například var x = 42. Tato syntaxe může být použit pro deklaraci lokální i globální proměnné.
• Jednoduše přiřazením hodnoty. Například x = 42. Takto deklarujeme výhradně globální proměnnou. V případě strict JavaScriptu generuje tento způsob upozornění. Tuto možno byste neměli používat.
• Klíčovým slovem let. Například let y = 13. Tato syntaxe může být použita pro deklaraci lokální proměnné ve scope konkrétního bloku kódu. Podívejte se níže na Rámec působnosti proměnné (scope).

Vyhodnocování proměnných

Proměnná deklarovaná pomocí var či let příkazu má bez prvotní inicializace hodnotu undefined.

Pokud se pokusíme přistupovat k nedeklarované proměnné, skončí náš pokus vyhozením výjimky ReferenceError:

var a;
console.log("Hodnota a je " + a); // zapíše "Hodnota a je undefined"
console.log("Hodnota b je " + b); // způsobí výjimku ReferenceError

undefined můžeme použít k vyjádření toho, jestli má proměnná přiřazenu nějakou hodnotu. V následujícím kódu není proměnné input přiřazena hodnota, a příkaz if tak bude vyhodnocen jako true (pravdivý).

var input;
if(input === undefined){
  doThis();
} else {
  doThat();
}

Hodnota undefined se chová jako false, je-li použita v booleovském kontextu. Následující kód například funkci myFunction vykoná, protože prvek myArray je undefined:

var myArray = [];
if (!myArray[0]) myFunction(); 

Je-li hodnota undefined použita v číselném kontextu, převede se na NaN.

var a;
a + 2;  // vyhodnotí se jako NaN

Při vyhodnocování proměnné s hodnotou null se null chová jako 0 v číselném kontextu a jako false v booleovském kontextu. Například:

var n = null;
console.log(n * 32); // Zapíše 0 do konzole

Rámec působnosti proměnné (scope)

Deklarujeme-li proměnnou vně jakékoliv funkce, pak ji nazýváme globální proměnnou, protože je dostupná i ve zbylých částech kodu dokumentu. Pokud deklarujeme proměnnou uvnitř funkce, označujeme ji jako lokální proměnnou, protože je dostupná pouze v jejím rámci.

JavaScript neměl před ECMAScript 6 scope pro příkaz bloku; přesněji řečeno, proměnná deklarovaná v rámci bloku je lokální vzhledem k funkci (nebo globálnímu scope), v níž je blok umístěn. Následující kód například vypíše 5, protože scope proměnné x je funkce (nebo globální kontext), v jejímž rámci je x deklarováno, nikoliv blok, což je v tomto případě příkaz if.

if (true) {
  var x = 5;
}
console.log(x);  // 5

Toto chování se změní, použijeme-li deklaraci pomocí let zavedeného v ECMAScriptu 6.

if (true) {
  let y = 5;
}
console.log(y);  // ReferenceError: y není definováno

Variable hoisting

Další neobvyklou záležitost týkající se proměnných v JavaScriptu představuje skutečnost, že můžeme odkazovat na proměnnou, která je deklarována až později, aniž bychom způsobili výjimku. Tento koncept je znám jako hoisting (vyzdvihnutí); proměnné v JavaScriptu jsou obrazně "vyzdvihnuty" nebo vytaženy na začátek funkce či příkazu. Proměnné, které jsou vyzdvihnuty, ale vrátí hodnotu undefined. Takže i když proměnnou deklarujete a inicializujete po tom, co ji použijete, nebo se na ni odkážete, vrátí stejně hodnotu undefined.

/**
 * Příklad 1
 */
console.log(x === undefined); // vypíše "true"
var x = 3;

/**
 * Příklad 2
 */
// vrátí hodnotu undefined
var myvar = "moje hodnota";
 
(function() {
  console.log(myvar); // undefined
  var myvar = "lokální hodnota";
})();

Předcházející příklad bude interpretován stejně jako tento:

/**
 * Příklad 1
 */
var x;
console.log(x === undefined); // vypíše "true"
x = 3;
 
/**
 * Example 2
 */
var myvar = "moje hodnota";
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "lokální hodnota";
})();

Kvůli hoistingu by měly být veškeré příkazy var použité uvnitř funkce umístěny nejblíž jejímu začátku. Tento osvědčený postup zlepšuje srozumitelnost kódu.

Globální proměnné

Globální proměnné jsou ve skutečnosti vlastnostmi globálního objektu. V případě webových stránek je jím window, můžeme tedy ke globálním proměnným přistupovat pomocí syntaxe window.promenna a stejně tak i do nich zapisovat.

Následkem toho můžeme přistupovat ke globálním proměnným deklarovaným v jednom okně nebo rámu z jiného okna či rámu uvedením názvu tohoto okna nebo rámu. Pokud je například v dokumentu deklarována proměnná phoneNumber, můžeme na ni odkazovat z iframe rámu pomocí parent.phoneNumber.

Konstanty

Klíčovým slovem const můžeme vytvářet pojmenované konstanty, které jsou pouze ke čtení. Syntaxe identifikátoru konstanty je stejná jako u identifikátoru proměnné: musí začínat písmenem, podtržítkem nebo znakem dolaru a může obsahovat alfranumerické znaky nebo podtržítko.

const prefix = '212';

Konstanta nemůže měnit hodnotu přiřazením nebo opakovanou deklarací během vykonávání skriptu. Hodnota jí musí být přiřazena již při inicializaci.

Pro konstanty platí stejná pravidla týkající se scope jako u proměnných blku deklarovaných pomocí let. Pokud je klíčové slovo const vynecháno, zachází se s identifikátorem jako s běžnou proměnnou.

Konstanta nemůže nést stejné jméno jako funkce nebo proměnné ve stejné scope. Například:

// TOTO ZPŮSOBÍ CHYBU
function f() {};
const f = 5;

// TOTO TAKÉ ZPŮSOBÍ CHYBU
function f() {
  const g = 5;
  var g;

  // příkazy
}

Data structures and types

Data types

The latest ECMAScript standard defines seven data types:

• Six data types that are primitives:
  • Boolean. true and false.
  • null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.
  • undefined. A top-level property whose value is undefined.
  • Number. 42 or 3.14159.
  • String. "Howdy"
  • Symbol (new in ECMAScript 6). A data type whose instances are unique and immutable.
• and Object

Although these data types are a relatively small amount, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.

Data type conversion

JavaScript is a dynamically typed language. That means you don't have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. So, for example, you could define a variable as follows:

var answer = 42;

And later, you could assign the same variable a string value, for example:

answer = "Thanks for all the fish...";

Because JavaScript is dynamically typed, this assignment does not cause an error message.

In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings. For example, consider the following statements:

x = "The answer is " + 42 // "The answer is 42"
y = 42 + " is the answer" // "42 is the answer"

In statements involving other operators, JavaScript does not convert numeric values to strings. For example:

"37" - 7 // 30
"37" + 7 // "377"

Converting strings to numbers

In the case that a value representing a number is in memory as a string, there are methods for conversion.

• parseInt()
• parseFloat()

parseInt will only return whole numbers, so its use is diminished for decimals. Additionally, a best practice for parseInt is to always include the radix parameter. The radix parameter is used to specify which numerical system is to be used.

An alternative method of retrieving a number from a string is with the + (unary plus) operator:

"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2   
// Note: the parentheses are added for clarity, not required.

Literals

You use literals to represent values in JavaScript. These are fixed values, not variables, that you literally provide in your script. This section describes the following types of literals:

• Array literals
• Boolean literals
• Floating-point literals
• Integers
• Object literals
• RegExp literals
• String literals

Array literals

An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements, and its length is set to the number of arguments specified.

The following example creates the coffees array with three elements and a length of three:

var coffees = ["French Roast", "Colombian", "Kona"];

If an array is created using a literal in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array literal. In addition, a literal used in a function is created each time the function is called.

Array literals are also Array objects. See Array and Indexed collections for details on Array objects.

Extra commas in array literals

You do not have to specify all elements in an array literal. If you put two commas in a row, the array is created with undefined for the unspecified elements. The following example creates the fish array:

var fish = ["Lion", , "Angel"];

This array has two elements with values and one empty element (fish[0] is "Lion", fish[1] is undefined, and fish[2] is "Angel").

If you include a trailing comma at the end of the list of elements, the comma is ignored. In the following example, the length of the array is three. There is no myList[3]. All other commas in the list indicate a new element.

var myList = ['home', , 'school', ];

In the following example, the length of the array is four, and myList[0] and myList[2] are missing.

var myList = [ , 'home', , 'school'];

In the following example, the length of the array is four, and myList[1] and myList[3] are missing. Only the last comma is ignored.

var myList = ['home', , 'school', , ];

Understanding the behavior of extra commas is important to understanding JavaScript as a language, however when writing your own code: explicitly declaring the missing elements as undefined will increase your code's clarity and maintainability.

Boolean literals

The Boolean type has two literal values: true and false.

Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. The Boolean object is a wrapper around the primitive Boolean data type. See Boolean for more information.

Integers

Integers can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2).

• Decimal integer literal consists of a sequence of digits without a leading 0 (zero).
• Leading 0 (zero) on an integer literal, or leading 0o (or 0O) indicates it is in octal. Octal integers can include only the digits 0-7.
• Leading 0x (or 0X) indicates hexadecimal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F.

• Leading 0b (or 0B) indicates binary. Binary integers can include digits only 0 and 1.

Some examples of integer literals are:

0, 117 and -345 (decimal, base 10)
015, 0001 and -0o77 (octal, base 8) 
0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
0b11, 0b0011 and -0b11 (binary, base 2)

For more information, see Numeric literals in the Lexical grammar reference.

Floating-point literals

A floating-point literal can have the following parts:

• A decimal integer which can be signed (preceded by "+" or "-"),
• A decimal point ("."),
• A fraction (another decimal number),
• An exponent.

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point or "e" (or "E").

More succinctly, the syntax is:

[(+|-)][digits][.digits][(E|e)[(+|-)]digits]

For example:

3.1415926
-.123456789
-3.1E+12
.1e-23

Object literals

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). You should not use an object literal at the beginning of a statement. This will lead to an error or not behave as you expect, because the { will be interpreted as the beginning of a block.

The following is an example of an object literal. The first element of the car object defines a property, myCar, and assigns to it a new string, "Saturn"; the second element, the getCar property, is immediately assigned the result of invoking the function (carTypes("Honda")); the third element, the special property, uses an existing variable (sales).

var sales = "Toyota";

function carTypes(name) {
  if (name === "Honda") {
    return name;
  } else {
    return "Sorry, we don't sell " + name + ".";
  }
}

var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };

console.log(car.myCar);   // Saturn
console.log(car.getCar);  // Honda
console.log(car.special); // Toyota 

Additionally, you can use a numeric or string literal for the name of a property or nest an object inside another. The following example uses these options.

var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda

Object property names can be any string, including the empty string. If the property name would not be a valid JavaScript identifier or number, it must be enclosed in quotes. Property names that are not valid identifiers also cannot be accessed as a dot (.) property, but can be accessed and set with the array-like notation("[]").

var unusualPropertyNames = {
  "": "An empty string",
  "!": "Bang!"
}
console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
console.log(unusualPropertyNames[""]);  // An empty string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
console.log(unusualPropertyNames["!"]); // Bang!

In ES2015, object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

Please note:

var foo = {a: "alpha", 2: "two"};
console.log(foo.a);    // alpha
console.log(foo[2]);   // two
//console.log(foo.2);  // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo["a"]); // alpha
console.log(foo["2"]); // two

RegExp literals

A regex literal is a pattern enclosed between slashes. The following is an example of an regex literal.

var re = /ab+c/;

String literals

A string literal is zero or more characters enclosed in double (") or single (') quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The following are examples of string literals:

"foo"
'bar'
"1234"
"one line \n another line"
"John's cat"

You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the String.length property with a string literal:

console.log("John's cat".length) 
// Will print the number of symbols in the string including whitespace. 
// In this case, 10.

In ES2015, template literals are also available. Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`https://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

You should use string literals unless you specifically need to use a String object. See String for details on String objects.

Using special characters in strings

In addition to ordinary characters, you can also include special characters in strings, as shown in the following example.

"one line \n another line"

The following table lists the special characters that you can use in JavaScript strings.

Escaping characters

For characters not listed in the table, a preceding backslash is ignored, but this usage is deprecated and should be avoided.

You can insert a quotation mark inside a string by preceding it with a backslash. This is known as escaping the quotation mark. For example:

var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
console.log(quote);

The result of this would be:

He read "The Cremation of Sam McGee" by R.W. Service.

To include a literal backslash inside a string, you must escape the backslash character. For example, to assign the file path c:\temp to a string, use the following:

var home = "c:\\temp";

You can also escape line breaks by preceding them with backslash. The backslash and line break are both removed from the value of the string.

var str = "this string \
is broken \
across multiple\
lines."
console.log(str);   // this string is broken across multiplelines.

Although JavaScript does not have "heredoc" syntax, you can get close by adding a linebreak escape and an escaped linebreak at the end of each line:

var poem = 
"Roses are red,\n\
Violets are blue.\n\
I'm schizophrenic,\n\
And so am I."

More information

This chapter focuses on basic syntax for declarations and types. To learn more about JavaScript's language constructs, see also the following chapters in this guide:

• Control flow and error handling
• Loops and iteration
• Functions
• Expressions and operators

In the next chapter, we will have a look at control flow constructs and error handling.