В этой статье я собираюсь рассмотреть 10 важных методов JavaScript, которые должен знать каждый, как начинающий, так и опытный JavaScript-разработчик.
Если вы только начали изучать JavaScript, эта статья особенно будет полезна.
IIFE
Immediately-invoked function expressions (IIFEs) — если переводить строго, то это функциональное выражение с моментальным вызовом.
То есть, это функция, которая позволяет нам определить анонимную функцию и сразу же ее вызвать, без использования ссылки.
Например:
let animal = function(name) {
return {
getAnimal: function() {
return name;
}
}
}("Crocodile");
console.log(animal.getAnimal());
// output: "Crocodile"В коде выше IIFE используется для создания объекта с помощью метода getAnimal(), а метод использует аргумент name в качестве возвращаемого значения, по сути, name здесь — это инкапсулированная (закрытая) часть возвращаемого объекта.
Temporal Dead Zone
Дословно «Временная мертвая зона».
Переменная, объявленная с помощью let или const, не может быть доступна до ее объявления в пределах ее области видимости. Это вызовет ошибку ссылки или инициализации. Эта ситуация называется Temporal Dead Zone.
console.log(animal); // Uncaught ReferenceError: animal is not defined
if(true) {
console.log(animal); // Uncaught ReferenceError: Cannot access 'animal' before initialization
const animal = "Parrot";
console.log(animal); // "Parrot"
}В примере выше мы получим ошибку до тех пор, пока не удалим вывод в консоль первых двух console.log. Только в последней консоли мы получим «Parrot».
Объявление объекта с константой
Вы можете объявлять объекты с помощью const, и это не препятствует изменению этого объекта. Но если вы попытаетесь присвоить значение этому объекту (например присвоить новый объект), он выдаст ошибку.
Например:
const animal = {
pet: "Cat",
wild: "Tiger",
};
// It works
animal.pet = "Dog";
console.log(animal.pet); // "Dog"
// It throws an error
// Uncaught TypeError: Assignment to constant variable
animal = {
pet: "Dog",
wild: "Tiger",
}Можно изменять свойство объекта, не вызывая ошибку, потому что это меняет содержимое объекта. Но если вы попытаетесь присвоить значение объекту, он выдаст ошибку, потому что вы пытаетесь изменить связь в памяти.
Здесь нужно обязательно помнить одну вещь: const предотвращает изменение самой константы, а не свойства внутри нее.
Сравнение переменных
Есть два разных способа сравнения значений объектов на предмет равенства в JavaScript.
Оператор Равенства, состоящий из двух знаков равно: ==
Оператор Строгого Равенства, который состоит из трех знаков равно: ===
При сравнении двух переменных оператор равенства проверяет только значение двух переменных, а оператор строгого равенства проверяет и значение, и тип данных.
Например:
const x = 8;
const y = "8";
console.log(x == y); // true
console.log(x === y); // falseВторой вывод в консоль возвращает false, потому что тип данных двух переменных не одинаковый. Здесь a — целое число, тогда как b — строка.
Хранение данных — web-storage
Данные web-storage содержатся в двух объектах внутри браузера и позволяют хранить пары ключ — значение в браузере:
session storage — разделяется между вкладками, у каждой новой вкладке свой storage, данные хранятся только во время этой «сессии», при закрытии вкладки данные стираются
local storage — длительное хранение данных, данные не имеют срока давности, после которого истекают и удаляются, даже при переустановке ОС или перезапуске браузера данные никуда не денутся
Теперь давайте посмотрим, как вы можете добавлять, извлекать и удалять данные из web-storage.
Есть три метода, используя которые мы можем это сделать:
Storage.setItem(key, value) — позволяет нам сохранять данные в хранилище. Он принимает два параметра. Первый — это имя элемента, который вы хотите добавить, а второй — его значение (как в объекте);
Storage.getItem(key) — позволяет нам получать данные. Он принимает один параметр, который является именем элемента данных, который вы хотите получить. Затем он возвращает значение элемента;
Storage.removeItem(key) — позволяет нам удалять данные. Он принимает один параметр, который является именем элемента данных, который вы хотите удалить. Затем он удаляет элемент из веб-хранилища.
Hoisting
Hoisting — то есть всплытие, поднятие; это механизм, при котором переменные и объявления функции поднимаются вверх по своей области видимости перед выполнением кода. Одним из преимуществ подъема является то, что он позволяет нам использовать функции перед их объявлением в коде.
myPet("Cat");
function myPet(pet) {
console.log(`My pet is ${pet}`);
}
// The result of the code above is `My pet is Cat`Object.freeze()
Object.freeze() — метод замораживает объект, и этот замороженный объект больше нельзя изменить, прям совсем. Вы не можете добавить или удалить какое-либо свойство замороженного объекта.
Давайте посмотрим демо, чтобы было понятнее:
const dish = {
first: "meat",
}
Object.freeze(dish);
dish.first = "fish";
dish.desert = "ice-cream";
delete dish.first;
console.log(dish); // {first: 'meat'}В коде выше я сначала создала объект dish, добавила туда свойство first. Следующим шагом я применила метод Object.freeze() к моему объекту, после применения этого метода я попыталась заменить существующее поле, добавить новое и удалить. В конце вывела в консоль мой объект, в результате видим, что объект не был изменен, поскольку он заморожен.
Object.seal()
Метод Object.seal() «запечатывает» объект. Он работает примерно так же, как Object.freeze().
Как и Object.freeze(), этот метод также предотвращает добавление и удаление свойств. Но отличие состоит в том, что значения существующих свойств все еще могут быть изменены, пока они доступны для записи.
Посмотрим демо:
const dish = {
first: "meat",
}
Object.seal(dish);
dish.first = "fish";
dish.desert = "ice-cream";
delete dish.first;
console.log(dish); // {first: 'fish'}Сначала я объявила объект dish со свойством first, а затем запечатала его методом Object.seal(). Поскольку объект запечатан, значение объекта можно изменить, что вы можете увидеть как результат, но добавить новые поля не получится, как и удалить существующие.
Как работает метод try…catch
Неважно, насколько хорошо мы программируем, иногда в наших скриптах есть ошибки. Что на самом деле происходит, когда в наших сценариях возникают ошибки?
Ответ на вопрос — скрипт перестает работать. А что, если наш код не будет умирать каждый раз, когда мы допустили ошибку, а будет выполнять какой-то функционал? Ведь это было бы идеально. И мы можем сделать это с помощью try…catch.
Как же работает try…catch:
В конструкции try…catch в первую очередь выполнится код, который лежит в в try { }
Если в try{} нет ошибки, то часть catch(err) игнорируется, выполнение достигает конца try{} и продолжается
Если возникает ошибка, выполнение try останавливается, и начинается выполнение catch(err). Ошибка будет содержать объект ошибки с подробной информацией о том, что произошло.
Именно с помощью такого функционала мы можем «отлавливать» ошибки и при этом не прекращать выполнение нашего кода.
Пример:
try {
ddddd;
console.log("Here is try");
} catch (error) {
console.log(`Here is error`);
console.log(error);
}
// Here is error
// ReferenceError: ddddd is not defined at index.js:78:5
console.log("Here is next code"); // this code is also executedИз примера выше видим, что отработал код, словил ошибку, я ее вывела в консоль, но и все что ниже, тоже было выполнено
Что нужно помнить при использовании try…catch
Есть кое-что, что вам нужно помнить, когда вы используете try…catch в своем коде.
Во-первых, try...catch работает только для ошибок при выполнении (runtime errors). Это означает, что при использовании try...catch код должен быть «работоспособным». Другими словами, код должен быть синтаксически верным для JavaScript.
Вам станет ясно, когда вы увидите этот пример:
try {
}}}}}}
console.log("Here is try");
} catch (error) {
console.log(`Here is error`);
console.log(error);
}
// Uncaught SyntaxError: Missing catch or finally after try
console.log("Here is next code"); // this code will not executedВ примере выше код никогда не отработает верно, мы получаем синтаксическую ошибку, и эта ошибка не отловлена try...catch.
Во-вторых, try…catch работает синхронно. Это означает, что если выполнение происходит в «запланированном» коде, таком как setTimeout, ошибка не будет перехвачена. Это происходит потому, что функция выполняется позже, и движок уже вышел из конструкции.
try {
setTimeout(function() {
ddddd;
console.log("Here is try");
}, 1000)
} catch (error) {
console.log(`Here is error`);
console.log(error);
}
// index.js:79 Uncaught ReferenceError: ddddd is not defined at
console.log("Here is next code"); // this code will be executedЗапустив код выше, мы сначала увидим в консоли «Here is next code», а потом уже синтаксическую ошибку, не отловленную try…catch.
На этом все, если понравился материал, ставьте лайк. И если соберется достаточно лайков, напишу еще 10 полезных JS методов.
