1. JavaScript оператор try/catch/finally
При написании кода очень часто случаются ошибки, и для обработки этих ошибок в JS есть 4 оператора. Это попробовать, поймать, бросить и, наконец.
Синтаксис:
try {
Lines of code
}
catch(err) {
Lines of code to check errors
}
finally {
Lines of code which must be executed after try and catch
}
Пример:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Error Handling</title>
</head>
<body>
<h3>Error Handling in JS</h3>
<p id=”errorMessage”></p>
<p id=”finally”></p>
<script type = “text/javascript”>
try
{
const result = Multiplication(10, 20); // Multiplication is not defined
}
catch(err){
document.getElementById(“error Message”).innerHTML = err;
}
finally{
document.getElementById(“finally”).innerHTML = “JS error check done!”;
}
</script>
</body>
</html>
2. Оператор броска JavaScript
Если мы хотим добавить пользовательскую ошибку, то требуется оператор throw. Вот пример того, как мы можем использовать оператор throw при обработке ошибок.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Throw error JS</title>
</head>
<body>
<p id=”demo”></p>
<p id=”errorMessage”></p>
<p id=”finally”></p>
<script type=”text/javascript”>
const number1 = 5, number2 = 5;
const sum = “SUM”;
document.getElementById(“demo”).innerHTML = sum;
try {
if (sum !== 10) throw “Result is not correct!”;
}
catch (err) {
document.getElementById(“errorMessage”).innerHTML = err;
}
finally{
document.getElementById(“finally”).innerHTML = “JS throw error check done!”;
}
</script>
</body>
</html>
3. Комментирование JS
Иногда нужно добавить комментарий в код, чтобы сделать его понятным для других программистов. JavaScript позволяет кодам добавлять комментарии в коды двумя способами.
Первый — это однострочный комментарий, он начинается со знака // и продолжается до конца строки. Это означает, что выполнение не произошло в закомментированной строке.
Синтаксис:
// Add Comment
Пример:
// Add two numbers const number1 = 5; const number2 = 10; const sum = number1 + number2; // Sum is performed
Второй способ комментирования — это многострочный комментарий, и он нужен, когда кодер хочет кратко написать несколько строк о коде или несколько строк кода, которые кодер не хочет выполнять.
Синтаксис:
/* Add Comment Lines Add Comment Lines Add Comment Lines */
Пример:
/* const number1 = 5; const number2 = 10; const sum = number1 + number2; */ const number1, number2, sum; number1 = 5; number2 = 10; sum = number1 + number2;
Здесь первый блок кодов выполняться не будет.
4. Подъем JavaScript
Одним из наиболее значимых действий JavaScript по умолчанию является перемещение объявлений наверх, и это называется подъемом. Чтобы избежать непредвиденных ошибок, все переменные должны быть в начале каждой области, и это лучшая практика.
Чтобы понять эту тему, давайте рассмотрим 2 примера. Результат двух примеров не будет одинаковым из-за объявления переменных.
Пример:
<!DOCTYPE html>
<html>
<body>
<p id=”hoisting”></p>
<p id=”error”></p>
<script>
try {
const a = 10; // Initialize a
const b = 20; // Initialize b
display = document.getElementById(“hoisting”);
display.innerHTML = “a = “ + a + “ | b = “ + b;
}
catch(err){
document.getElementById(“error”).innerHTML = err;
}
</script>
</body>
</html>
// Expected output: a = 10 | b = 20
<!DOCTYPE html>
<html>
<body>
<p id=”hoisting”></p>
<p id=”error”></p>
<script>
try {
const a = 10; // Initialize a
display = document.getElementById(“hoisting”);
display.innerHTML = “a = “ + a + “ | b = “ + b;
const b = 20; // Initialize b
}
catch(err){
document.getElementById(“error”).innerHTML = err;
}
</script>
</body>
</html>
// Expected output: ReferenceError: Cannot access ‘b’ before initialization
5. Объявления на уровне блоков
Объявления блочного уровня можно сделать двумя способами. Это:
1. Внутри функции
2. Внутри блока кода.
let Declarations
Синтаксис для синтаксиса объявления let такой же, как синтаксис для var. Чтобы объявить переменную, можно в основном заменить var на let, чтобы объявить переменную, но ограничение — только текущий блок кода.
Пример:
function getValue(condition) {
if (condition) {
let value = “black”;
// existing code
return value;
} else {
// value doesn’t exist here
return null;
}
// value doesn’t exist here
}
6. Связывание блоков в циклах
Для привязки блоков в циклах мы должны использовать let, а не var, потому что var поднимается.
Следуйте двум приведенным ниже примерам:
for (var i = 0; i < 10; i++) {
process(items[i]);
}
// here i is still accessible
console.log(i); // 10
Поскольку объявление var поднимается, переменная i по-прежнему доступна после завершения цикла. Чтобы игнорировать эту проблему, мы можем вместо этого использовать let, как в следующем коде:
for (let i = 0; i < 10; i++) {
process(items[i]);
}
// here i is not accessible and an error occured here
console.log(i);
В этом примере переменная i существует только в цикле for.
7. Функции со значениями параметров по умолчанию
Для инициализации функций со значениями по умолчанию в ES6 используются параметры по умолчанию. Параметр по умолчанию используется, когда аргумент либо исключен, либо не определен. Параметр по умолчанию может быть чем угодно, от числа до другой функции.
function sum(a, b = 5) {
return a * b;
}
console.log(sum(5, 2));
// expected output: 15
console.log(sum(5));
// expected output: 10
8. Оператор спреда
В общем, Spread Operator делает работу по конкатенации. В основном оператор распространения работает так же, как метод concat(). Это даст результат без изменения исходного значения массива переменных, где ожидается более 1 значения.
Например:
const num1 = [1, 2, 3, 4, 5]; const num2 = [6, 7, 8, 9, 10]; const num = […num1, …num2]; console.log(num) // expected output 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
9. Функция стрелки
Функция стрелки немного отличается от обычной функции и не может использоваться во всех ситуациях.
При сравнении с традиционной функцией это можно ясно понять.
Например, в общей функции:
const x=7, y=8;
let sum = function(p, q){
return p + q
};
console.log(sum(x,y));
В функции стрелки:
const x=7, y=8;
let sum = (p, q) => {return p + q};
console.log(sum(x,y));
10. Стили кодирования JS
Соглашение об именах
В JS рекомендуется использовать имя переменной и имя функции в формате camelCase.
Пример:
let firstName = “John”;
function multiplicationFunction(x, y) {
return x * y;
}
Пространство вокруг операторов
Необходимо использовать пробелы вокруг операторов, а также после запятых.
Пример:
const z = x + y; const arr = [“a”, “b”, “c”];
Отступ кода
2 пробела для отступа блока кода.
const sum = function(p, q){
return p + q
};
Длина строки
Если длина строки кода превышает 80 символов и он не помещается в одну строку, рекомендуется разбить строку на новую строку.
Пример:
document.getElementById(“error”).innerHTML = “JavaScript, often abbreviated as JS.”
Пустая строка между логическими блоками
Пример:
const x=7, y=8;
let sum = (p, q) => {return p + q};
console.log(sum(x,y));
