Константы в JavaScript

JavaScript
На чтение 7 мин Просмотров 11 Опубликовано

Const в JavaScript — еще одно ключевое слово, введенное в ES6, которое используется для объявления переменной, доступной только для чтения, то есть переменной, значение которой не может быть переназначено.

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

Ключевое слово JavaScript const позволяет нам определить постоянное значение. Мы должны инициализировать его при объявлении переменной.

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

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

const firstName = "Ivaan"; // Defining a constant.
firstName = "Herry"; // throws read-only exception.

Здесь мы объявили переменную с именем firstName и указали, что мы не можем ее изменить, используя ключевое слово const.

Попытка скомпилировать этот код приведет к возникновению ошибки, сообщающей о том, что firstName — это свойство только для чтения, поскольку во второй строке кода мы пытаемся изменить значение firstName на строку «Herry».

Важно отметить, что константа никогда не может быть объявлена ​​без присвоения значения. Попытка объявить константу без ее присвоения приведет к ошибке SyntaxError.

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

const x; // raises a SyntaxError.
const x = 10; // works as expected.
Содержание
  1. Зачем нужно ключевое слово Const в JavaScript?
  2. Область действия ключевого слова Const в JavaScript
  3. Ссылки на объекты с использованием константных переменных в JavaScript
  4. Когда использовать Const или Let в JavaScript?
  5. Распространенные примеры на основе ключевого слова Const

Зачем нужно ключевое слово Const в JavaScript?

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

var const_pi = 3.14;
var r = 10;
document.write(const_pi * r * r); // output: 314.

Значение числа pi всегда должно быть постоянным. В приведенном выше коде все еще есть вероятность, что где-то в программе его значение может быть случайно изменено.

Для значения pi нет собственной защиты. Поэтому в ES6 было введено ключевое слово const, чтобы обеспечить собственную защиту константным переменным.

Таким образом, предыдущий код на ES6 следует записать следующим образом:

const pi = 3.141;
var r = 10;
document.write(pi * r * r); // output: 314.
pi = 4; // throws read-only exception.

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

Область действия ключевого слова Const в JavaScript

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

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

Пример 1:

<script>
 const x = 20; // accessible globally.
// Declare a function named myFunction.
   function myFunction()
   {
     document.write("Value of x: " +x+ "<br>");
     const y = 30; // accessible throughout function.
     if(true)
     {
       const z = 40; // accessible throughout the "if" statement.
       document.write("Value of y: " +y+ "<br>");
     }
    document.write(z);
   }
  myFunction(); // calling function.
</script>

Output:
       20
       30
       ReferenceError Exception

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

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

Например, рассмотрим следующий фрагмент кода:

Пример 2:

<script>
 function myFunction()
 {
   document.write("Variable declared with const keyword is not hoisted");
// Referenced before declaration.
   document.write(x);
   const x = 20; // ReferenceError because x is not defined.
   }
 myFunction(); // calling function.
</script>

Output:
      Variable declared with const keyword is not hoisted
      ReferenceError Exception

Ключевое различие между ключевыми словами let и const заключается в том, что переменным, объявленным с ключевым словом let, можно присвоить новое значение, тогда как переменным, объявленным с ключевым словом const, никогда нельзя присвоить новое значение (т. е. они являются неизменяемыми).

Ссылки на объекты с использованием константных переменных в JavaScript

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

Когда мы присваиваем объект или массив переменной, ссылка на объект является константой для этой переменной, а не для самого объекта.

Таким образом, содержимое массива или свойства объекта изменяемы, но ссылка на объект или массив неизменяема. Давайте рассмотрим пример программы, основанной на этих концепциях.

Пример 3:

<script>
 const x = {
       name1: "John",
       name2: "Deep",
       name3: "Ivaan"
   };
  document.write(x.name1+ "<br>");
  document.write(x.name2+ "<br>");
  document.write(x.name3+ "<br>");
    
// Reassigned of variable. 
   x = "Herry"; // throws read-only exception.
   document.write(x);
</script>

Output:
      John
      Deep
      Ivaan
      x is read only: Exception

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

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

Давайте рассмотрим простой пример, где мы найдем площадь и длину окружности круга и посмотрим на вывод. Посмотрите на фрагмент кода ниже.

Пример 4:

<script>
  const pi = 3.14;
  const r = 10;
  function calArea()
  {
    let area = pi * r * r;
    document.write("Area of circle: " +area+ "<br>");
  }
 function calCircumference()
 {
   let circum = 2 * pi * r;
   document.write("Circumference of circle: " +circum);
 }
 calArea();
 calCircumference();
</script>

Output:
      Area of circle: 314
      Circumference of circle: 62.80

Когда использовать Const или Let в JavaScript?

При написании кода на ES6 всегда используйте ключевое слово const для объявления переменных, значения которых не изменятся.

Используйте ключевое слово let только тогда, когда вам необходимо выполнить какие-либо изменения (переназначения) переменной, и полностью избегайте использования ключевого слова var.

Распространенные примеры на основе ключевого слова Const

Здесь мы собрали несколько общих примеров, основанных на ключевом слове const, которые следует практиковать. Посмотрите на следующий фрагмент кода.

1. const x; // SyntaxError: Missing initializer in const declaration.
2. const x = 10;
    document.write(x); // output: 10
    x = 20; // TypeError: Assignment to a constant variable.

3. if(true) {
      const name = "John";
    }
   document.write(name); // ReferenceError: name is not defined.

4. if(while) {
        const x = 20;
    }
    document.write(x); // ReferenceError: x is not defined.

5. function showMe(){
       const scName = "RSVM";
    }
     document.write(scName); // ReferenceError: scName is not defined.
6. const x = {
       a: 10,
       b: 20;
   };
   x = { a: 30, b: 40}; // It will not work.
   x.a = 60; // It will work because only a property of object x has been changed.

7. const x = 10;
   let y = x; // output: x = 10, y = 10
   y = 20; // output: x = 10, y = 20

В примере кода 7 x ссылается на примитивное число 10. Затем мы присвоили y то же значение, что и x. В этом случае x и y оба имеют одинаковое значение 10. Затем мы переназначили значение 20 для y, но x по-прежнему имеет значение 10.

8. Если мы присваиваем переменной непримитивное значение, это делается по ссылке. Поэтому, если происходят какие-либо изменения, они впоследствии повлияют на все ссылки на этот объект. Посмотрите на следующий фрагмент кода ниже:

const p = { value: 10};
 let q = p; // output: p.value = 10, q.value = 10;
 q.value = 20; // output: p.value = 20, q.value = 20;

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

9. Повторное объявление существующей переменной var в const не допускается в той же области действия. Посмотрите на пример ниже.

var x = 20; // allowed
const x = 30; // not allowed

10. Повторное объявление существующей переменной let в const не допускается в той же области действия. См. пример ниже.

let p = 20; // allowed
const p = 30; // not allowed

11. Переназначение существующей константной переменной не допускается в той же области действия. Например:

const a = 10; // allowed
var a = 20; // not allowed
let a = 30; // not allowed
const a = 50; // not allowed

12. Повторное объявление переменной с ключевым словом const разрешено в другой области действия блока или в другом блоке. Посмотрите на примеры ниже:

const firstName = "Deep"; // valid
{
    const firstName = "Herry"; // valid
}
{
    const firstName = "Ricky"; // valid
}

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

Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector