ES6 - Zmienne

ZA variablez definicji jest „nazwaną przestrzenią w pamięci”, w której przechowywane są wartości. Innymi słowy, działa jako kontener dla wartości w programie. Nazwy zmiennych są nazywaneidentifiers. Poniżej przedstawiono zasady nazewnictwa identyfikatora -

Identyfikatory nie mogą być słowami kluczowymi.
Identyfikatory mogą zawierać litery i cyfry.
Identyfikatory nie mogą zawierać spacji ani znaków specjalnych, z wyjątkiem podkreślenia (_) i znaku dolara ($).
Nazwy zmiennych nie mogą zaczynać się od liczby.

Składnia typu

Zmienna musi zostać zadeklarowana przed jej użyciem. Składnia ES5 wykorzystywała rozszerzenievarsłowo kluczowe, aby osiągnąć to samo. Składnia ES5 do deklarowania zmiennej jest następująca.

//Declaration using var keyword 
var  variable_name

ES6 wprowadza następującą składnię deklaracji zmiennych -

Korzystanie z let.
Używając const.

Variable initializationodnosi się do procesu przechowywania wartości w zmiennej. Zmienna może zostać zainicjowana w momencie jej deklaracji lub w późniejszym czasie.

Tradycyjna składnia typu ES5 do deklarowania i inicjowania zmiennej jest następująca -

//Declaration using var keyword 
var variable_name = value

Przykład: używanie zmiennych

var name = "Tom" 
console.log("The value in the variable is: "+name)

Powyższy przykład deklaruje zmienną i wyświetla jej wartość.

Następujące dane wyjściowe są wyświetlane po pomyślnym wykonaniu.

The value in the variable is Tom

JavaScript i dynamiczne pisanie

JavaScript jest językiem bez typowania. Oznacza to, że zmienna JavaScript może przechowywać wartość dowolnego typu danych. W przeciwieństwie do wielu innych języków, nie musisz mówić JavaScriptowi podczas deklaracji zmiennej, jaki typ wartości będzie przechowywana w zmiennej. Typ wartości zmiennej może się zmieniać podczas wykonywania programu, a JavaScript zajmuje się tym automatycznie. Ta funkcja jest określana jakodynamic typing.

JavaScriptVariable Scope

Zakres zmiennej to region twojego programu, w którym jest zdefiniowana. Tradycyjnie JavaScript definiuje tylko dwa zakresy - globalny i lokalny.

Global Scope - Dostęp do zmiennej o zasięgu globalnym można uzyskać z dowolnej części kodu JavaScript.
Local Scope - Dostęp do zmiennej o zasięgu lokalnym można uzyskać z poziomu funkcji, w której została zadeklarowana.

Przykład: zmienna globalna a zmienna lokalna

Poniższy przykład deklaruje dwie zmienne według nazwy num - jeden poza funkcją (zasięg globalny), a drugi w ramach funkcji (zasięg lokalny).

var num = 10 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) 
} 
console.log("value of num outside test() "+num) 
test()

Zmienna, do której odwołuje się funkcja, wyświetla wartość zmiennej o zasięgu lokalnym. Jednak zmiennanum po uzyskaniu dostępu poza funkcją zwraca wystąpienie o zasięgu globalnym.

Następujące dane wyjściowe są wyświetlane po pomyślnym wykonaniu.

value of num outside test() 10
value of num in test() 100

ES6 definiuje nowy zakres zmiennej - zakres blokowy.

Zakres „Let and Block”

Zakres blokowy ogranicza dostęp zmiennej do bloku, w którym jest zadeklarowana. Plikvarsłowo kluczowe przypisuje zakres funkcji do zmiennej. W przeciwieństwie do słowa kluczowego var, pliklet słowo kluczowe umożliwia skryptowi ograniczenie dostępu do zmiennej do najbliższego otaczającego bloku.

"use strict" 
function test() { 
   var num = 100 
   console.log("value of num in test() "+num) { 
      console.log("Inner Block begins") 
      let num = 200 
      console.log("value of num : "+num)  
   } 
} 
test()

Skrypt deklaruje zmienną numw lokalnym zakresie funkcji i ponownie deklaruje ją w bloku przy użyciu słowa kluczowego let. Wartość zmiennej o zasięgu lokalnym jest drukowana, gdy dostęp do zmiennej uzyskuje się poza blokiem wewnętrznym, podczas gdy zmienna o zasięgu blokowym jest określana w bloku wewnętrznym.

Note - Tryb ścisły to sposób wyrażenia zgody na ograniczony wariant JavaScript.

Następujące dane wyjściowe są wyświetlane po pomyślnym wykonaniu.

value of num in test() 100 
Inner Block begins 
value of num : 200

Przykład: niech v / s var

var no = 10; 
var no = 20; 
console.log(no);

Poniższe dane wyjściowe są wyświetlane po pomyślnym wykonaniu powyższego kodu.

Napiszmy ponownie ten sam kod przy użyciu let słowo kluczowe.

let no = 10; 
let no = 20; 
console.log(no);

Powyższy kod spowoduje zgłoszenie błędu: Identyfikator „nie” został już zadeklarowany. Każda zmienna zadeklarowana przy użyciu słowa kluczowego let ma przypisany zakres blokowy.

Pozwól i zablokuj bezpieczeństwo na poziomie

Jeśli spróbujemy zadeklarować letzmienna dwukrotnie w tym samym bloku, zwróci błąd. Rozważmy następujący przykład -

<script>
   let balance = 5000 // number type
   console.log(typeof balance)
   let balance = {message:"hello"} // changing number to object type
   console.log(typeof balance)
</script>

Powyższy kod spowoduje następujący błąd -

Uncaught SyntaxError: Identifier 'balance' has already been declared

niech i wiele bloków

Jednak to samo let zmienna może być używana w różnych zakresach poziomów bloków bez błędów składniowych.

Przykład

<script>
   let count = 100
   for (let count = 1;count <= 10;count++){
      //inside for loop brackets ,count value starts from 1
      console.log("count value inside loop is ",count);
   }
   //outside for loop brackets ,count value is 100
   console.log("count value after loop is",count);

   if(count == 100){
      //inside if brackets ,count value is 50
      let count = 50;
      console.log("count inside if block",count);
   }
   console.log(count);
</script>

Wynik powyższego kodu będzie następujący -

count value inside loop is 1
count value inside loop is 2
count value inside loop is 3
count value inside loop is 4
count value inside loop is 5
count value inside loop is 6
count value inside loop is 7
count value inside loop is 8
count value inside loop is 9
count value inside loop is 10
count value after loop is 100
count inside if block 50
100

Konst

Plik constdeklaracja tworzy odwołanie tylko do odczytu do wartości. Nie oznacza to, że wartość, którą posiada, jest niezmienna, po prostu nie można ponownie przypisać identyfikatora zmiennej. Stałe mają zasięg blokowy, podobnie jak zmienne zdefiniowane za pomocą instrukcji let. Wartość stałej nie może się zmienić przez ponowne przypisanie i nie można jej ponownie zadeklarować.

Poniższe reguły obowiązują dla zmiennej zadeklarowanej przy użyciu const słowo kluczowe -

Stałym nie można ponownie przypisać wartości.
Nie można ponownie zadeklarować stałej.
Stała wymaga inicjatora. Oznacza to, że stałe muszą zostać zainicjowane podczas deklaracji.
Wartość przypisana do const zmienna jest zmienna.

Przykład

const x = 10
x = 12 // will result in an error!!

Powyższy kod zwróci błąd, ponieważ stałym nie można ponownie przypisać wartości. Stałe zmienne są niezmienne.

Stałe są niezmienne

W przeciwieństwie do zmiennych zadeklarowanych przy użyciu let słowo kluczowe, constantssą niezmienne. Oznacza to, że nie można zmienić jego wartości. Przykładowo, jeśli spróbujemy zmienić wartość stałej zmiennej, zostanie wyświetlony błąd.

<script>
   let income = 100000
   const INTEREST_RATE = 0.08
   income += 50000 // mutable
   console.log("changed income value is ",income)
   INTEREST_RATE += 0.01
   console.log("changed rate is ",INTEREST_RATE) //Error: not mutable
</script>

Wynik powyższego kodu będzie następujący -

changed income value is 150000
Uncaught TypeError: Assignment to constant variable

const i tablice

Poniższy przykład pokazuje, jak utworzyć niezmienną tablicę. Do tablicy można dodawać nowe elementy. Jednak ponowna inicjalizacja tablicy spowoduje błąd, jak pokazano poniżej -

<script>
   const DEPT_NOS = [10,20,30,50]
   DEPT_NOS.push(40)
   console.log('dept numbers is ',DEPT_NOS)

   const EMP_IDS = [1001,1002,1003]
   console.log('employee ids',EMP_IDS)
   //re assigning variable employee ids
   EMP_IDS = [2001,2002,2003]
   console.log('employee ids after changing',EMP_IDS)
</script>

Wynik powyższego kodu będzie taki, jak pokazano poniżej -

dept numbers is (5) [10, 20, 30, 50, 40]
employee ids (3) [1001, 1002, 1003]
Uncaught TypeError: Assignment to constant variable.

Słowo kluczowe var

Przed ES6 varsłowo kluczowe zostało użyte do zadeklarowania zmiennej w JavaScript. Zmienne zadeklarowane przy użyciuvarnie obsługują zakresu na poziomie bloku. Oznacza to, że jeśli zmienna jest zadeklarowana w pętli lubif block można uzyskać do niego dostęp poza pętlą lub if block. Dzieje się tak, ponieważ zmienne zadeklarowane przy użyciuvar podnoszenie słów kluczowych.

var i podnoszenie

Variable hoistingpozwala na użycie zmiennej w programie JavaScript, nawet przed jej zadeklarowaniem. Takie zmienne zostaną zainicjowaneundefineddomyślnie. Środowisko wykonawcze JavaScript skanuje w poszukiwaniu deklaracji zmiennych i umieszcza je na początku funkcji lub skryptu. Zmienne zadeklarowane za pomocąvarsłowo kluczowe zostanie podniesione na górę. Rozważmy następujący przykład -

<script>
   variable company is hoisted to top , var company = undefined
   console.log(company); // using variable before declaring
   var company = "TutorialsPoint"; // declare and initialized here
   console.log(company);
</script>

Wynik powyższego kodu będzie taki, jak pokazano poniżej -

undefined
TutorialsPoint

zakres zmienny i blokowy

Plik block scopeogranicza dostęp zmiennej do bloku, w którym jest zadeklarowana. Plikvarsłowo kluczowe przypisuje zakres funkcji do zmiennej. Zmienne zadeklarowane przy użyciuvarsłowo kluczowe nie ma zakresu blokowego. Rozważmy następujący przykład -

<script>
   //hoisted to top ; var i = undefined
   for (var i = 1;i <= 5;i++){
      console.log(i);
   }
   console.log("after the loop i value is "+i);
</script>

Wynik powyższego kodu będzie następujący -

1
2
3
4
5
after the loop i value is 6

Zmienna i jest zadeklarowana wewnątrz pętli for przy użyciu varsłowo kluczowe. Zmienna i jest dostępna poza pętlą. Jednak czasami może zaistnieć potrzeba ograniczenia dostępu zmiennej w bloku. Nie możemy użyćvarsłowo kluczowe w tym scenariuszu. ES6 wprowadzalet słowo kluczowe, aby przezwyciężyć to ograniczenie.

bezpieczeństwo na poziomie var i block

Jeśli zadeklarujemy to samo variable dwukrotnie używając var keywordw bloku kompilator nie zgłosi błędu. Może to jednak prowadzić do nieoczekiwanych błędów logicznych w czasie wykonywania.

<script>
   var balance = 5000
   console.log(typeof balance)
   var balance = {message:"hello"}
   console.log(typeof balance)
</script>

Wyjście powyższego kodu jest pokazane poniżej -

number
object