Mga Pangunahing Kaalaman sa JavaScript

Ipinaliliwanag ng artikulong ito ang mga pangunahing kaalaman ng JavaScript.

YouTube Video

Pagpapatupad ng Hello World!

Pangkalahatang Pagsasalarawan ng JavaScript

Ang JavaScript ay isa sa mga pinakalaganap na ginagamit na programming language sa web development. Pangunahing ginagamit ito upang magdagdag ng mga dynamic na elemento sa mga web page, nagbibigay-daan sa pag-aayos ng user interface, pagpapadala ng datos, at paggawa ng animasyon. Makakapagpatakbo ito sa client-side (sa isang browser) at server-side gamit ang mga teknolohiya tulad ng Node.js. Dahil sa pagiging simple at flexible, madaling matutunan ng mga baguhan at malawakang ginagamit ng mga propesyonal na developers.

Mga Variable sa JavaScript

Ang mga variable sa JavaScript ay parang mga lalagyan na ginagamit upang mag-imbak at muling gamitin ang data. Sa pamamagitan ng paggamit ng mga variable, maaari mong panatilihin at manipulahin ang mga halaga sa iyong programa.

Deklarasyon ng Variable

Sa JavaScript, mayroong tatlong keyword para sa pagdedeklara ng mga variable.

• var: Isang lumang paraan sa pagdedeklara ng mga variable, ngunit ang pamamahala sa saklaw nito ay kumplikado at nangangailangan ng pag-iingat. Ito ay nakabatay sa saklaw ng function.

1var x = 10;

• let: Inilunsad sa ES6, ito ay isang paraan upang magdeklara ng mga variable na may block scope. Ito ay maaaring i-reassign ngunit hindi maaaring i-redeclare sa parehong saklaw.

1let y = 20;

• const: Ginagamit upang ideklara ang mga variable na hindi nababago (constants). Ito ay may block scope at hindi maaaring ma-reassign o ma-declare muli pagkatapos ng deklarasyon.

1const z = 30;

Saklaw

Ang mga variable ay may konsepto ng saklaw.

Pangkalahatang Saklaw

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Ang mga variable na nasa global scope ay maaaring ma-access mula saanman. Ang mga variable na dineklara gamit ang var ay may global o function scope, ngunit ang let at const ay may block scope.

Block Saklaw

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Block scope: Ang mga variable na dineklara gamit ang let o const ay balido lamang sa loob ng {} (curly braces).

• Nagkakaroon ng error kapag sinusubukang i-access mula sa labas ng {} (curly brackets).

Function Saklaw

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Function scope: Ang mga variable at function na dineklara sa loob ng isang function ay hindi maaaring ma-access mula sa labas ng function. Ang mga variable na dineklara sa loob ng isang function gamit ang var ay kabilang sa saklaw na ito.

• Sa halimbawang ito, ang variable na functionVar ay maaaring ma-access mula sa labas ng {} (curly braces) basta ito ay nasa loob ng saklaw ng function. Sa kabilang banda, ang pag-access sa variable na functionScoped mula sa labas ng saklaw ng function ay nagreresulta sa isang error.

Dahil dito, ang mga variable na dineklara gamit ang var ay may function scope lamang at walang block scope, na nagdudulot ng panganib na magamit sa hindi inaasahang saklaw. Mas mainam na gamitin ang const para sa mga variable na hindi nagbabago at karaniwang gumamit ng let, iniiwasan hangga't maaari ang paggamit ng var.

Mga Uri ng Data

Ang mga variable ng JavaScript ay maaaring mag-imbak ng mga halaga mula sa iba't ibang klase ng data. Mayroong string para sa paghawak ng teksto at number para sa paghawak ng mga numerikong halaga.

Ang mga pangunahing uri ng data ay ang mga sumusunod:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Mga Uri ng Primitive:
  • number: Para sa mga numerikong halaga (mga integer at floating-point na numero).
  • string: Para sa mga string ng mga karakter.
  • boolean: Pinangangasiwaan ang mga boolean na halaga na true o false.
  • null: Tahasang kumakatawan sa halaga ng 'wala'.
  • undefined: Isang halaga na awtomatikong itinalaga sa mga variable na hindi pa na-initialize.
  • Symbol: Isang uri ng data na ginagamit upang lumikha ng mga natatanging halaga.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Mga Uri ng Obheto:
  • Object: Isang istruktura ng data na may maraming katangian.
  • Array: Isang listahan na naglalaman ng maraming halaga.
  • Function: Isang bagay na function.

Pag-assign at Pag-reassign sa Mga Variable

Ang mga variable na dineklara gamit ang let o var ay maaaring i-reassign, ngunit ang const ay hindi maaaring i-reassign kapag naideklara na.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Pag-angat ng Variable (Variable Hoisting)

Sa JavaScript, may isang phenomenon kung saan ang mga deklarasyon ng variable ay 'inaangat' sa itaas ng kanilang saklaw (scope). Ang mga variable na dineklara gamit ang var ay inaangat, ngunit ang paggamit ng let o const bago ang deklarasyon ay nagdudulot ng error.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• Sa kasong ito, ang mga variable na idineklara gamit ang var ay inaangat, at ang kanilang mga halaga ay ipinapakita.

1console.log(b); // ReferenceError
2let b = 20;

• Ang mga variable na idineklara gamit ang let ay hindi inaangat, na nagreresulta sa isang error.

Tamang Paggamit ng Mga Variable

Pag-isipan ang mga sumusunod na punto para sa tamang paggamit ng mga variable.

• Mas mainam na gumamit ng const at iwasan ang paggamit ng var.
• Sundin ang mga alituntunin sa pagbibigay ng pangalan sa mga variable.
  • Gumamit ng camelCase, tulad ng userName o totalPrice.
  • Iwasan ang hindi malinaw na mga pangalan tulad ng data o value, at gumamit ng makabuluhang mga pangalan upang mapabuti ang mababasang teksto.
  • Ang pangalan ng variable ay hindi maaaring magsimula sa isang numero, kaya ang mga pangalan tulad ng 1variable ay hindi pinapayagan.
• Ang labis na paggamit ng mga global na variable ay maaaring magdulot ng kalituhan sa saklaw at magdulot ng mga bug, kaya iwasan ang paggamit ng mga ito hangga't maaari.

Buod

• var: Isang lumang paraan ng deklarasyon ng variable na may saklaw (scope) ng function.
• let: Isang variable na may saklaw (scope) sa block na maaaring i-reassign.
• const: Isang variable na may saklaw (scope) sa block na hindi maaaring i-reassign (constant).
• Mahalaga na gamitin ang mga variable ayon sa kanilang uri ng data at maging maingat sa kanilang saklaw (scope).

Ano ang mga escape character sa JavaScript?

Ang mga escape character ay isang paraan upang ilarawan ang mga karakter na may espesyal na kahulugan sa loob ng regular na mga literal na string. Sa JavaScript, ang mga escape character ay ipinapakilala sa pamamagitan ng backslash \ upang magbigay ng espesyal na epekto sa string o upang magdagdag ng mga control character. Ang mga escape character ay kapaki-pakinabang para isama ang mga elemento tulad ng newlines, tabs, o quotation marks sa isang string.

Mga halimbawa ng paggamit ng mga escape character

Narito ang ilang halimbawa ng code na gumagamit ng mga escape character.

Pag-escape sa double at single quotes

Gamitin ang mga escape character upang ilarawan ang double o single quotes sa loob ng isang string.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Pag-escape ng mga backslash

Upang isama ang isang backslash mismo sa isang string, i-escape ito gamit ang \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Pag-escape sa mga newline at tab

Maaari kang magpasok ng newlines at tabs upang gawing mas nababasa ang mahabang mga string.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Pag-escape ng mga Unicode character

Ang paggamit ng Unicode escape sequences ay nagbibigay-daan sa iyo na ilarawan ang mga partikular na karakter sa pamamagitan ng hexadecimal codes.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Mga Tala

Ang labis na paggamit ng mga escape character ay maaaring makasira sa pagiging nababasa

Ang sobrang paggamit ng mga escape character ay maaaring magpababa sa pagiging nababasa ng iyong code. Lalo na mahalagang gamitin ang mga escape character nang maingat sa mga mahabang string.

Isaalang-alang ang paggamit ng template literals

Sa JavaScript, ang template literals na gumagamit ng backticks ay nagbibigay-daan sa iyo na magdagdag ng newlines o naka-embed na mga expression nang hindi gumagamit ng mga escape character.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Buod

Ang mga escape character ay mahalaga para sa paglalarawan ng mga espesyal o control character sa loob ng mga string. Sa pamamagitan ng pag-escape sa single o double quotes at pagdaragdag ng newlines o tabs, maaari kang lumikha ng mas nababagong mga string. Gayunpaman, ang labis na paggamit ng mga escape character ay maaaring gawing mas mahirap basahin ang code, kaya't isaalang-alang ang paggamit ng template literals kung naaangkop.

Mga Bersyon ng JavaScript

Ang JavaScript ay may standardong spesipikasyon na tinatawag na ECMAScript (ES). Ang JavaScript ay umunlad batay sa standard na ito. Narito ang maikling paglalarawan ng mga pangunahing bersyon nito.

• ES3 (1999)

  Ang unang malawakang tinanggap na bersyon. Itinatag ang mga pangunahing syntax at tampok.

• ES5 (2009)

  Inilunsad ang strict mode, at nadagdag ang mga bagong tampok tulad ng Array.prototype.forEach, Object.keys, at iba pa.

• ES6 / ES2015 (2015)

  Isang malaking pag-update sa JavaScript ang naisagawa. Maraming mga tampok na pundasyon para sa modernong JavaScript, tulad ng let, const, arrow functions, classes, promises, modules, atbp., ay inilunsad.

• ES7 / ES2016 (2016)

  Array.prototype.includes at ang Exponentiation Operator (**) ay idinagdag.

• ES8 / ES2017 (2017)

  Ang async/await ay ipinakilala, na nagpapadali upang magsulat ng mga asynchronous na proseso.

• ES9 / ES2018 (2018)

  Idinagdag ang asynchronous iterators at ang Rest/Spread Properties.

• ES10 / ES2019 (2019)

  Ang flatMap at Object.fromEntries ay idinagdag.

• ES11 / ES2020 (2020)

  Ang Optional Chaining (?.) at ang Nullish Coalescing Operator (??) ay idinagdag, na nagpapahintulot sa mas simpleng at mas ligtas na pagsulat ng code.

• ES12 / ES2021 (2021)

  Idinagdag ang String.prototype.replaceAll at Promise.any, bukod sa iba pa.

• ES13 / ES2022 (2022)

  Idinagdag ang Array.prototype.at at ang mga klase na private na larangan (#field), bukod sa iba pa.

• ES14 / ES2023 (2023)

  Idinagdag ang Array.prototype.toSorted at Symbol.prototype.description, bukod sa iba pa.

• ES15 / ES2024 (2024)

  Idinagdag ang Promise.withResolvers para sa mas madaling pamamahala ng Promise at ang resizable na ArrayBuffer, bukod sa iba pa.

Ang kasalukuyang JavaScript ay ina-update taun-taon, at ang mga bagong tampok ay idinadagdag kahit sa pinakabagong bersyon.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video