Багато блискучих нових функцій вийшло з ES2015 (ES6). І ось, починаючи з 2020 року, передбачається, що багато розробників JavaScript ознайомились і почали використовувати ці функції.
Хоча це припущення може бути частково вірним, все ж можливо, що деякі з цих функцій залишаться загадкою для деяких розробників.
Однією з особливостей ES6 є додавання let
і const
, яка може бути використана для оголошення змінних. Питання в тому, чим вони відрізняються від хороших старих, var
якими ми користуємось? Якщо ви все ще незрозумілі з цим, ця стаття для вас.
У цій статті ми обговоримо var
, let
і const
щодо їх охоплення, використання і підйом. Читаючи, зверніть увагу на відмінності між ними, на які я вкажу.
Var
До появи ES6 var
правили декларації. Однак існують проблеми, пов'язані зі змінними, оголошеними з var
. Ось чому було необхідно появу нових способів оголошення змінних. По-перше, давайте зрозуміємо var
більше, перш ніж обговорювати ці питання.
Сфера застосування var
Область дії по суті означає, де ці змінні доступні для використання. var
декларації мають глобальний масштаб або функціонують / локально.
Область дії є глобальною, коли var
змінна оголошується поза функцією. Це означає, що будь-яка змінна, яка оголошена var
поза функціональним блоком, доступна для використання у всьому вікні.
var
це функція, коли область оголошена в межах функції. Це означає, що він доступний і доступ до нього можна отримати лише в межах цієї функції.
Щоб зрозуміти далі, подивіться на приклад нижче.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; }
Тут greeter
глобально застосовується область дії, оскільки вона існує поза функцією, тоді hello
як функція сфери дії. Отже, ми не можемо отримати доступ до змінної hello
поза функцією. Отже, якщо ми зробимо це:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined
Ми отримаємо помилку, яка є результатом hello
недоступності поза функцією.
змінні var можуть бути повторно оголошені та оновлені
Це означає, що ми можемо робити це в одному і тому ж обсязі і не отримуватиме помилки.
var greeter = "hey hi"; var greeter = "say Hello instead";
і це також
var greeter = "hey hi"; greeter = "say Hello instead";
Підйом вар
Піднімання - це механізм JavaScript, де змінні та оголошення функцій переміщуються у верхню частину області дії перед виконанням коду. Це означає, що якщо ми зробимо це:
console.log (greeter); var greeter = "say hello"
це трактується так:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
Отже, var
змінні піднімаються у верхню частину області дії та ініціалізуються зі значенням undefined
.
Проблема з var
Є слабкість, яка виникає var
. Я буду використовувати приклад нижче, щоб пояснити:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
Отже, оскільки times > 3
повертає true, greeter
перевизначається на "say Hello instead"
. Хоча це не проблема, якщо ви свідомо хочете greeter
бути перевизначеною, вона стає проблемою, коли ви не розумієте, що змінна greeter
вже була визначена раніше.
Якщо ви використовували greeter
в інших частинах коду, ви можете бути здивовані результатом, який ви можете отримати. Це, ймовірно, призведе до багатьох помилок у вашому коді. Ось чому let
і const
необхідні.
Дозволяє
let
тепер є кращим для оголошення змінних. Це не дивно, оскільки це покращення var
декларацій. Це також вирішує проблему з тим, var
що ми щойно висвітлили. Давайте розглянемо, чому це так.
нехай блокується область дії
Блок - це частина коду, обмежена {}. Блок живе в фігурних дужках. Все, що знаходиться в фігурних дужках, - це блок.
Отже, змінна, оголошена в блоці з let
, доступна лише для використання в цьому блоці. Поясню це на прикладі:
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined
Ми бачимо, що використання hello
поза його блоку (фігурні дужки, де це було визначено) повертає помилку. Це пов’язано з тим, що let
змінні мають блоковий обсяг.
нехай може бути оновлений, але не повторно оголошений.
Як і var
змінна, оголошена за допомогою, let
може бути оновлена в межах своєї сфери дії. В відміну var
, А let
змінна не може бути повторно оголошено в межах його обсягу. Отже, поки це буде працювати:
let greeting = "say Hi"; greeting = "say Hello instead";
це поверне помилку:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Однак, якщо одна і та ж змінна визначена в різних сферах, помилки не буде:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
Чому немає помилок? Це пояснюється тим, що обидва екземпляри розглядаються як різні змінні, оскільки вони мають різні сфери дії.
This fact makes let
a better choice than var
. When using let
, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.
Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var
does not happen.
Hoisting of let
Just like var
, let
declarations are hoisted to the top. Unlike var
which is initialized as undefined
, the let
keyword is not initialized. So if you try to use a let
variable before declaration, you'll get a Reference Error
.
Const
Variables declared with the const
maintain constant values. const
declarations share some similarities with let
declarations.
const declarations are block scoped
Like let
declarations, const
declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const
remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const
, we can neither do this:
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable.
nor this:
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared
Every const
declaration, therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const
. While a const
object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const
object as this:
const greeting = { message: "say Hi", times: 4 }
while we cannot do this:
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable.
we can do this:
greeting.message = "say Hello instead";
This will update the value of greeting.message
without returning errors.
Hoisting of const
Just like let
, const
declarations are hoisted to the top but are not initialized.
So just in case you missed the differences, here they are:
var
declarations are globally scoped or function scoped whilelet
andconst
are block scoped.var
variables can be updated and re-declared within its scope;let
variables can be updated but not re-declared;const
variables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
var
variables are initialized withundefined
,let
andconst
variables are not initialized. - While
var
andlet
can be declared without being initialized,const
must be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)