{"id":594,"date":"2021-05-19T21:54:07","date_gmt":"2021-05-19T19:54:07","guid":{"rendered":"https:\/\/dziewczynanafroncie.pl\/?p=594"},"modified":"2021-05-19T21:54:07","modified_gmt":"2021-05-19T19:54:07","slug":"roznice-pomiedzy-const-let-var","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/roznice-pomiedzy-const-let-var\/","title":{"rendered":"R\u00f3\u017cnice pomi\u0119dzy const, let, var"},"content":{"rendered":"\n

Wraz z nadej\u015bciem EcmaScript 6 prawdopodobnie spotka\u0142e\u015b si\u0119 z \u201enowymi\u201d modyfikatorami przypisania zmiennej const<\/code> i let<\/code>. Co prawda, s\u0105 one dost\u0119pne ju\u017c od jakiego\u015b czasu \ud83d\ude05. Dodatkowo wspomnimy jescze o wcze\u015bniej u\u017cywanym var<\/code> kt\u00f3ry by\u0142 wykorzystywany we wcze\u015bniejszych wersjach EcmaScript. Wszystkie trzy s\u0142u\u017c\u0105 do tego samego, lecz ka\u017cde z nich u\u017cywamy w \u015bci\u015ble okre\u015blonym przypadku.<\/p>\n\n\n\n\n\n\n\n

Nasuwa si\u0119 pytanie skoro wszystkie s\u0142u\u017c\u0105 do tego samego to po co a\u017c trzy? Ot\u00f3\u017c chodzi o r\u00f3\u017cnice zasi\u0119gu, w kt\u00f3rym s\u0105 widoczne.
<\/p>\n\n\n\n

#var<\/h3>\n\n\n\n

Wcze\u015bniej, gdy nie mieli\u015bmy dost\u0119pnej bardziej wyszukanej sk\u0142adni w EcmaScript 5, do deklarowania zmiennej s\u0142u\u017cy\u0142 nam modyfikator var<\/code>. Posiada\u0142 on zasi\u0119g globalny, przez co by\u0142 widoczny w ca\u0142ym kodzie. Oczywi\u015bcie, jest on dalej dost\u0119pny i je\u017celi chcesz mo\u017cesz dalej go u\u017cywa\u0107.<\/p>\n\n\n\n

var zmienna = 'warto\u015b\u0107';\nif(true) { var zmienna = 'Zmiana warto\u015bci' };\nvar zmiennaFunkcji = function () { \n    var zmienna = 'Zmiana warto\u015bci w funkcji'\n}\n\nzmiennaFunkcji();\nconsole.log(zmienna); \/\/ 'Zmiana warto\u015bci';<\/code><\/pre>\n\n\n\n
Niestety jego lu\u017any charakter, mo\u017ce prowadzi\u0107 do pewnego rodzaju problemu, w sytuacji kiedy nie do ko\u0144ca wiesz, jak mo\u017ce si\u0119 zachowa\u0107 w specyficznych sytuacjach.<\/p>\n\n\n\n
Zapytasz skoro var<\/code> nie jest problematyczny, to po co zosta\u0142y dodane pozosta\u0142e modyfikatory ?<\/h4>\n\n\n\n
Odno\u015bnie samego var<\/code> w jego stosowaniu nie ma nic z\u0142ego, ale jest par\u0119 haczyk\u00f3w przy jego stosowaniu.<\/p>\n\n\n\n
Brak zakresu blokowego<\/h6>\n\n\n\n
Zmienne zadeklarowane przy pomocy s\u0142owa var<\/code> posiadaj\u0105 zakres funkcyjny. Co wydaje si\u0119 logiczne. Zmienna nie b\u0119dzie dost\u0119pna poza funkcj\u0105 w kt\u00f3rej j\u0105 zadeklarowali\u015bmy.<\/p>\n\n\n\n
var zmiennaFunkcji = function () { \n    var zmienna = 'Ponowna zmiana warto\u015bci'\n}\n\nzmiennaFunkcji();\nconsole.log(zmienna); \/\/ RefferenceError<\/code><\/pre>\n\n\n\n
Nie maj\u0105 jednak zasi\u0119gu blokowego. To jest sytuacja, w kt\u00f3rej sprawy mog\u0105 si\u0119 zbytnio skomplikowa\u0107 \ud83d\ude15 Mo\u017cesz ponownie przypisa\u0107 zmienne w bloku kodu, nadpisuj\u0105c przypisania do tej samej nazwy zmiennej. <\/p>\n\n\n\n
var zmienna = 'warto\u015b\u0107';\nif(true) var zmienna = 'zmie\u0144 warto\u015b\u0107';\n\nconsole.log(zmienna); \/\/ zmie\u0144 warto\u015b\u0107<\/code><\/pre>\n\n\n\n
Natomiast je\u017celi wykonamy to samo za pomoc\u0105 funkcji nie zmieni to warto\u015bci zmiennej.<\/p>\n\n\n\n
var zmienna = 'warto\u015b\u0107';\nvar zmiennaFunkcji = function () { \n    var zmienna = 'zmie\u0144 warto\u015b\u0107'\n}\n\nzmiennaFunkcji();\nconsole.log(zmienna); \/\/ warto\u015b\u0107<\/code><\/pre>\n\n\n\n
Hoisting<\/h6>\n\n\n\n
Dla tych, kt\u00f3rzy nie mieli styczno\u015bci z definicj\u0105 hoistingu<\/code>, kr\u00f3tko wyja\u015bni\u0119. Hoisting<\/code> wynosi deklaracj\u0119 zmiennej na sam pocz\u0105tek. Wznosi deklaracj\u0119 zmiennej na pocz\u0105tek bie\u017c\u0105cego zakresu kodu. Jednak\u017ce miejmy na uwadze to, \u017ce tylko deklaracja jest wznoszona, a nie warto\u015b\u0107 kt\u00f3ra jest do niej przypisana. Je\u015bli nie wiesz o podnoszeniu, mo\u017cesz napotka\u0107 problemy i nie b\u0119dzie ostrze\u017cenia, poniewa\u017c Tw\u00f3j kod nie wy\u015bwietli b\u0142\u0119du.<\/p>\n\n\n\n
var zmienna = 'warto\u015b\u0107';\nzmienna; \/\/ warto\u015b\u0107\n\nzmienna2 \/\/ undefinied, brak b\u0142\u0119d\u00f3w !\nvar zmienna2 = 'inna warto\u015b\u0107';<\/code><\/pre>\n\n\n\n
W powy\u017cszym przyk\u0142adzie nie dostaniemy \u017cadnych b\u0142\u0119d\u00f3w ale JavaScript odczyta to jako <\/p>\n\n\n\n
var zmienna = 'warto\u015b\u0107';\nvar zmienna2; \/\/ zmienna zosta\u0142a wyniesiona lecz bez \n\/\/ przypisanej warto\u015bci\nzmienna  \/\/ warto\u015b\u0107\nzmienna2 \/\/ undefinied, brak b\u0142\u0119d\u00f3w !\nvar zmienna2 = 'inna warto\u015b\u0107'; \/\/ inna warto\u015b\u0107<\/code><\/pre>\n\n\n\n
W tym artykule nie b\u0119d\u0119 si\u0119 zbytnio zajmowa\u0107 hostingiem<\/code>, poniewa\u017c w Internecie jest wiele zasob\u00f3w na ten temat. Mo\u017cliwe te\u017c, \u017ce opisze go szerzej w osobnym artykule. Podsumowuj\u0105c musimy pami\u0119ta\u0107, aby przypisa\u0107 wszystkie zmienne na pocz\u0105tku zakresu kodu. Aby to wymusi\u0107, mo\u017cemy u\u017cy\u0107 trybu \u015bcis\u0142ego ( “strict<\/code>“)<\/p>\n\n\n\n
#const i let<\/h3>\n\n\n\n
const<\/code> i let<\/code> s\u0105 nowymi modyfikatorami przypisania zmiennych. Wychodz\u0105 one na przeciw pewnym niedoci\u0105gni\u0119ciom z kt\u00f3rymi spotkamy u\u017cywaj\u0105c modyfikatora var<\/code>.<\/p>\n\n\n\n
Zakres blokowy<\/h4>\n\n\n\n
Zmienne zadeklarowane za pomoc\u0105 s\u0142\u00f3w kluczowych const<\/code> i let<\/code> posiadaj\u0105 zakres blokowy.<\/p>\n\n\n\n
let zmienna = 'warto\u015b\u0107';\nif(true) { \n    let zmienna = 'Zmiana warto\u015bci';\n}\n\nconsole.log(zmienna); \/\/ warto\u015b\u0107<\/code><\/pre>\n\n\n\n
Ka\u017cde przypisanie jest ograniczone do w\u0142asnego bloku kodu. Zmienna mo\u017ce sta\u0107 si\u0119 “inna warto\u015bci\u0105”<\/strong> tylko wtedy, gdy wykonamy przypisanie bez nowej deklaracji.<\/p>\n\n\n\n
let zmienna = 'warto\u015b\u0107';\nif(true) { \n    zmienna = 'Zmiana warto\u015bci';\n}\n\nconsole.log(zmienna); \/\/ Zmiana warto\u015bci<\/code><\/pre>\n\n\n\n
Hoisting<\/h4>\n\n\n\n
Zmienne, kt\u00f3rym przypisano zar\u00f3wno za pomoc\u0105 const<\/code> jak i let<\/code>, nie podlegaj\u0105 hoistingowi<\/code>, podobnie jak te zadekalrowane za pomoc\u0105 var<\/code>. Jak pami\u0119tasz wspomniejli\u015bmy wcze\u015bniej, i\u017c zmienne ze s\u0142owem kluczowym var<\/code> s\u0105 inicjowane z warto\u015bci\u0105 undefined, natomiast w tym wypadku jest troch\u0119 inaczej zmienne zadeklarowane za pomoc\u0105 const<\/code> jak i let<\/code> nie s\u0105 w og\u00f3le inicjalizowane, tzn nie jest przypsana do nich warto\u015b\u0107 undefinied<\/code> podczas wykonywania przez JavaScript hoistingu<\/code>.<\/p>\n\n\n\n
zmienna = 'warto\u015b\u0107';\nconst zmienna = 'zmiana warto\u015bci' \/\/ ReffernceError zmienna nie jest zdefiniowana<\/code><\/pre>\n\n\n\n
Na powy\u017cszym przyk\u0142adzie chcia\u0142am pokaza\u0107 wam dzia\u0142anie o nazwie Temporal DeadZone, jest to miejsce w kt\u00f3re tymczasowo wpadaj\u0105 zmienne dop\u00f3ki nie zostan\u0105 zainicjalizowane. W wi\u0119kszo\u015bci przypadk\u00f3w skutkuje to wy\u015bwietleniem b\u0142\u0119du zwanego ReferenceError.<\/p>\n\n\n\n
typeof zmienna; \/\/ sprawdzamy typ zmiennej\nconst zmienna = 'warto\u015b\u0107' \/\/ ReffernceError zmienna nie jest zdefiniowana<\/code><\/pre>\n\n\n\n
To co widzisz w przedstawionych powy\u017cej przyk\u0142adach jest rzecz\u0105 dobr\u0105! \ud83d\ude03 U\u017cycie const<\/code> jak i let<\/code> w po\u0142\u0105czeniu z trybem “strict<\/code>” wymusza prawid\u0142owe przypisanie zmiennych. Dzi\u0119ki temu  zmniejszamy ryzyko pope\u0142nienia przez nas b\u0142\u0119du zwi\u0105zanego ze z\u0142ym u\u017cyciem.<\/p>\n\n\n\n
#const<\/h4>\n\n\n\n
const<\/code> jest skr\u00f3tem od sta\u0142ej<\/strong>. Zmienne zadeklarowane za pomoc\u0105 s\u0142owa kluczowego const<\/code> s\u0105:<\/p>\n\n\n\n
  • tylko do odczytu<\/li>
  • nie mog\u0105 by\u0107 ponownie zadeklarowane<\/li>
  • niemo\u017cliwa jest zmiana ich warto\u015bci<\/li><\/ul>\n\n\n\n
    const zmienna = 'warto\u015b\u0107';\nzmienna = 'Zmiana warto\u015bci';\n\/\/ TypeError: Assigment  to constant variable<\/code><\/pre>\n\n\n\n
    • mutowalne – tablice i obiekty mog\u0105 by\u0107 modyfikowane<\/li><\/ul>\n\n\n\n
      const zmienna = {};\nzmienna.wlasnosc = 'warto\u015b\u0107';<\/code><\/pre>\n\n\n\n
      • nie s\u0105 przypisane do obiektu window<\/code> kiedy s\u0105 zadeklarowane w zakresie globalnym<\/li><\/ul>\n\n\n\n
        #let<\/h4>\n\n\n\n
        Zmienne przypisane za pomoc\u0105 s\u0142owa kluczowego let<\/code> s\u0105 bardzo podobne do tych zadeklarowanych za pomoc\u0105 var<\/code>. G\u0142\u00f3wn\u0105 r\u00f3\u017cnic\u0105 mi\u0119dzy nimi jest zakres. Jak pami\u0119tasz wspomnia\u0142am o tym wcze\u015bniej. Zmienne przypisane za pomoc\u0105 let<\/code> posiadj\u0105 zasi\u0119g blokowy. Oznacza to, \u017ce zmienn\u0105 mo\u017cna zobaczy\u0107 w tym bloku kodu w kt\u00f3rym zosta\u0142a zadeklarowana oraz we wszystkich podblokach. Zmienne przypisane za pomoc\u0105 var<\/code> jak pami\u0119tasz posiadaj\u0105 zakres funkcyjny w zwi\u0105zku z tym ignoruj\u0105 regu\u0142y zakresu blokowego.
        Podobnie jak const<\/code> zmiennych zadeklarowanych za pomoc\u0105 let<\/code> nie mo\u017cna ponownie zadeklarowa\u0107, mo\u017cna tylko ponownie przypisa\u0107 do nich inna warto\u015b\u0107.<\/p>\n\n\n\n
        kiedy i gdzie stosowa\u0107?<\/h4>\n\n\n\n
        Podpowiem Ci, i\u017c w wi\u0119kszo\u015bci przypadk\u00f3w wybierz najpierw const<\/code>. Raczej b\u0119dziesz potrzebowa\u0142, aby wi\u0119kszo\u015b\u0107 przypisa\u0144 by\u0142a tylko do odczytu, aby unikn\u0105\u0107 potencjalnych problem\u00f3w z ponownym nadpisaniem ich warto\u015bci. U\u017cywaj s\u0142owa kluczowego let<\/code> tylko wtedy, gdy wiesz, \u017ce zmienna b\u0119dzie mia\u0142a warto\u015b\u0107, kt\u00f3ra mo\u017ce si\u0119 zmieni\u0107 w trakcie kolejnych linii kodu. Prawdopodobnie nie b\u0119dziesz ju\u017c u\u017cywa\u0107 var<\/code> kiedy b\u0119dziesz korzysta\u0107 z let<\/code> i const<\/code> \u200b\u200b\ud83d\ude05

        Rozwa\u017cmy prosty scenariusz z u\u017cyciem let.<\/p>\n\n\n\n
        let zmienna = 'warto\u015b\u0107;\nconst zmiennaFunkcji = () => zmienna = 'zmiana warto\u015bci';\n\nzmiennaFunkcji ();\nzmienna; \/\/ 'warto\u015b\u0107' sta\u0142a si\u0119 'zmian\u0105 warto\u015bci'<\/code><\/pre>\n\n\n\n
        W powy\u017cszym przyk\u0142adzie zmienna <\/strong>zmieni si\u0119. Zostanie ‘zmiana warto\u015bci’<\/strong>. Jej warto\u015b\u0107 jest dynamiczna, wi\u0119c ma sens, zadeklarowanie zmiennej za pomoc\u0105 s\u0142owa kluczowego let<\/code>.
        Funkcja ‘zmiana’<\/strong> jest natomiast sta\u0142\u0105. Nie chcemy, \u017ceby co\u015b si\u0119 w niej zmieni\u0142o w p\u00f3\u017aniejszych fragmentach kodu dlatego prawid\u0142owym b\u0119dzie zastosowanie s\u0142owa kluczowego const<\/code> dla deklaracji zmiennej do kt\u00f3rej przypasana jest funkcja \ud83d\udc4d
        Powy\u017cszy przyk\u0142ad jest prostym przyk\u0142adem, jednak tych z was kt\u00f3rzy dopiero zaczynaj\u0105 swoje pierwsze kroki z kodem, ukazuje zachowanie kt\u00f3re uzyskamy podczas zastosowania jednego z opisywanych wy\u017cej s\u0142\u00f3w kluczowych potrzebnych do deklaracji zmienej. Widz\u0105c let<\/code> zmienna <\/strong>w g\u00f3rnej cz\u0119\u015bci kodu, dowiadujemy si\u0119, i\u017c warto\u015b\u0107 zmiennej zmienia si\u0119 w pewnym dalszej cz\u0119\u015bci kodu.
        U\u017cycie const<\/code> i let<\/code> nie tylko zmniejsza ryzyko pope\u0142nienia przez nas b\u0142\u0119du, ale pomaga w zrozumieniu podstawy kod.<\/p>\n\n\n\n
        Czy to ju\u017c koniec var<\/code>?<\/h3>\n\n\n\n
        Mo\u017cemy powiedzie\u0107, i\u017c potencjalnie tak? ale i te\u017c nie, poniewa\u017c musimy pami\u0119ta\u0107 o kompatybilno\u015bci wstecznej.
        Lecz od momentu powstania const<\/code>i let<\/code>, u\u017cycie var<\/code>znacznie si\u0119 zmniejszy\u0142o. U\u017cycie const<\/code>i let<\/code> pozwala zmniejszy\u0107 ryzyko pope\u0142nienia b\u0142\u0119d\u00f3w i sprawi\u0107, \u017ce kod b\u0119dzie bardziej zwi\u0119z\u0142y . Mo\u017ce to przynie\u015b\u0107 wiele korzy\u015bci, takich jak u\u0142atwienie pocz\u0105tkuj\u0105cym u\u017cytkownikom zrozumienia logiki w biznesowej aplikacji.

        My\u015bl\u0119, \u017ce to ju\u017c wszystko co chcia\u0142am Ci przekaza\u0107 w tym artykule! odno\u015bnie Deklaracji zmiennych za pomoc\u0105 const<\/code>, let<\/code>, var<\/code>  \ud83d\udc4d

        Jak zawsze, wszelkie pytania lub sugestie, mo\u017cecie pozostawi\u0107 w komentarzu, zapraszam r\u00f3wnie\u017c na Facebook \ud83e\uddcf\u200d\u2640\ufe0f i Instagram \ud83d\udcf8!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Wraz z nadej\u015bciem EcmaScript 6 prawdopodobnie spotka\u0142e\u015b si\u0119 z \u201enowymi\u201d modyfikatorami przypisania zmiennej i . Co prawda, s\u0105 one dost\u0119pne ju\u017c od jakiego\u015b czasu \ud83d\ude05. Dodatkowo wspomnimy jescze o wcze\u015bniej u\u017cywanym kt\u00f3ry by\u0142 wykorzystywany we wcze\u015bniejszych wersjach EcmaScript. Wszystkie trzy s\u0142u\u017c\u0105 do tego samego, lecz ka\u017cde z nich u\u017cywamy w \u015bci\u015ble okre\u015blonym przypadku.<\/p>\n","protected":false},"author":1,"featured_media":595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[36,34,38,35,37],"class_list":["post-594","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","tag-const","tag-deklaracje","tag-es6","tag-let","tag-var"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=594"}],"version-history":[{"count":1,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/594\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/594\/revisions\/596"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/595"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}