Original article: Var, Let, and Const – What's the Difference?

Vipengele vingi vipya vilitoka na ES2015 (ES6). Na sasa, kwa kuwa ni 2020, inadhaniwa kuwa wasanidi programu wengi wa JavaScript wamevifahamu na kuanza kutumia vipengele hivi.

Ingawa dhana hii inaweza kuwa kweli kwa kiasi, bado kuna uwezekano kwamba baadhi ya vipengele hivi hubakia kuwa fumbo kwa baadhi ya wasanidi programu.

Moja ya vipengele vilivyokuja na ES6 ni ikiwemo nyongeza ya let na const, ambayo inaweza kutumika kwa tamko la kutofautiana. Swali ni, ni nini huifanya kuwa tofauti na var ambayo tumekuwa tukitumia? Ikiwa bado haujui juu ya hili, basi nakala hii ni kwa ajili yako.

Katika makala haya, tutajadili var, let na const kwa heshima na upeo wao, matumizi, na kuinua. Unaposoma, zingatia tofauti kati yao ambayo nitaonyesha.

Var

Kabla ya ujio wa ES6, tamko la var lilitawala. Ingawa kuna maswala yanayohusiana na anuwai zilizotangazwa na var, Ndiyo maana ilikuwa ni lazima kuwa njia mpya za kutangaza vigezo. Kwanza, hebu tupate kuelewa var kwa zaidi kabla ya kujadili masuala hayo ibuka.

Upeo (scope) wa var

Kwa kimsingi Upeo una maana ya mahali ambapo anuwai(variables) hizi zinapatikana kwa matumizi. Tamko la var lina upeo wa kimsingi au utendakazi/katika maeneo ya ndani ya kazi.

Upeo ni wa kimsingi wakati utofauti wa var unatangazwa nje ya chaguo la kukokotoa(function). Hii ina maana kwamba kigezo chochote ambacho kimetangazwa na var nje ya kizuizi cha kukokotoa kinapatikana kwa matumizi katika function nzima.

var ni chaguo la function linapotangazwa ndani ya chaguo la function. Hii ina maana kwamba inapatikana na inaweza kupatikana tu ndani ya kazi(function) hiyo.

Ili kuelewa zaidi, angalia mfano hapa chini.

 var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

Hapa, greeter hutanguliwa globally kwa sababu iko nje ya function ilhali hello,iko ndani ya function. Kwa hivyo hatuwezi kufikia hello nje ya function. Kwa hivyo ikiwa tutafanya hivi:

var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

Tutapata hitilafu ambayo ni matokeo ya hello kutopatikana nje ya chaguo la kukokotoa.

var vigezo vinaweza kutangazwa tena na kusasishwa

Hii inamaanisha kuwa tunaweza kufanya hivi ndani ya eneo moja na hatutapata hitilafu.

var greeter = "hey hi";
var greeter = "say Hello instead";

na hii pia,

var greeter = "hey hi";
greeter = "say Hello instead";

Upandishaji (hoisting) wa var

Hoisting ni utaratibu wa JavaScript ambapo anuwai na matamko ya utendakazi huhamishwa hadi juu ya upeo wao kabla ya utekelezaji wa simba. Hii ina maana kwamba tukifanya hivi:

    console.log (greeter);
    var greeter = "say hello"

Inatafsiriwa kama ifuatavyo:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

Kwa hivyo anuwai ya var huinuliwa(is hoisted) juu ya upeo wao na kuanzishwa kwa thamani isiyofafanuliwa.

Tatizo na var

Kuna udhaifu unaokuja na var. Nitatumia mfano hapa chini kuelezea:

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

Kwa hivyo, kwa kuwa times > 3 ni kweli, greeter inafafanuliwa upya kuwa say Hello instead. Ingawa hii sio shida ikiwa kwa kujua unataka greeter ifafanuliwe upya, inakuwa shida wakati hautambui kuwa anuwai greeter inayobadilika tayari imefafanuliwa hapo awali.

Ikiwa umetumia greeter katika sehemu zingine za nmsimbo wako, unaweza kushangazwa na matokeo ambayo unaweza kupata. Hii inaweza kusababisha hitilafu nyingi kwenye msimbo wako. Ndio maana let and const ni muhimu.

Let

let sasa inapendelewa kwa variable declaration. Haishangazi kwani inakuja kama uboreshaji wa matamko ya var(var declarations). Pia hutatua tatizo la var ambalo tumeshughulikia hivi punde. Hebu tuchunguze kwa nini hii ni hivyo.

Let ni block scoped

Kizuizi ni sehemu ya msimbo iliyopakana na {}. A Block huishi kwenye viunga vilivyopinda.(curly braces). Kitu chochote ndani ya viunga vilivyopinda ni block.

Kwa hivyo anuwai iliyotangazwa kwenye block na let inapatikana tu kwa matumizi ndani ya kizuizi hicho. Wacha nieleze hii kwa mfano:

  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

Tunaona kwamba kutumia hello nje ya kizuizi chake (viunga vilivyopinda ambapo ilifafanuliwa) inarudisha kosa. Hii ni kwa sababu anuwai za let ni block scoped.

let inaweza kusasishwa lakini isitangazwe tena

Kama tu var, kigezo kilichotangazwa na let kinaweza kusasishwa(updated) ndani ya upeo wake. Tofauti na var, let haiwezi kutangazwa tena(re-declared) ndani ya upeo wake. Kwa hivyo wakati hii itafanya kazi:

    let greeting = "say Hi";
    greeting = "say Hello instead";

Hii itarejesha kosa:

   let greeting = "say Hi";
   let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

Walakini, ikiwa anuwai sawa zitafafanuliwa katika upeo tofauti, hakutakuwa na kosa:

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

Kwa nini hakuna makosa? Hii ni kwa sababu matukio yote mawili yanachukuliwa kama vigezo tofauti kwani vina upeo tofauti.

Ukweli huu hufanya let kuwa chaguo bora kuliko var. Unapotumia let, sio lazima ujisumbue ikiwa umetumia jina kwa anuwai hapo awali kwani anuwai ipo ndani ya upeo wake tu.

Pia, kwa kuwa anuwai haiwezi kutangazwa zaidi ya mara moja ndani ya upeo, basi shida iliyojadiliwa mapema ambayo hufanyika na var haifanyiki.

Upandaji wa let

Kama tu var, matamko ya let hupandishwa juu. Tofauti na var ambayo imeanzishwa kama undefined), neno kuu la let halijaanzishwa(initialized). Kwa hivyo ukijaribu kutumia anuwai ya let kabla ya tamko, utapata Reference error.

Const

Vigezo vilivyotangazwa na const hudumisha thamani zisizobadilika. Matamko ya const hushiriki baadhi ya mfanano na matamko ya let.

matamko ya const ni block scoped

Kama vile matamko ya let, matamko ya const yanaweza kupatikana tu ndani ya kizuizi ambacho yalitangazwa.

const haiwezi kusasishwa au kutangazwa tena

Hii inamaana kuwa thamani ya kigezo kilichotangazwa na const inabaki sawa ndani ya upeo wake. Haiwezi kusasishwa au kutangazwa tena. Kwa hivyo ikiwa tutatangaza kidokezo na const, hatuwezi kufanya hivi:

   const greeting = "say Hi";
   greeting = "say Hello instead";// error: Assignment to constant variable.

wala hivi:

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

Kwa hivyo, kila tamko la const, lazima lianzishwe wakati wa tamko.

Tabia hii ni tofauti kwa namna fulani inapokuja kwa vitu vilivyotangazwa na const. Ingawa kipengee cha const hakiwezi kusasishwa, sifa za vitu hivi zinaweza kusasishwa. Kwa hivyo, ikiwa tutatangaza kitu cha const kama hii:

   const greeting = {
        message: "say Hi",
        times: 4
    }

wakati hatuwezi kufanya hivi:

   greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

tunaweza kufanya hivi:

 greeting.message = "say Hello instead";

Hii itasasisha thamani ya greeting.message bila kurudisha makosa.

Upandaji wa const

Kama tu let, matamko ya const yameinuliwa juu lakini hayajaanzishwa.

Kwa hivyo ikiwa umekosa tofauti, hizi hapa:

  • matamko ya var yana upeo wa global au function huku let na const zikiwa block scoped.
  • vigezo vya var vinaweza kusasishwa na kutangazwa tena ndani ya upeo wake; vigezo vya let vinaweza kusasishwa lakini si kutangazwa tena; vigezo vya const haviwezi kusasishwa wala kutangazwa tena.
  • Vyote vinaweza kuinuliwa juu ya upeo wao. Lakini wakati vigeu vya var vinaanzishwa na undefined, vigezo vya let na const hazijaanzishwa.
  • Ingawa var na let inaweza kutangazwa bila kuanzishwa, const lazima ianzishwe wakati wa tamko.

Je, una maswali au nyongeza? Tafadhali nijulishe.

Asante kwa kusoma :)