JavaScript `let` vs `var` වෙනස - SC Guide

JavaScript වල let සහ var අතර වෙනස: ගැඹුරින් තේරුම් ගනිමු!

ආයුබෝවන් හැමෝටම! JavaScript code ලියද්දි, tutorials බලද්දි, නැත්නම් පොත්පත් කියවද්දි, var, let, const වගේ keywords දකිනවා නේද? විශේෂයෙන්ම, var හා let අතර වෙනස මොකක්ද කියලා ඔයාලට ගොඩක් වෙලාවට හිතෙන්න ඇති. සමහරවිට එකක් අනිකට වඩා හොඳයි කියලා කියනවත් ඇති.

හැබැයි ඇයි මේ දෙකම තියෙන්නේ? එකක් තියාගෙන අනික් එක නැති කරන්න බැරිද? 2015 දී ECMAScript 6 (ES6) එක්ක let සහ const හඳුන්වා දුන්නාට පස්සේ var වලට වඩා මේ අලුත් keywords නිර්දේශ කරන්න පටන් ගත්තා. මේ article එකෙන් අපි ඒක පැහැදිලිවම කතා කරමු, var වල තිබ්බ අඩුපාඩු මොනවද, ඒවට let විසඳුම් දුන්නේ කොහොමද කියලා.

මේ concepts ගැන හොඳ අවබෝධයක් ලබාගැනීමෙන් ඔයාගේ JavaScript code එක වඩාත් predictable, bug-free, සහ maintainable කරගන්න පුළුවන්. එහෙනම් අපි පටන් ගමු!

1. var Keyword එක සහ එහි ባህිචිත්වය (Behavior)

JavaScript වල මුලින්ම variables declare කරන්න තිබ්බ keyword එක තමයි var. මේකේ ප්‍රධාන ලක්ෂණ දෙකක් තියෙනවා. ඒ තමයි:

• Function Scope
• Hoisting

1.1. Function Scope

var keyword එකෙන් declare කරන variables ඒවා declare කරපු function එක ඇතුලත විතරයි access කරන්න පුළුවන්. Function එකෙන් එලියට ගියාම ඒ variable එකට access නෑ.

උදාහරණයක් විදිහට බලමු:

function greet() {
    var message = "ආයුබෝවන්!";
    console.log(message); // Output: ආයුබෝවන්!
}

greet();
// console.log(message); // ReferenceError: message is not defined

මේ උදාහරණයේ, message variable එක greet() function එක ඇතුලේ විතරයි පාවිච්චි කරන්න පුළුවන්. function එකෙන් එළියට ගියාම ඒක define වෙලා නැහැ (ReferenceError එකක් එනවා).

හැබැයි, var වල තියෙන පොඩි issue එකක් තමයි ඒක Block Scope (if statements, for loops වගේ curly braces {} ඇතුලේ තියෙන code blocks) එකකට අදාළ වෙන්නේ නැති එක. මේක beginners ලට ගොඩක් වෙලාවට confuse වෙන තැනක්:

if (true) {
    var x = 10;
    console.log(x); // Output: 10
}

console.log(x); // Output: 10 (Surprise! x is accessible outside the if block)

මේ code එකේ x කියන variable එක if block එක ඇතුලේ declare කලත්, if block එකෙන් එලියට ගියාට පස්සේත් ඒක access කරන්න පුළුවන්. ඒකට හේතුව තමයි var Block-scoped නැති එක. ඒක Global scope එකේ declare කලොත් ඕනම තැනක access කරන්න පුළුවන්.

1.2. Hoisting

var වල තියෙන තවත් වැදගත් ලක්ෂණයක් තමයි Hoisting. JavaScript engine එක code එක execute කරන්න කලින් var variables declarations ටික ඒවගේ scope එකේ උඩටම ගෙනියනවා. ඒත් value එක ගෙනියන්නේ නෑ, declaration එක විතරයි. මේක නිසා සමහර වෙලාවට code එකේ බලාපොරොත්තු නොවන bugs එන්න පුළුවන්:

console.log(myVar); // Output: undefined
var myVar = "I am hoisted";
console.log(myVar); // Output: I am hoisted

මේ code එක පිටපත run වෙද්දී, JavaScript engine එක ඇත්තටම දකින්නේ මෙහෙමයි:

var myVar;
console.log(myVar); // Output: undefined
myVar = "I am hoisted";
console.log(myVar); // Output: I am hoisted

ඒ නිසා, variable එක initialize කරන්න කලින් වුනත් myVar කියන variable එක define වෙලා තියෙනවා, ඒත් ඒකේ අගය undefined. මේක JavaScript වලට අලුත් කෙනෙක්ටනම් ටිකක් ව්‍යාකූල වෙන්න පුළුවන්.

2. let Keyword එක සහ එහි නවීන ባህිචිත්වය (Modern Behavior)

ES6 (ECMAScript 2015) එක්ක ආපු අලුත් keyword එකක් තමයි let. මේක var වල තිබ්බ අඩුපාඩු ගොඩක් හදාගන්න ආපු විසඳුමක්.

let වල ප්‍රධාන ලක්ෂණ තමයි:

• Block Scope
• No Redeclaration
• Temporal Dead Zone (TDZ)

2.1. Block Scope

මේක තමයි let සහ var අතර තියෙන ලොකුම වෙනස. let variables declare කරන block (curly braces {}) එක ඇතුලත විතරයි access කරන්න පුළුවන්. if statements, for loops, functions වගේ ඕනම block එකකට මේක අදාළයි. මේක නිසා code එක වඩාත් predictable වෙනවා:

if (true) {
    let y = 20;
    console.log(y); // Output: 20
}

// console.log(y); // ReferenceError: y is not defined

දැන් බලන්න, if block එකෙන් එළියට ගියාම y variable එකට access කරන්න බෑ. මේක var වලට වඩා ගොඩක් ආරක්ෂාකාරී විදිහක්, අනවශ්‍ය විදිහට variables global scope එකට leak වෙන එක නවත්තනවා.

2.2. No Redeclaration

එකම scope එක ඇතුලේ let variable එකක් දෙපාරක් declare කරන්න බෑ. එහෙම කරන්න හැදුවොත් JavaScript එකෙන් error එකක් දෙනවා. var එකට එහෙම නෑ, redeclare කරන්න පුළුවන්.

let city = "කොළඹ";
// let city = "මහනුවර"; // SyntaxError: Identifier 'city' has already been declared

var country = "ශ්‍රී ලංකාව";
var country = "ලංකාව"; // No error, just re-assigns the value
console.log(country); // Output: ලංකාව

මේකත් code එකේ consistency එකට ගොඩක් වැදගත්. නොදැනුවත්වම variable එකක් overwrite වීම වළක්වනවා.

2.3. Temporal Dead Zone (TDZ)

let variables var වගේ සම්පූර්ණයෙන්ම Hoisting වෙන්නේ නැහැ. ඒවාත් declaration එක තියෙන තැනටම උඩට යනවා වගේ පෙනුනත්, ඒවා initialize කරන්න කලින් access කරන්න බෑ. Access කරන්න හැදුවොත් ReferenceError එකක් එනවා. මේ initialize වෙන්න කලින් තියෙන තත්වය තමයි Temporal Dead Zone (TDZ) කියන්නේ.

// console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = "I am not truly hoisted";
console.log(myLet); // Output: I am not truly hoisted

මේක var වල undefined එනවා වගේ නෙවෙයි, explicit error එකක් දෙනවා. මේක නිසා variables define වෙලා නැති තැනක පාවිච්චි වෙන එක වළක්වනවා, ඒ කියන්නේ bugs හොයාගන්න පහසු වෙනවා.

3. var vs let - ප්‍රධාන වෙනස්කම් සහ කවදා භාවිතා කල යුතුද?

දැන් අපි මේ දෙක අතර තියෙන ප්‍රධාන වෙනස්කම් ටික සාරාංශ කරලා බලමු:

• Scope:
  • var: Function-scoped (Block-scope ගණන් ගන්නේ නෑ).
  • let: Block-scoped (ඕනෑම {} block එකක් ඇතුලේ විතරයි).
• Hoisting:
  • var: Hoisted සහ undefined වලින් initialize වෙනවා.
  • let: Hoisted වුනත් initialize වෙන්නේ නැහැ, Temporal Dead Zone (TDZ) එකේ තියෙනවා.
• Redeclaration:
  • var: එකම scope එක ඇතුලේ නැවත declare කරන්න පුළුවන්.
  • let: එකම scope එක ඇතුලේ නැවත declare කරන්න බෑ (error එකක් එනවා).

කවදා භාවිතා කල යුතුද? (When to Use)

නූතන JavaScript development වල සාමාන්‍යයෙන් නිර්දේශ කරන්නේ var භාවිතය අවම කරලා let සහ const භාවිතා කරන එකයි.

• let භාවිතා කරන්න: යම් variable එකක අගය පසුව වෙනස් වෙනවා නම් (re-assign වෙනවා නම්), let භාවිතා කරන්න. උදාහරණයක් විදිහට, for loop එකක counter variable එකක්.
• const භාවිතා කරන්න: යම් variable එකක අගය කිසිදා වෙනස් නොවනවා නම් (re-assign වෙන්නේ නැත්නම්), const භාවිතා කරන්න. මේකත් let වගේම Block-scoped සහ TDZ එකට අදාළයි. මේකෙන් code එක කියවන්න සහ තේරුම් ගන්න පහසු වෙනවා.

let සහ const මඟින් JavaScript code එක වඩාත් predictable සහ error-proof කරන්න උදව් වෙනවා. var නිසා එන Hoisting සහ Function-scoping issues වලින් මිදෙන්න පුළුවන්. ඒ නිසා, අලුත් projects වලදී හැමවිටම let (සහ const) භාවිතා කරන්න උත්සහ කරන්න.

නිගමනය (Conclusion)

අද අපි JavaScript වල var සහ let අතර තියෙන මූලික වෙනස්කම් ගැන ගැඹුරින් කතා කළා. var වල Function Scope සහ Hoisting නිසා එන issues, let වල Block Scope සහ Temporal Dead Zone (TDZ) මගින් විසඳෙන හැටි තේරුම් ගත්තා.

නූතන JavaScript වල සාර්ථක developer කෙනෙක් වෙන්න මේ concepts තේරුම් ගැනීම අත්‍යවශ්‍යයි. ඒ නිසා, ඔයා අලුතෙන් JavaScript ඉගෙනගන්න කෙනෙක් නම්, පුළුවන් තරම් let සහ const භාවිතා කරන්න පුරුදු වෙන්න. මේකෙන් ඔයා ලියන code එක වඩාත් maintainable, predictable, සහ bug-free වෙයි.

ඔයාලගේ අදහස්, මේ ගැන තියෙන ප්‍රශ්න, නැත්නම් var නිසා ඔයාලට ආපු අමුතු bugs (ඒවා ගොඩක් රසවත් වෙන්න පුළුවන්!) ගැන comments section එකේ කියන්න! අපි කතා කරමු! තවත් මේ වගේ රසවත් සහ ප්‍රයෝජනවත් article එකකින් නැවත හම්බවෙමු! ඔබට ජය!