JavaScript Beginner Guide

You already have JavaScript: every browser runs it. Open the developer tools (F12, or ⌘+⌥+J on a Mac), click Console, and type 1 + 2. To run files on your computer, install Node.js (the LTS version), which runs JavaScript outside the browser. คุณมี JavaScript อยู่แล้ว เพราะทุกเบราว์เซอร์รันได้ เปิดเครื่องมือนักพัฒนา (F12 หรือ ⌘+⌥+J บน Mac) คลิก Console แล้วพิมพ์ 1 + 2 ถ้าจะรันไฟล์บนเครื่อง ให้ติดตั้ง Node.js (เวอร์ชัน LTS) ซึ่งรัน JavaScript นอกเบราว์เซอร์ได้

$ node --version
v22.21.1

$ node hello.js
Hello, world!
1 + 2 = 3

On a web page, JavaScript goes in a <script> tag, usually just before </body> or in its own file: บนหน้าเว็บ JavaScript อยู่ในแท็ก <script> มักวางไว้ก่อน </body> หรือแยกเป็นไฟล์ของตัวเอง:

Use const for values that won't be reassigned, and let for those that will. Avoid var, the old form. JavaScript has a handful of basic types; typeof tells you which one a value is. ใช้ const กับค่าที่จะไม่กำหนดใหม่ และ let กับค่าที่จะเปลี่ยน หลีกเลี่ยง var ซึ่งเป็นรูปแบบเก่า JavaScript มีชนิดข้อมูลพื้นฐานไม่กี่ชนิด และ typeof บอกได้ว่าค่าหนึ่งเป็นชนิดไหน

=== compares value and type; == converts types first, which surprises people. Every value also counts as truthy or falsy in an if: the falsy ones are false, 0, "", null, undefined and NaN. Everything else is truthy, even "0" and []. === เปรียบเทียบทั้งค่าและชนิด ส่วน == แปลงชนิดก่อน ซึ่งมักทำให้งง ทุกค่ายังนับเป็น truthy หรือ falsy เมื่ออยู่ใน if ค่าที่เป็น falsy ได้แก่ false, 0, "", null, undefined และ NaN นอกนั้นเป็น truthy ทั้งหมด แม้แต่ "0" และ []

Template literals use backticks and ${…} to put values into text, and can span several lines. Strings never change in place: every method returns a new string. template literal ใช้เครื่องหมาย backtick และ ${…} เพื่อใส่ค่าลงในข้อความ และเขียนหลายบรรทัดได้ string ไม่เปลี่ยนแปลงในตัวเอง ทุก method จะคืน string ใหม่

Thai text, emoji and formattingข้อความไทย อีโมจิ และการจัดรูปแบบ

length counts UTF-16 units. Thai letters are one unit each, so Thai is counted correctly, but an emoji takes two. Spread a string into an array ([...s]) to count real characters. Intl formats numbers and dates for any language. length นับเป็นหน่วย UTF-16 ตัวอักษรไทยใช้ตัวละหนึ่งหน่วย จึงนับภาษาไทยได้ถูกต้อง แต่อีโมจิใช้สองหน่วย ให้กระจาย string เป็นอาร์เรย์ ([...s]) เพื่อนับตัวอักษรจริง ส่วน Intl จัดรูปแบบตัวเลขและวันที่ได้ทุกภาษา

Modern JavaScript rarely loops over arrays by hand. map transforms every item, filter keeps some, reduce combines them into one value, and find returns the first match. They return new arrays and leave the original alone. JavaScript สมัยใหม่ไม่ค่อยวนลูปอาร์เรย์เอง map แปลงทุกสมาชิก filter เก็บไว้บางตัว reduce รวมทุกตัวเป็นค่าเดียว และ find คืนตัวแรกที่ตรง method เหล่านี้คืนอาร์เรย์ใหม่และไม่แตะอาร์เรย์เดิม

Spread (...) copies an array or merges several. Destructuring pulls values out by position. And watch out: sort() without a compare function sorts as text, and it changes the array itself. spread (...) ใช้คัดลอกอาร์เรย์หรือรวมหลายอาร์เรย์ destructuring ดึงค่าออกมาตามตำแหน่ง และระวัง: sort() ที่ไม่ได้ส่งฟังก์ชันเปรียบเทียบจะเรียงแบบข้อความ และเปลี่ยนอาร์เรย์เดิมด้วย

An object groups named values. Read with user.name or user["name"]. Destructuring pulls fields into variables, spread makes a copy with changes, and optional chaining (?.) reads safely through values that might be missing. ออบเจกต์รวมค่าที่มีชื่อเข้าด้วยกัน อ่านค่าด้วย user.name หรือ user["name"] destructuring ดึงฟิลด์ออกมาเป็นตัวแปร spread สร้างสำเนาพร้อมการเปลี่ยนแปลง และ optional chaining (?.) อ่านค่าอย่างปลอดภัยผ่านค่าที่อาจไม่มีอยู่

JSON is the text format APIs use to send data. It looks like a JavaScript object, but keys must be in double quotes. JSON.stringify turns a value into JSON text and JSON.parse turns it back. JSON คือรูปแบบข้อความที่ API ใช้ส่งข้อมูล หน้าตาคล้ายออบเจกต์ของ JavaScript แต่คีย์ต้องอยู่ในเครื่องหมายคำพูดคู่ JSON.stringify แปลงค่าเป็นข้อความ JSON และ JSON.parse แปลงกลับ

Arrow functions ((a, b) => a + b) are the short form you'll see everywhere. Functions are values: you can store them, pass them to other functions (callbacks), and return them. A function that remembers variables from where it was created is a closure. arrow function ((a, b) => a + b) คือรูปแบบสั้นที่เห็นได้ทุกที่ ฟังก์ชันเป็นค่า จึงเก็บไว้ในตัวแปร ส่งให้ฟังก์ชันอื่น (callback) และคืนออกมาได้ ฟังก์ชันที่จำตัวแปรจากที่ที่มันถูกสร้างไว้ เรียกว่า closure

A class is a template for objects that share methods. #balance is a private field: code outside the class can't read or change it. extends builds a new class on top of another. class คือแม่แบบของออบเจกต์ที่ใช้ method ร่วมกัน #balance คือ private field โค้ดนอกคลาสอ่านหรือแก้ไม่ได้ ส่วน extends สร้างคลาสใหม่ต่อยอดจากคลาสเดิม

throw stops the current code and jumps to the nearest catch. Throw Error objects (not strings) so you get a name, a message and a stack trace. Extend Error to make your own kinds of error. throw หยุดโค้ดปัจจุบันแล้วกระโดดไปที่ catch ที่ใกล้ที่สุด ให้ throw ออบเจกต์ Error (ไม่ใช่ string) เพื่อจะได้ชื่อ ข้อความ และ stack trace และ extends Error เพื่อสร้างชนิดข้อผิดพลาดของตัวเอง

JavaScript runs one piece of code at a time. Slow work (timers, network requests, files) is handed off, and its callback runs later, once the current code has finished. That's why the order below isn't top to bottom. JavaScript รันโค้ดทีละชิ้น งานที่ช้า (timer การเรียกเครือข่าย ไฟล์) จะถูกส่งต่อออกไป แล้ว callback ของมันจะทำงานทีหลัง เมื่อโค้ดปัจจุบันทำงานเสร็จ นี่คือเหตุผลที่ลำดับด้านล่างไม่ได้เรียงจากบนลงล่าง

A Promise is a value that arrives later. await pauses an async function until the promise settles, so asynchronous code reads like normal code. Promise.all waits for several at once, in parallel. Promise คือค่าที่จะมาถึงทีหลัง await หยุดฟังก์ชัน async ไว้จนกว่า promise จะเสร็จ ทำให้โค้ด asynchronous อ่านได้เหมือนโค้ดปกติ ส่วน Promise.all รอหลายตัวพร้อมกันแบบขนาน

In real code, the slow call is usually fetch, which loads data from a URL: ในโค้ดจริง การเรียกที่ช้ามักเป็น fetch ซึ่งโหลดข้อมูลจาก URL:

A module is a file that exports what other files may use; they import it. Each module has its own scope, so names don't clash. This ran in a real terminal with Node: the .mjs extension tells Node the files are modules. โมดูลคือไฟล์ที่ export สิ่งที่ไฟล์อื่นใช้ได้ แล้วไฟล์อื่น import เข้าไป แต่ละโมดูลมีขอบเขตของตัวเอง ชื่อจึงไม่ชนกัน ตัวอย่างนี้รันในเทอร์มินัลจริงด้วย Node นามสกุล .mjs บอก Node ว่าไฟล์เหล่านี้เป็นโมดูล

$ node main.mjs
VAT 7%: ฿87.50
Total: ฿1,337.50

• Named exports (export function vat) are imported by name in braces. A file has at most one default export, imported without braces.named export (export function vat) import ด้วยชื่อในวงเล็บปีกกา แต่ละไฟล์มี default export ได้ไม่เกินหนึ่งตัว และ import โดยไม่ต้องมีวงเล็บปีกกา
• In a Node project, add "type": "module" to package.json to use .js instead of .mjs.ในโปรเจกต์ Node ให้เพิ่ม "type": "module" ใน package.json เพื่อใช้ .js แทน .mjs
• In the browser, load the entry file with <script type="module" src="main.js">.ในเบราว์เซอร์ ให้โหลดไฟล์เริ่มต้นด้วย <script type="module" src="main.js">

The DOM is the page as JavaScript sees it: a tree of elements you can find, change and listen to. These labs run in a small sandboxed page under the editor. Press Run, then click the buttons yourself. DOM คือหน้าเว็บในมุมมองของ JavaScript เป็นต้นไม้ขององค์ประกอบที่ค้นหา เปลี่ยนแปลง และดักฟังเหตุการณ์ได้ แล็บเหล่านี้รันในหน้าเว็บเล็กๆ แบบ sandbox ใต้ตัวแก้โค้ด กด Run แล้วลองคลิกปุ่มด้วยตัวเอง

Create elements with document.createElement and add them with append. Put user text in with textContent, never innerHTML: textContent shows <b> as text instead of running it as HTML. สร้างองค์ประกอบด้วย document.createElement แล้วเพิ่มด้วย append ใส่ข้อความจากผู้ใช้ด้วย textContent ห้ามใช้ innerHTML เพราะ textContent แสดง <b> เป็นข้อความแทนการตีความเป็น HTML

Write the code, press Run, and compare with the solution when you're done. Every solution was run with Node, and its output is shown under it. เขียนโค้ด กด Run แล้วเทียบกับเฉลยเมื่อเสร็จ ทุกเฉลยถูกรันด้วย Node และแสดงผลลัพธ์ไว้ด้านล่าง

Every one of these trips up beginners. The comments show what Node 22 really printed. มือใหม่ทุกคนเคยสะดุดเรื่องเหล่านี้ คอมเมนต์แสดงสิ่งที่ Node 22 พิมพ์ออกมาจริง

MDN, error messages and job posts all use the English terms, so it pays to know both. MDN ข้อความแจ้งข้อผิดพลาด และประกาศรับสมัครงาน ล้วนใช้คำภาษาอังกฤษ จึงควรรู้ทั้งสองภาษา