Руководство по javascript с примерами

alert("Вычисление выражения"); var a = 5 + 8; alert(a);

alert("Вычисление выражения")
var a = 5 + 8
alert(a)

alert("Вычисление выражения");
var a = 5 + 8;
alert(a);

// вывод сообщения
alert("Вычисление выражения");
// арифметическая операция
var a = 5 + 8;
alert(a);

// вывод сообщения
/* вывод сообщения и
арифметическая операция */
alert("Вычисление выражения");
var a = 5 + 8;
alert(a);

var myIncome;
// другой вариант
let myIncome2;

$commision
someVariable
product_Store
income2
myIncome_from_deposit

222lol
@someVariable
my%percent

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, inteface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, volatile, void, while, with

var myIncome;
var MyIncome;

var myIncome, procent, sum;
let a, b, c;

var income = 300;
let price = 76;

var income = 300;
income = 400;
console.log(income);

let price = 76;
price = 54;
console.log(price);

const rate = 10;
rate = 23;  // ошибка, rate - константа, поэтому  нельзя изменить ее значение

const rate; // ошибка, rate не инициализирована

• String: представляет строку

• Number: представляет числовое значение

• Boolean: представляет логическое значение true или false

• undefined: указывает, что значение не установлено

• null: указывает на неопределенное значение

2.5.1. Числовые данные

Числа в JavaScript могут иметь две формы:

var x = 45;
var y = 23.897;

В качестве разделителя между целой и дробной частями, как и в других языках программирования, используется точка.

2.5.2. Строки

Тип string представляет строки, то есть такие данные, которые заключены в кавычки. Причем можно использовать как двойные, так и одинарные кавычки.

var helloWorld = "Привет мир";
var helloWorld2 = 'Привет мир';

Единственно ограничение: тип закрывающей кавычки должен быть тот же, что и тип открывающей, то есть либо обе двойные, либо обе одинарные кавычки.

var helloWorld = 'Привет мир"; // ошибка

Если внутри строки встречаются кавычки, то их нужно экранировать слэшем . Например, пусть у нас есть текст Бюро "Рога и копыта". Теперь экранируем кавычки:

var companyName = "Бюро "Рога и копыта"";

Также можно внутри стоки использовать другой тип кавычек:

var companyName1 = "Бюро 'Рога и копыта'";
var companyName2 = 'Бюро "Рога и копыта"';

2.5.3. Тип Boolean

Тип Boolean представляет булевы или логические значения true и false (то есть да или нет):

var isAlive = true;
var isDead = false;

2.5.4. null и undefined

Нередко возникает путаница между null и undefined. Итак, когда только определяется переменная без присвоения ей начального значения, она представляет тип undefined:

var isAlive;
console.log(isAlive);

Присвоение значение null означает, что переменная имеет некоторое неопределенное значение (не число, не строка, не логическое значение), но все-таки имеет значение. undefined означает, что переменная не имеет значения.

var isAlive;
console.log(isAlive); // undefined
isAlive = null;
console.log(isAlive); // null
isAlive = undefined;  // снова установим тип undefined
console.log(isAlive); // undefined

2.5.5. object

Тип object представляет сложный объект. Простейшее определение объекта представляют фигурные скобки:

Объект может иметь различные свойства и методы:

var user = {name: "Tom", age:24};
console.log(user.name);

В данном случае объект называется user, и он имеет два свойства: name и age. Это краткое описание объектов.

2.5.6. Слабая типизация

JavaScript является языком со слабой типизацией. Это значит, что переменные могут динамически менять тип.

var xNumber; // тип `undefined`
console.log(xNumber);
xNumber = 45; // тип `number`
console.log(xNumber);
xNumber = "45"; // тип `string`
console.log(xNumber);

Несмотря на то, что во втором и третьем случае консоль выведет число 45, но во втором случае переменная xNumber будет представлять число, а в третьем случае — строку.

Это важный момент, который надо учитывать. От этого зависит поведение переменной в программе:

var xNumber = 45; // тип `number`
var yNumber = xNumber + 5;
console.log(yNumber);

xNumber = "45"; // тип `string`
var zNumber = xNumber + 5
console.log(zNumber);

Выше в обоих случая к переменной xNumber применяется операция сложения +. Но в первом случае xNumber представляет число, поэтому результатом операции xNumber + 5 будет число 50.

Во втором случае xNumber представляет строку. Но операция сложения между строкой и числом 5 невозможна. Поэтому число 5 будет преобразовываться к строке, и будет происходить операция объединения строк. И результатом выражения xNumber + 5 будет стока "455".

2.6.1. Оператор typeof

С помощью оператора typeof можно получить тип переменной:

var name = "Tom";
console.log(typeof name);
var income = 45.8;
console.log(typeof income);
var isEnabled = true;
console.log(typeof isEnabled);
var undefVariable;
console.log(typeof undefVariable);

string
number
boolean
undefined

2.6.2. Математические операторы

JavaScript поддерживает все базовые математические операции:

var x = 10;
var y = x + 50;

var x = 100;
var y = x - 50;

var x = 4;
var y = 5;
var z = x * y;

var x = 40;
var y = 5;
var z = x / y;

var x = 40;
var y = 7;
var z = x % y;
console.log(z);

Результатом будет 5, так как наибольшее целое число, которое меньше или равно 40 и при этом делится на 7 равно 35, а 40 - 35 = 5.

var x = 5;
x++;
console.log(x);

var x = 5;
var z = ++x;
console.log(x);
console.log(z);

var a = 5;
var b = a++;
console.log(a);
console.log(b);

// префиксный декремент
var x = 5;
var z = --x;
console.log(x);
console.log(z);

// постфиксный декремент
var a = 5;
var b = a--;
console.log(a);
console.log(b);

var x = 10;
var y = 5 + (6 - 2) * --x;
console.log(y); //41

2.6.3. Операции присваивания

var a = 23;
a += 5; // аналогично a = a + 5
console.log(a);

var a = 28;
a -= 10; // аналогично a = a - 10
console.log(a);

var x = 20;
x *= 2; // аналогично x = x * 2
console.log(x);

var x = 40;
x /= 4; // аналогично x = x / 4
console.log(x);

var x = 10;
x %= 3; // аналогично x = x % 3
console.log(x);

2.6.4. Операторы сравнения

Как правило, для проверки условия используются операторы сравнения. Операторы сравнения сравнивают два значения и возвращают значение true или false:

Все операторы довольно просты, наверное, за исключением оператора равенства и оператора тождественности. Они оба сравнивают два значения, но оператор тождественности также принимает во внимание и тип значения.

var income = 100;
var strIncome = "100";
var result = income == strIncome;
console.log(result);

Переменная result здесь будет равна true, так как фактически и income, и strIncome представляют число 100.

Но оператор тождественности возвратит в этом случае false, так как данные имеют разные тип:

var income = 100;
var strIncome = "100";
var result = income === strIncome;
console.log(result);

Аналогично работают операторы неравенства != и !==.

2.6.5. Логические операции

Логические операции применяются для объединения результатов двух операций сравнения. В JavaScript есть следующие логические операции:

var income = 100;
var percent = 10;
var result = income > 50 && percent < 12;
console.log(result);

var income = 100;
var isDeposit = true;
var result = income > 50 || isDeposit == true;
console.log(result);

var income = 100;
var result1 = !(income > 50);
console.log(result1);

var isDeposit = false;
var result2 = !isDeposit;
console.log(result2);

2.6.6. Операции со строками

Строки могут использовать оператор + для объединения.

var name = "Том";
var surname = "Сойер"
var fullname = name + " " + surname;
console.log(fullname);

Если одно из выражений представляет строку, а другое — число, то число преобразуется к строке и выполняется операция объединения строк:

var name = "Том";
var fullname = name + 256;
console.log(fullname);

2.6.7. Пример

Программа, которая продемонстрирует работу с операциями над переменными.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>JavaScript</title>
</head>
<body>
    <script>
        var sum = 500; // сумма вклада
        var percent = 10;  // процент по вкладу
        var income = sum * percent / 100;  // доход по вкладу
        sum = sum + income; // определяем новую сумму
        console.log("Доход по вкладу: " + income);
        console.log("Сумма вклада после первого года: " + sum);
    </script>
</body>
</html>

В скрипте объявляются три переменных: sum, percent и income. Переменная income вычисляется по остальным двум переменным с помощью операций умножения и деления. И в конце ее значение суммируется со значением переменной sum.

И консоль браузера выведет:

var number1 = "46";
var number2 = "4";
var result = number1 + number2;
console.log(result);

var number1 = "46";
var number2 = "4";
var result = parseInt(number1) + parseInt(number2);
console.log(result);

var number1 = "46.07";
var number2 = "4.98";
var result = parseFloat(number1) + parseFloat(number2);
console.log(result);

var num1 = "123hello";
var num2 = parseInt(num1);
console.log(num2);

var num1 = "javascript";
var num2 = "22";
var result = isNaN(num1);
console.log(result);

result = isNaN(num2);
console.log(result);

Преобразование в число в двоичной системе

var num1 = "110";
var num2 = parseInt(num1, 2);
console.log(num2);

2.7.1. Пример

Теперь напишем небольшую программу, в которой используем операции с переменными:

<!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8" />
        <title>JavaScript</title>
        </head>
    <body>
        <script>
            var strSum = prompt("Введите сумму вклада", 1000);
            var strPercent = prompt("Введите процентную ставку", 10);
            var sum = parseInt(strSum);
            var percent = parseInt(strPercent);
            sum = sum + sum * percent / 100;
            alert("После начисления процентов сумма вклада составит: " + sum);
        </script>
    </body>
</html>

С помощью функции prompt() в браузере выводится диалоговое окно с предложением ввести некоторое значение. Второй аргумент в этой функции указывает на значение, которое будет использоваться по умолчанию.

Однако функция prompt() возвращает строку. Поэтому эту строку необходимо преобразовать в число, чтобы выполнить с ней операции.

После открытия страницы в браузере увидим приглашение к вводу суммы вклада:

Затем подобное сообщение отобразится и для ввода процента. И в конце программа получит данные, преобразует их в числа и выполнит подсчет:

var myArray = new Array();

var people = ["Tom", "Alice", "Sam"];
console.log(people);

var people = ["Tom", "Alice", "Sam"];
console.log(people[0]);
var person3 = people[2];
console.log(person3);

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);

var people = ["Tom", "Alice", "Sam"];
console.log(people[0]);
people[0] = "Bob";
console.log(people[0]);

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
people[7] = "Bob";
console.log(people[7]);

var objects = ["Tom", 12, true, 3.14, false];
console.log(objects);

2.8.1. spread-оператор

spread-оператор …​ позволяет взять значения из массива по отдельности:

let numbers = [1, 2, 3, 4];
console.log(...numbers);
console.log(numbers);

spread-оператор указывается перед массивом. В результате выражение …​numbers возвратит набор чисел, но это будет не массив, а именно отдельные значения.

2.8.2. Многомерные массивы

Массивы могут быть одномерными и многомерными. Каждый элемент в многомерном массиве может представлять собой отдельный массив. Выше рассмотрели одномерный массив, теперь создадим многомерный массив:

var numbers1 = [0, 1, 2, 3, 4, 5 ]; // одномерный массив
var numbers2 = [[0, 1, 2], [3, 4, 5]]; // двумерный массив

Визуально оба массива можно представить следующим образом:

Поскольку массив numbers2 двухмерный, он представляет собой простую таблицу. Каждый его элемент может представлять отдельный массив.

Рассмотрим еще один двумерный массив:

var people = [
        ["Tom", 25, false],
        ["Bill", 38, true],
        ["Alice", 21, false]
];

console.log(people[0]);
console.log(people[1]);

["Tom", 25, false]
["Bill", 38, true]

Массив people можно представить в виде следующей таблицы:

Чтобы получить отдельный элемент массива, также используется индекс:

Только теперь переменная tomInfo будет представлять массив. Чтобы получить элемент внутри вложенного массива, необходимо использовать его вторую размерность:

var people = [
        ["Tom", 25, false],
        ["Bill", 38, true],
        ["Alice", 21, false]
];

console.log("Имя: " + people[0][0]);
console.log("Возраст: " + people[0][1]);

То есть если визуально двумерный массив можно представить в виде таблицы, то элемент people[0][1] будет ссылаться на ячейку таблицы, которая находится на пересечении первой строки и второго столбца (первая размерность — 0 — строка, вторая размерность — 1 — столбец).

Также можно выполнить присвоение:

var people = [
        ["Tom", 25, false],
        ["Bill", 38, true],
        ["Alice", 21, false]
];
people[0][1] = 56; // присваиваем отдельное значение
console.log(people[0][1]);

people[1] = ["Bob", 29, false]; // присваиваем массив
console.log(people[1][0]);

При создании многомерных массивов не ограничены только двумерными, но также можем использовать массивы больших размерностей:

var numbers = [];
numbers[0] = []; // теперь numbers - двумерный массив
numbers[0][0]=[]; // теперь numbers - трехмерный массив
numbers[0][0][0] = 5; // первый элемент трехмерного массива равен 5
console.log(numbers[0][0][0]);

2.9.1. Выражение if

Конструкция if проверяет некоторое условие и если это условие верно, то выполняет некоторые действия. Общая форма конструкции if:

Например:

var income = 100;
if (income > 50) alert("доход больше 50");

Здесь в конструкции if используется следующее условие: income > 50. Если это условие возвращает true, то есть переменная income имеет значение больше 50, то браузер отображает сообщение. Если же значение income меньше 50, то никакого сообщения не отображается.

Если необходимо выполнить по условию набор инструкций, то они помещаются в блок из фигурных скобок:

var income = 100;
if (income > 50) {
    var message = "доход больше 50";
    alert(message);
}

Причем условия могут быть сложными:

var income = 100;
var age = 19;
if (income < 150 && age > 18) {
    var message = "доход больше 50";
    alert(message);
}

Конструкция if позволяет проверить наличие значения.

var myVar = 89;
if (myVar) {
    // действия
}

Если переменная myVar имеет значение, то в условной конструкции она возвратит значение true.

Но нередко для проверки значения переменной используют альтернативный вариант — проверяют на значение undefined:

if (typeof myVar != "undefined") {
    // действия
}

В конструкции if также можно использовать блок else. Данный блок содержит инструкции, которые выполняются, если условие после if ложно, то есть равно false:

var age = 17;
if (age >= 18) {
    alert("Вы допущены к программе кредитования");
} else {
    alert("Вы не можете участвовать в программе, так как возраст меньше 18");
}

С помощью конструкции else if можно добавить альтернативное условие к блоку if:

var income = 300;
if (income < 200) {
    alert("Доход ниже среднего");
} else if (income >= 200 && income <= 400) {
    alert("Средний доход");
} else {
    alert("Доход выше среднего");
}

В данном случае выполнится блок else if. При необходимости можно использовать несколько блоков else if с разными условиями:

if (income < 200) {
    alert("Доход ниже среднего");
} else if (income >= 200 && income < 300) {
    alert("Чуть ниже среднего");
} else if (income >= 300 && income < 400) {
    alert("Средний доход");
} else {
    alert("Доход выше среднего");
}

2.9.2. true или false

В JavaScript любая переменная может применяться в условных выражениях, но не любая переменная представляет тип boolean. Поэтому возникает вопрос, что возвратит та или иная переменная — true или false? Много зависит от типа данных, который представляет переменная:

var x = NaN;
if (x) {  // false
}

var y = ""; // false - так как пустая строка
var z = "javascript"; // true - строка не пустая

var user = {name:"Tom"}; // true
var isEnabled = new Boolean(false); // true
var car = {}; // true

2.9.3. Конструкция switch..case

Конструкция switch..case является альтернативой использованию конструкции if..else if..else и также позволяет обработать сразу несколько условий:

var income = 300;
switch(income) {
    case 100 :
        console.log("Доход равен 100");
        break;
    case 200 :
        console.log("Доход равен 200");
        break;
    case 300 :
        console.log("Доход равен 300");
        break;
}

После ключевого слова switch в скобках идет сравниваемое выражение. Значение этого выражения последовательно сравнивается со значениями, помещенными после оператора сase. И если совпадение будет найдено, то будет выполняться определенный блок сase.

В конце каждого блока сase ставится оператор break, чтобы избежать выполнения других блоков.

Если есть необходимость обработать ситуацию, когда совпадения не будет найдено, то можно добавить блок default:

var income = 300;
switch(income) {
    case 100 :
        console.log("Доход равен 100");
        break;
    case 200 :
        console.log("Доход равен 200");
        break;
    case 300 :
        console.log("Доход равен 300");
        break;
    default:
        console.log("Доход неизвестной величины");
        break;
}

2.9.4. Тернарная операция

Тернарная операция состоит из трех операндов и имеет следующее определение:

[первый операнд - условие] ? [второй операнд] : [третий операнд]

В зависимости от условия тернарная операция возвращает второй или третий операнд: если условие равно true, то возвращается второй операнд; если условие равно false, то третий. Например:

var a = 1;
var b = 2;
var result = a < b ? a + b : a - b;
console.log(result);

Если значение переменной a меньше значения переменной b, то переменная result будет равняться a + b. Иначе значение result будет равняться a - b.

• for

• for..in

• for..of

• while

• do..while

2.10.1. Цикл for

Цикл for имеет следующее формальное определение:

for ([инициализация счетчика]; [условие]; [изменение счетчика]) {
    // действия
}

Например, используем цикл for для перебора элементов массива:

var people = ["Tom", "Alice", "Bob", "Sam"];
for (var i = 0; i < people.length; i++) {
    console.log(people[i]);
}

Первая часть объявления цикла — var i = 0 — создает и инициализирует счетчик — переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.

Вторая часть — условие, при котором будет выполняться цикл. В данном случае цикл будет выполняться, пока значение i не достигнет величины, равной длине массива people. Получить длину массива можно с помощью свойства length: people.length.

Третья часть — приращение счетчика на единицу.

И так как в массиве 4 элемента, то блок цикла сработает 4 раза, пока значение i не станет равным people.length (то есть 4). И каждый раз это значение будет увеличиваться на 1. Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 4 итерации.

А с помощью выражения people[i] можно получить элемент массива для его последующего вывода в браузере.

Необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

var people = ["Tom", "Alice", "Bob", "Sam"];
for (var i = people.length - 1; i >= 0; i--) {
    console.log(people[i]);
}

В данном случае массив выводится с конца, а перебор массива начинается с i = 3 до i = 0.

2.10.2. Цикл for..in

Цикл for..in предназначен для перебора массивов и объектов. Его формальное определение:

for (индекс in массив) {
    // действия
}

Например, переберем элементы массива:

var people = ["Tom", "Alice", "Bob", "Sam"];
for (var index in people) {
    console.log(people[index]);
}

2.10.3. Цикл for…​of

Цикл for…​of похож на цикл for…​in и предназначен для перебора коллекций, например, массивов:

let users = ["Tom", "Bob", "Sam"];
for (let val of users) {
    console.log(val);
}

Текущий перебираемый элемент коллекции помещается в переменную val, значение которой затем выводится на консоль.

2.10.4. Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

while (условие) {
    // действия
}

Опять же выведем с помощью while элементы массива:

var people = ["Tom", "Alice", "Bob", "Sam"];
var index = 0;
while (index < people.length) {
    console.log(people[index]);
    index++;
}

Цикл while здесь будет выполняться, пока значение index не станет равным длине массива.

2.10.5. Цикл do..while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:

var x = 1;
do {
    console.log(x * x);
    x++;
} while (x < 10)

Здесь код цикла сработает 9 раз, пока x не станет равным 10. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

2.10.6. Операторы continue и break

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае можно воспользоваться оператором break:

var array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ];
for (var i = 0; i < array.length; i++) {
    if (array[i] > 10) {
        break;
    }
    document.write(array[i] + "</br>");
}

Данный цикл перебирает все элементы массива, однако последние четыре элемента не будут выведены в браузере, поскольку поверка if (array[i] > 10) прервет выполнение цикла с помощью оператора break, когда перебор массива дойдет до элемента 12.

Если необходимо просто пропустить итерацию, но не выходить из цикла, можно применять оператор continue.

var array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ];
for (var i = 0; i < array.length; i++) {
    if (array[i] > 10) {
        continue;
    }
    document.write(array[i] + "</br>");
}

В этом случае, если программа встретит в массиве число, больше 10, то это число не будет выводиться в браузере.

function имя_функции([параметр [, ...]]) {
    // Инструкции
}

function display() {
    console.log("функция в JavaScript");
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        function display() {
            console.log("функция в JavaScript");
        }
        display();
    </script>
</body>
</html>

var display = function() { // определение функции
    console.log("функция в JavaScript");
}
display();

function goodMorning() {
    console.log("Доброе утро");
}

function goodEvening() {
    console.log("Добрый вечер");
}

var message = goodMorning;
message();
message = goodEvening;
message();

3.1.1. Параметры функции

Рассмотрим передачу параметров:

function display(x) { // определение функции
    var z = x * x;
    console.log(x + " в квадрате равно " + z);
}
display(5); // вызов функции

Функция display принимает один параметр — x. Поэтому при вызове функции можно передать для него значение, например, число 5, как в данном случае.

Если функция принимает несколько параметров, то с помощью spread-оператора …​ можно передать набор значений для этих параметров из массива:

function sum(a, b, c) {
    let d = a + b + c;
    console.log(d);
}

sum(1, 2, 3);
let nums = [4, 5, 6];
sum(...nums);

Во втором случае в функцию передается числа из массива nums. Но чтобы передавался не просто массив, как одно значение, а именно числа из этого массива, применяется spread-оператор …​.

3.1.2. Необязательные параметры

Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение undefined.

function display(x, y) {
    if(y === undefined) y = 5;
    if(x === undefined) x = 8;
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

Здесь функция display принимает два параметра. При вызове функции можно проверить их значения. При этом, вызывая функцию, необязательно передавать для этих параметров значения. Для проверки наличия значения параметров используется сравнение со значением undefined.

Есть и другой способ определения значения для параметров по умолчанию:

function display(x = 5, y = 10) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

Если параметрам x и y не передаются значения, то они получаются в качестве значений числа 5 и 10 соответственно. Такой способ более лаконичен и интуитивен, чем сравнение с undefined.

При этом значение параметра по умолчанию может быть производным, представлять выражение:

function display(x = 5, y = 10 + x) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

В данном случае значение параметра y зависит от значения x.

При необходимости можно получить все переданные параметры через глобально доступный массив arguments:

function display() {
    var z = 1;
    for (var i = 0; i < arguments.length; i++) {
        z *= arguments[i];
    }
    console.log(z);
}
display(6);
display(6, 4);
display(6, 4, 5);

При этом даже неважно, что при определении функции не указаны параметры, все равно можно их передать и получить значения через массив arguments.

3.1.3. Неопределенное количество параметров

С помощью spread-оператора можно указать, что с помощью параметра можно передать переменное количество значений:

function display(season, ...temps) {
    console.log(season);
    for (index in temps) {
        console.log(temps[index]);
    }
}
display("Весна", -2, -3, 4, 2, 5);
display("Лето", 20, 23, 31);

В данном случае второй параметр …​temps указывает, что вместо него можно передать разное количество значений. В самой функции temps фактически представляет массив переданных значений, которые можно получить. При этом несмотря на это, при вызове функции в нее передается не массив, а именно отдельные значения.

Весна
-2
-3
4
2
5
Лето
20
23
31

Но нужно учесть, что каждое значение будет выведено с новой строки.

3.1.4. Результат функции

Функция может возвращать результат. Для этого используется оператор return:

var y = 5;
var z = square(y);
console.log(y + " в квадрате равно " + z);

function square(x) {
    return x * x;
}

После оператора return идет значение, которое надо возвратить из метода. В данном случае это квадрат числа х.

После получения результата функции можно присвоить его какой-либо другой переменной:

3.1.5. Функции в качестве параметров

Функции могут выступать в качестве параметров других функций:

function sum(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

function operation(x, y, func) {
    var result = func(x, y);
    console.log(result);
}

console.log("Sum");
operation(10, 6, sum);
console.log("Subtract");
operation(10, 6, subtract);

Функция operation принимает три параметра: x, y и func. func — представляет функцию, причем на момент определения operation не важно, что это будет за функция. Единственное, что известно, что функция func может принимать два параметра и возвращать значение, которое затем отображается в консоли браузера. Поэтому можно определить различные функции (например, функции sum и subtract в данном случае) и передавать их в вызов функции operation.

3.1.6. Возвращение функции из функции

Одна функция может возвращать другую функцию:

function menu(n) {
    if (n == 1)
        return function(x, y) { return x + y;}
    else if(n == 2)
        return function(x, y) { return x - y;}
    else if(n == 3)
        return function(x, y) { return x * y;}
    return undefined;
}

for (var i=1; i < 5; i++) {
    var action = menu(i);
    if (action !== undefined) {
        var result = action(5, 4);
        console.log(result);
    }
}

В данном случае функция menu в зависимости от переданного в нее значения возвращает одну из трех функций или undefined.

3.2.1. Глобальные переменные

Все переменные, которые объявлены вне функций, являются глобальными:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        var x = 5;
        let d = 8;
        function displaySquare() {
            var z = x * x;
            console.log(z);
        }
    </script>
</body>
</html>

Здесь переменные x и d являются глобальными. Они доступны из любого места программы. А вот переменная z глобальной не является, так как она определена внутри функции.

3.2.2. Локальные переменные

Переменная, определенная внутри функции, является локальной:

function displaySquare() {
    var z = 10;
    console.log(z);

    let b = 8;
    console.log(b);
}

Переменные z и b являются локальными, они существуют только в пределах функции. Вне функции их нельзя использовать:

function displaySquare() {
    var z = 10;
    console.log(z);
}
console.log(z); // ошибка, так как z не определена

Когда функция заканчивает свою работу, то все переменные, определенные в функции, уничтожаются.

3.2.3. Сокрытие переменных

Что если у нас есть две переменных — одна глобальная, а другая локальная, которые имеют одинаковое имя:

var z = 89;
function displaySquare() {
    var z = 10;
    console.log(z);
}
displaySquare();

В этом случае в функции будет использоваться та переменная z, которая определена непосредственно в функции. То есть локальная переменная скроет глобальную переменную.

3.2.4. var или let

При использовании оператора let каждый блок кода определяет новую область видимости, в которой существует переменная. Например, можно одновременно определить переменную на уровне блока и на уровне функции:

let z = 10;
function displayZ() {
    let z = 20;
    {
        let z = 30;
        console.log("Block: ", z);
    }
    console.log("Function: ", z);
}

displayZ();
console.log("Global: ", z)

Здесь внутри функции displayZ() определен блок кода, в котором определена переменная z. Она скрывает глобальную переменную и переменную z, определенную на уровне функции. В реальной программе блок мог быть предоставлять вложенную функцию, блок цикла for или конструкции if. Но в любом случае такой блок определяет новую область видимости, вне которого переменная не существует.

И в данном случае получим следующий консольный вывод:

Block: 30
Function: 20
Global: 10

С помощью оператора var можно определить одновременно переменную с одним и тем же именем и в функции, и в блоке кода в этой функции:

var c = 10;
function displaySquare() {
    var c = 20;
    {
        var c = 30;
        console.log("Block:", c);
    }
    console.log("Function:", c);
}
displaySquare()
console.log("Global:", c)

Block: 30
Function: 30
Global: 10

Но стоит обратить внимание, что переменная введенная в общем коде и на уровне функции/блока функции — это переменные с разным уровнем видимости (глобальным и на уровни функции соответственно).

3.2.5. Константы

Все, что относится к оператору let, относится и к оператору const, который позволяет определить константы. Блоки кода задают область видимости констант, а константы, определенные на вложенных блоках кода, скрывают внешние константы с тем же именем:

const d = 10;
function displayZ() {
    const d = 20;
    {
        const d = 30;
        console.log("Block:", d);
    }
    console.log("Function:", d);
}

displayZ();
console.log("Global:", d);

Block: 30
Function: 20
Global: 10

3.2.6. Необъявленные переменные

Если не используется ключевое слово при определении переменной в функции, то такая переменная будет глобальной.

function bar() {
    foo = "25";
}
bar();
console.log(foo);

Несмотря на то, что вне функции bar переменная foo нигде не определяется, тем не менее она доступна вне функции во внешнем контексте.

Иначе, если не только присвоить значение переменной, но и переопределить ее:

function bar() {
    var foo = "25";
}

bar();
console.log(foo);

Uncaught ReferenceError: foo is not defined

3.2.7. strict mode

Определение глобальных переменных в функциях может вести к потенциальным ошибкам. Чтобы их избежать используется строгий режим или strict mode:

"use strict";
function bar() {
    foo = "25";
}

bar();
console.log(foo);

Uncaught ReferenceError: assignment to undeclared variable foo

Установить режим strict mode можно двумя способами:

• Внешняя функция, которая определяет некоторую область видимости и в которой определены некоторые переменные — лексическое окружение

• Переменные (лексическое окружение), которые определены во внешней функции

• Вложенная функция, которая использует эти переменные

function outer() { // внешняя функция
    var n; // некоторая переменная
    return inner() { // вложенная функция
        // действия с переменной n
    }
}

3.3.1. Пример

Рассмотрим замыкания на простейшем примере:

function outer() {
    let x = 5;
    function inner() {
        x++;
        console.log(x);
    };
    return inner;
}
let fn = outer(); // fn = inner, так как функция outer возвращает функцию inner
// вызываем внутреннюю функцию inner
fn();
fn();
fn();

Здесь функция outer задает область видимости, в которой определены внутренняя функция inner и переменная x. Переменная x представляет лексическое окружение для функции inner. В самой функции inner инкрементируем переменную x и выводим ее значение на консоль. В конце функция outer возвращает функцию inner.

Далее вызываем функцию outer:

Поскольку функция outer возвращает функцию inner, то переменная fn будет хранить ссылку на функцию inner. При этом эта функция запомнила свое окружение — то есть внешнюю переменную x.

Далее фактически три раза вызываем функцию Inner, и видно, что переменная x, которая определена вне функции inner, инкрементируется:

То есть несмотря на то, что переменная x определена вне функции inner, эта функция запомнила свое окружение и может его использовать, несмотря на то, что она вызывается вне функции outer, в которой была определена. В этом и суть замыканий.

3.3.2. Пример

Рассмотрим следующий пример:

function multiply(n) {
    var x = n;
    return function(m) { return x * m;};
}
var fn1 = multiply(5);
var result1 = fn1(6);
console.log(result1);

var fn2= multiply(4);
var result2 = fn2(6);
console.log(result2);

Итак, здесь вызов функции multiply() приводит к вызову другой внутренней функции. Внутренняя же функция:

function(m) { return x * m;};

Запоминает окружение, в котором она была создана, в частности, значение переменной x.

В итоге при вызове функции multiply определяется переменная fn1, которая и представляет собой замыкание, то есть объединяет две вещи: функцию и окружение, в котором функция была создана. Окружение состоит из любой локальной переменной, которая была в области действия функции multiply во время создания замыкания.

То есть fn1 — это замыкание, которое содержит и внутреннюю функцию function(m) { return x * m;}, и переменную x, которая существовала во время создания замыкания.

При создании двух замыканий: fn1 и fn2, для каждого из этих замыканий создается свое окружение.

При этом важно не запутаться в параметрах. При определении замыкания:

Число 5 передается для параметра n функции multiply.

При вызове внутренней функции:

Число 6 передается для параметра m во внутреннюю функцию function(m) { return x * m;};.

Также можно использовать другой вариант для вызова замыкания:

function multiply(n) {
    var x = n;
    return function(m) { return x * m;};
}
var result = multiply(5)(6);
console.log(result);

(function() {
    console.log("Привет мир");
}());

(function (n) {
    var result = 1;
    for (var i = 1; i <= n; i++)
        result *=i;
    console.log("Факториал числа " + n + " равен " + result);
}(4));

Привет мир
Факториал числа 4 равен 24

let foo = (function() {
    let obj = {greeting: "hello"};
    return {
        display: function() {
            console.log(obj.greeting);
        }
    }
})();
foo.display();

return {
    display: function() {
        console.log(obj.greeting);
    }
}

let calculator = (function() {
    let data = { number: 0};

    return {
        sum: function(n) {
            data.number += n;
        },
        subtract: function(n) {
            data.number -= n;
        },
        display: function() {
            console.log("Result: ", data.number);
        }
    }
})();
calculator.sum(10);
calculator.sum(3);
calculator.display();
calculator.subtract(4);
calculator.display();

function getFactorial(n) {
    if (n === 1) {
        return 1;
    } else {
        return n * getFactorial(n - 1);
    }
}
var result = getFactorial(4);
console.log(result);

var result = 4 * getFactorial(3);
var result = 4 * 3 * getFactorial(2);
var result = 4 * 3 * 2 * getFactorial(1);
var result = 4 * 3 * 2 * 1; // 24

function getFibonachi(n) {
    if (n === 0) {
        return 0;
    }
    if (n === 1) {
        return 1;
    } else {
        return getFibonachi(n - 1) + getFibonachi(n - 2);
    }
}
var result = getFibonachi(8);
console.log(result);

function display() {
    console.log("Доброе утро");
    display = function() {
        console.log("Добрый день");
    }
}

display();
display();

function display() {
    console.log("Доброе утро");
    display = function() {
        console.log("Добрый день");
    }
}
// присвоение ссылки на функцию до переопределения
var displayMessage = display;
display();
display();
displayMessage();
displayMessage();

Доброе утро
Добрый день
Доброе утро
Доброе утро

display();
display();
var displayMessage = display;
displayMessage();
displayMessage();

Доброе утро
Добрый день
Добрый день
Добрый день

Uncaught ReferenceError: foo is not defined

console.log(foo);
var foo = "Tom";

var c = a * b;
var a = 7;
var b = 3;
console.log(c);

display();

function display() {
    console.log("Hello Hoisting");
}

display();

var display = function () {
    console.log("Hello Hoisting");
}

TypeError: display is not a function

3.9.1. Передача параметров по значению

Строки, числа, логические значения передаются в функцию по значению. Иными словами при передаче значения в функцию, эта функция получает копию данного значения. Рассмотрим, что это значит в практическом плане:

function change(x) {
    x = 2 * x;
    console.log("x in change:", x);
}

var n = 10;
console.log("n before change:", n);
change(n);
console.log("n after change:", n);

n before change: 10
x in change: 20
n after change: 10

Функция change получает некоторое число и увеличивает его в два раза. При вызове функции change ей передается число n. Однако после вызова функции видно, что число n не изменилось, хотя в самой функции произошло увеличение значения параметра. Потому что при вызове функция change получает копию значения переменной n. И любые изменения с этой копией никак не затрагивают саму переменную n.

3.9.2. Передача по ссылке

Объекты и массивы передаются по ссылке. То есть функция получает сам объект или массив, а не их копию.

function change(user) {
    user.name = "Tom";
}

var bob = {
    name: "Bob"
};
console.log("before change:", bob.name);
change(bob);
console.log("after change:", bob.name);

В данном случае функция change получает объект и меняет его свойство name. В итоге увидим, что после вызова функции изменился оригинальный объект bob, который передавался в функцию.

Однако если переустановить объект или массив полностью, оригинальное значение не изменится.

function change(user) {
    // полная переустановка объекта
    user= {
        name:"Tom"
    };
}

var bob = {
    name: "Bob"
};
console.log("before change:", bob.name);
change(bob);
console.log("after change:", bob.name);

То же самое касается массивов:

function change(array) {
    array[0] = 8;
}

function changeFull(array) {
    array = [9, 8, 7];
}

var numbers = [1, 2, 3];

console.log("before change: ", numbers);
change(numbers);
console.log("after change: ", numbers);
changeFull(numbers);
console.log("after changeFull: ", numbers);

before change: [ 1, 2, 3 ]
after change: [ 8, 2, 3 ]
after changeFull: [ 8, 2, 3 ]

let sum = (x, y) => x + y;
let a = sum(4, 5); // 9
let b = sum(10, 5); // 15

let sum = (x, y) => console.log(x + y);
sum(4, 5); // 9
sum(10, 5); // 15

var square = n => n * n;

console.log(square(5));
console.log(square(6));
console.log(square(-7));

var square = n => {
    let result = n * n;
    return result;
}

console.log(square(5));

let user = (userName, userAge) => ({name: userName, age: userAge});

let tom = user("Tom", 34);
let bob = user("Bob", 25);

console.log(tom.name, tom.age);
console.log(bob.name, bob.age);

var hello = () => console.log("Hello World");
hello();
hello();

4.1.1. Создание нового объекта

Есть несколько способов создания нового объекта.

Первый способ заключается в использовании конструктора Object:

В данном случае объект называется user. Он определяется так же, как и любая обычная переменная с помощью ключевого слова var.

Выражение new Object() представляет вызов конструктора — функции, создающей новый объект. Для вызова конструктора применяется оператор new. Вызов конструктора фактически напоминает вызов обычной функции.

Второй способ создания объекта представляет использование фигурных скобок:

Более распространенным является второй способ создания объекта.

4.1.2. Свойства объекта

После создания объекта можно определить в нем свойства. Чтобы определить свойство, надо после названия объекта через точку указать имя свойства и присвоить ему значение:

var user = {};
user.name = "Tom";
user.age = 26;

В данном случае объявляются два свойства name и age, которым присваиваются соответствующие значения. После этого появляется возможность использовать эти свойства:

console.log(user.name);
console.log(user.age);

Также можно определить свойства при определении объекта:

var user = {
    name: "Tom",
    age: 26
};

В этом случае для присвоения значения свойству используется символ двоеточия, а после определения свойства ставится запятая (а не точка с запятой).

Кроме того, доступен сокращенный способ определения свойств:

var name = "Tom";
var age = 34;
var user = {name, age};
console.log(user.name);
console.log(user.age);

4.1.3. Методы объекта

Методы объекта определяют его поведение или действия, которые он производит. Методы представляют собой функции. Например, определим метод, который бы выводил имя и возраст человека:

var user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
    console.log(user.name);
    console.log(user.age);
};

// вызов метода
user.display();

Как и в случае с функциями методы сначала определяются, а потом уже вызываются.

Также методы могут определяться непосредственно при определении объекта:

var user = {
    name: "Tom",
    age: 26,
    display: function() {
        console.log(this.name);
        console.log(this.age);
    }
};

Как и в случае со свойствами, методу присваивается ссылка на функцию с помощью знака двоеточия.

Чтобы обратиться к свойствам или методам объекта внутри этого объекта, используется ключевое слово this. Оно означает ссылку на текущий объект.

Также можно использовать сокращенный способ определения методов, когда двоеточие и слово function опускаются:

var user = {
    name: "Tom",
    age: 26,
    display() {
        console.log(this.name, this.age);
    },
    move(place) {
        console.log(this.name, "goes to", place);
    }
};

user.display();
user.move("the shop");

Tom 26
Tom goes to the shop

4.1.4. Синтаксис массивов

Существует также альтернативный способ определения свойств и методов с помощью синтаксиса массивов:

var user = {};
user["name"] = "Tom";
user["age"] = 26;
user["display"] = function() {
    console.log(user.name);
    console.log(user.age);
};

// вызов метода
user["display"]();

Название каждого свойства или метода заключается в кавычки и в квадратные скобки, затем им также присваивается значение. Например, user["age"] = 26.

При обращении к этим свойствам и методам можно использовать либо нотацию точки user.name, либо обращаться так: user["name"].

4.1.5. Строки в качестве свойств и методов

Названия свойств и методов объекта всегда представляют строки. То есть предыдущее определение объекта можно переписать так:

var user = {
    "name": "Tom",
    "age": 26,
    "display": function() {
        console.log(user.name);
        console.log(user.age);
    }
};
// вызов метода
user.display();

С одной стороны, разницы никакой нет между двумя определениями. С другой стороны, бывают случаи, где заключение названия в строку могут помочь. Например, если название свойства состоит из двух слов, разделенных пробелом:

var user = {
    name: "Tom",
    age: 26,
    "full name": "Tom Johns",
    "display info": function() {
        console.log(user.name);
        console.log(user.age);
    }
};
console.log(user["full name"]);
user["display info"]();

В этом случае для обращения к подобным свойствам и методам мы должны использовать синтаксис массивов.

4.1.6. Удаление свойств

Удалять свойства и методы необходимо с помощью оператора delete. Как и в случае с добавлением удалять свойства можно двумя способами. Первый способ — использование нотации точки:

Либо использовать синтаксис массивов:

delete объект["свойство"]

var user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
    console.log(user.name);
    console.log(user.age);
};

console.log(user.name);
delete user.name; // удаляем свойство
// альтернативный вариант
// delete user["name"];
console.log(user.name);

После удаления свойство будет не определено, поэтому при попытке обращения к нему, программа вернет значение undefined.

var country = {
    name: "Германия",
    language: "немецкий",
    capital: {
        name: "Берлин",
        population: 3375000,
        year: 1237
    }
};
console.log("Столица: " + country.capital.name);
console.log("Население: " + country["capital"]["population"]);
console.log("Год основания: " + country.capital["year"]);

country["capital"]["population"]

capital:{
        name: "Берн",
        population: 126598
    },
    cities: [
        { name: "Цюрих", population: 378884},
        { name: "Женева", population: 188634},
        { name: "Базель", population: 164937}
    ]
};

// вывод всех элементов из country.languages
document.write("<h3>Официальные языки Швейцарии</h3>");
for (var i = 0; i < country.languages.length; i++) {
    document.write(country.languages[i] + "<br>");
}

// вывод всех элементов из country.cities
document.write("<h3>Города Швейцарии</h3>");
for (var i = 0; i < country.cities.length; i++) {
    document.write(country.cities[i].name + "<br>");
}

var user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
    console.log(user.name);
    console.log(user.age);
};

var hasNameProp = "name" in user;
console.log(hasNameProp);
var hasWeightProp = "weight" in user;
console.log(hasWeightProp);

var hasNameProp = user.name !== undefined;
console.log(hasNameProp);
var hasWeightProp = user.weight !== undefined;
console.log(hasWeightProp);

var hasNameProp = user.hasOwnProperty('name');
console.log(hasNameProp);
var hasDisplayProp = user.hasOwnProperty('display');
console.log(hasDisplayProp);
var hasWeightProp = user.hasOwnProperty('weight');
console.log(hasWeightProp);

4.3.1. Перебор свойств и методов

С помощью цикла for мы можем перебрать объект как обычный массив и получить все его свойства и методы и их значения:

var user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
    console.log(user.name);
    console.log(user.age);
};
for (var key in user) {
    console.log(key + " : " + user[key]);
}