ReactJS Bootcamp Day 1: JavaScript Fundamentals - Variables and Scope (Sinhala Tutorial Script)

මේකෙන් අපි ආරම්භ කරනවා අපේ ReactJS Bootcamp එකේ පළවෙනි දවස. මෙහිදී අපි JavaScript fundamentals ගැන කතා කරමු, විශේෂයෙන් variables සහ scope ගැන. මේක ඔබට ගොඩක් වැදගත් වෙනවා React වලදී state සහ props හරියට manage කරන්න. මම මේක ඔබට කියලා දෙන්නේ ගුරුවරයෙක් student කෙනෙක්ට ගොඩක් ලේසියෙන් තේරෙන විදියට, boring නොවෙන්නෙ ගමනක් යන ගමන් කතාවක් කියන feeling එකෙන්.

1. Theory: Variables සහ Scope ගැන තේරුම

JavaScript වලදී variables declare කරන්න තියෙනවා තුනක්: var, let, සහ const.

• Var: මේක තමයි ආදිකාලේ තිබුණේ. එයා function scope එකක තමයි වැඩ කරන්නේ. ඒ කියන්නේ function එකක් ඇතුළේ declare කළොත් ඒක එතනට විතරයි තියෙන්නේ. ඒ වගේම hoisting කියලා feature එකක් තියෙනවා. ඒ කියන්නේ declare කරන්න කලින් භාවිතා කළත් error එකක් නෑ, ඒත් value එක එන්නේ undefined විදියට.
• Let: ES6 එක්ක ආපු එකක්, block scope එකක වැඩ කරනවා. Block එකක් කියන්නේ curly braces {} ඇතුළේ තියෙන එකට. Hoisting වෙන්නේ නැහැ, ඒ නිසා declare කරන්න කලින් use කළොත් error එකක් දෙනවා.
• Const: මේකත් ES6 එකේ ආපු එකක්, block scope එකේ තමයි තියෙන්නේ. ඒත් මේක constant එකක්, ඒ කියන්නේ එකම value එක declare කළාම ආයේ change කරන්න බෑ.

Scope කියන්නේ variable එකකට access කරන්න පුළුවන් තැන:

• Global scope: Function එකකට හෝ block එකකට එළියෙන් declare කළොත් ඒක global එකක් වෙනවා, ඕනෑම තැනකට access කරන්න පුළුවන්.
• Function scope: var use කරලා function එකක් ඇතුළේ declare කළොත් ඒ function එක ඇතුළේ විතරයි තියෙන්නේ.
• Block scope: let හෝ const block එකක් ඇතුළේ declare කළොත් ඒ block එක ඇතුළේ විතරයි access කරන්න පුළුවන්.

Hoisting කියන්නේ code එක run වෙන්න කලින් variable declarations scope එකේ උඩට ගෙනියන එක. var එක්ක එන්නේ undefined විදියට, ඒත් let සහ const එක්ක error එකක් දෙනවා declare කරන්න කලින් use කළොත්.

2. Code Examples: උදාහරණ බලමු

අපි දැන් මේ ටික practical විදියට බලමු:

// Hoisting with var
console.log(x); // undefined
var x = 10;
console.log(x); // 10

// Hoisting with let
console.log(y); // ReferenceError: y is not defined
let y = 20;
console.log(y); // 20

// Scope in loops
for (var i = 0; i < 5; i++) {
    console.log(i); // 0 to 4
}
console.log(i); // 5 (loop එකෙන් එළියටත් access වෙනවා)

for (let j = 0; j < 5; j++) {
    console.log(j); // 0 to 4
}
console.log(j); // ReferenceError: j is not defined

React වලදී බලමු:

import React from 'react';

function MyComponent() {
    const name = 'Alice';
    let age = 30;
    return <div>{name} is {age} years old.</div>;
}

මෙතන name සහ age block scope එකේ තමයි තියෙන්නේ, component එකෙන් එළියට leak වෙන්නේ නෑ.

3. Use Cases: Real-World Scenarios

React වලදී scope ගොඩක් වැදගත්. උදාහරණයක් විදියට, loop එකක event listeners දානකොට let use කළොත් හැම listener එකටම correct value එක capture වෙනවා:

for (let index = 0; index < 3; index++) {
    document.getElementById(`button${index}`).addEventListener('click', () => {
        console.log(index);
    });
}

var use කළොත් හැම එකම එකම value එක log වෙනවා, ඒක bug එකක් වෙන්න පුළුවන්.

4. Troubleshooting: Common Pitfalls

Beginner ලාට ගොඩක් වෙන ගැටලු:

• var use කරලා scope එකෙන් එළියට leak වෙනවා.
• Hoisting නිසා var declare කරන්න කලින් use කරලා undefined එනවා.
• const variable එකක් change කරන්න ගිහින් error එකක් එනවා.

Solutions:

• let සහ const use කරන්න, var අඩුවෙන් use කරන්න.
• Variable එක use කරන තැනට ලඟින් declare කරන්න.
• Hoisting ගැන හිතලා code ලියන්න.

6. Best Practices: කවදා Use කරන්නේ/අඩුවෙන් Use කරන්නේ

• const use කරන්න change නොවන variables වලට (e.g., const PI = 3.14;).
• let use කරන්න change වෙන variables වලට (e.g., let count = 0;).
• var modern JavaScript වලදී අඩුවෙන් use කරන්න, scope issues එනවා.
• Scope එක minimize කරන්න, global variables අඩුවෙන් use කරන්න.