Logic & Loops

A variable is a named box that holds a value. Use let when the value will change later, and const when it won't. ตัวแปร (variable) คือกล่องที่มีชื่อสำหรับเก็บค่า ใช้ let เมื่อค่าจะเปลี่ยนในภายหลัง และใช้ const เมื่อค่าจะไม่เปลี่ยน

Every decision in code starts with a question whose answer is true or false. These yes/no values are called booleans. You make them with comparison and logical operators. การตัดสินใจทุกครั้งในโค้ดเริ่มจากคำถามที่ตอบได้ว่า true (จริง) หรือ false (เท็จ) ค่าแบบนี้เรียกว่า บูลีน (boolean) ซึ่งสร้างได้ด้วยตัวดำเนินการเปรียบเทียบและตัวดำเนินการทางตรรกะ

if runs a block of code only when its condition is true. Add else for what should happen otherwise. To check several conditions, chain them with else if. JavaScript checks them from top to bottom, runs the first one that is true, and skips the rest. if จะรันโค้ดในบล็อกก็ต่อเมื่อเงื่อนไขเป็น true เพิ่ม else สำหรับสิ่งที่ต้องทำเมื่อเงื่อนไขไม่เป็นจริง ถ้าต้องตรวจหลายเงื่อนไข ให้ต่อกันด้วย else if โดย JavaScript จะตรวจจากบนลงล่าง ทำงานในเงื่อนไขแรกที่เป็นจริง แล้วข้ามส่วนที่เหลือทั้งหมด

switch compares one value against a list of cases. It reads more cleanly than a long else-if chain when you check the same variable for exact matches. End each case with break, or the code falls through into the next case. default runs when no case matches. switch นำค่าหนึ่งค่าไปเทียบกับรายการ case ต่างๆ อ่านง่ายกว่าการเขียน else if ยาวๆ เมื่อเราตรวจตัวแปรเดียวกันว่าตรงกับค่าใดพอดี ปิดท้ายแต่ละ case ด้วย break ไม่เช่นนั้นโค้ดจะไหลต่อ (fall through) ไปยัง case ถัดไป และ default จะทำงานเมื่อไม่มี case ใดตรงเลย

if / else or switch?ใช้ if / else หรือ switch ดี?

• Use if / else for ranges or conditions that mix variables: score >= 80, age < 13 && isMember.ใช้ if / else เมื่อเงื่อนไขเป็นช่วงค่า หรือใช้หลายตัวแปรร่วมกัน เช่น score >= 80, age < 13 && isMember
• Use switch to compare one value against several exact options: menu choices, status codes, days of the week.ใช้ switch เมื่อเทียบค่าเดียวกับตัวเลือกที่ต้องตรงกันพอดีหลายค่า เช่น เมนู รหัสสถานะ หรือชื่อวัน
• switch compares with ===, so the number 1 does not match the text "1".switch เปรียบเทียบด้วย === ดังนั้นตัวเลข 1 จะไม่ตรงกับข้อความ "1"

A for loop repeats code a set number of times. Everything that controls the loop sits in its header, in three parts separated by semicolons. ลูป for ใช้ทำโค้ดซ้ำตามจำนวนรอบที่กำหนด ทุกอย่างที่ควบคุมลูปอยู่ในส่วนหัว ซึ่งแบ่งเป็น 3 ส่วน คั่นด้วยเครื่องหมายอัฒภาค (;)

1. 1Start. let i = 0 runs once, before the first round. It creates the counter.จุดเริ่มต้น let i = 0 ทำงานครั้งเดียวก่อนรอบแรก เพื่อสร้างตัวนับ
2. 2Condition. i < 5 is checked before every round. When it becomes false, the loop ends.เงื่อนไข i < 5 ถูกตรวจก่อนทุกรอบ เมื่อกลายเป็น false ลูปจะจบ
3. 3Update. i++ runs after every round. It adds 1 to i.การอัปเดต i++ ทำงานหลังจบแต่ละรอบ โดยเพิ่มค่า i ทีละ 1

Trace it by handไล่โค้ดทีละรอบ

Tracing means writing down what each variable holds in each round. Here is for (let i = 0; i < 3; i++) console.log(i);การไล่โค้ด (trace) คือการจดว่าตัวแปรมีค่าเท่าไรในแต่ละรอบ นี่คือการไล่โค้ด for (let i = 0; i < 3; i++) console.log(i);

Other ways to countวิธีนับแบบอื่นๆ

while repeats as long as its condition stays true. Use it when you don't know in advance how many rounds you need. while จะวนซ้ำไปเรื่อยๆ ตราบใดที่เงื่อนไขยังเป็น true เหมาะกับกรณีที่ไม่รู้ล่วงหน้าว่าต้องวนกี่รอบ

do…while checks the condition after the body, so the body always runs at least once. That suits things like "ask once, then ask again if the answer was wrong". do…while ตรวจเงื่อนไขหลังทำงานในบล็อก จึงทำงานอย่างน้อยหนึ่งรอบเสมอ เหมาะกับงานแบบ "ถามหนึ่งครั้ง แล้วถามใหม่ถ้าคำตอบผิด"

• Use for when you know how many rounds you need, or have a list to go through.ใช้ for เมื่อรู้จำนวนรอบ หรือมีรายการให้วนผ่าน
• Use while when you repeat until something happens.ใช้ while เมื่อต้องทำซ้ำจนกว่าจะเกิดเหตุการณ์บางอย่าง

An array is an ordered list of values, written in square brackets. Each item has a position called its index, which starts at 0. Loops and arrays go together: you will often loop over a list to read, count or change each item. อาร์เรย์ (array) คือรายการของค่าที่เรียงตามลำดับ เขียนไว้ในวงเล็บเหลี่ยม [ ] แต่ละค่ามีตำแหน่งเรียกว่า index (ดัชนี) ซึ่งเริ่มจาก 0 ลูปกับอาร์เรย์มักใช้คู่กัน เรามักวนลูปผ่านรายการเพื่ออ่าน นับ หรือแก้ไขแต่ละค่า

break and continuebreak และ continue

• break stops the loop completely and jumps to the code after it.break หยุดลูปทันที แล้วข้ามไปทำโค้ดที่อยู่ถัดจากลูป
• continue skips the rest of this round and moves on to the next one.continue ข้ามโค้ดที่เหลือในรอบนี้ แล้วไปเริ่มรอบถัดไป

A function is a named block of code you can run again and again. You give it inputs called parameters, it does its work, and it can hand back a result with return. ฟังก์ชัน (function) คือบล็อกโค้ดที่มีชื่อและเรียกใช้ซ้ำได้เรื่อยๆ เราส่งข้อมูลขาเข้าที่เรียกว่า พารามิเตอร์ (parameter) ให้ ฟังก์ชันจะทำงาน แล้วส่งผลลัพธ์กลับมาด้วยคำสั่ง return

Function or method?ฟังก์ชันกับเมธอดต่างกันอย่างไร?

A method is a function that belongs to a value or object. You call it with a dot: name.toUpperCase(), list.push(4), Math.round(2.5). The next lesson lists the ones you'll use most. เมธอด (method) ก็คือฟังก์ชันที่เป็นของค่าหรือออบเจกต์หนึ่งๆ เรียกใช้ด้วยจุด เช่น name.toUpperCase(), list.push(4), Math.round(2.5) บทถัดไปรวมเมธอดที่ใช้บ่อยที่สุดไว้ให้

JavaScript comes with ready-made methods for text, lists and numbers. You don't need to memorize them all. Learn these, and look up the rest when you need them. JavaScript มีเมธอดสำเร็จรูปสำหรับข้อความ รายการ และตัวเลขให้ใช้ ไม่จำเป็นต้องจำทั้งหมด เรียนรู้ชุดนี้ก่อน แล้วค่อยค้นหาตัวอื่นเมื่อต้องใช้

Put them togetherลองใช้ร่วมกัน

• Chaining: input.trim().toLowerCase() trims first, then lowercases the result.การเรียกต่อกัน (chaining): input.trim().toLowerCase() จะตัดช่องว่างก่อน แล้วจึงแปลงผลลัพธ์เป็นตัวพิมพ์เล็ก
• Changes vs copies: some methods change the original array (push, pop, sort). Others return something new and leave the original alone (map, filter, slice, and every string method).แก้ของเดิม หรือสร้างใหม่: บางเมธอดแก้ไขอาร์เรย์เดิมโดยตรง (push, pop, sort) ส่วนบางเมธอดคืนค่าใหม่โดยไม่แตะของเดิม (map, filter, slice และเมธอดของ string ทุกตัว)

Five exercises, from easy to harder. Write your answer in the editor and press Run. Open the solution only after you have tried. แบบฝึกหัด 5 ข้อ เรียงจากง่ายไปยาก เขียนคำตอบในตัวแก้โค้ดแล้วกด Run ลองทำเองก่อน แล้วค่อยเปิดดูเฉลย

Exercise 1 · Even totalแบบฝึกหัด 1 · ผลรวมเลขคู่

Add up all the even numbers from 1 to 50 and print the total. The correct answer is 650.หาผลรวมของเลขคู่ทั้งหมดตั้งแต่ 1 ถึง 50 แล้วแสดงผลรวม คำตอบที่ถูกต้องคือ 650

Uses:ใช้: for if % +=

Exercise 2 · Calculatorแบบฝึกหัด 2 · เครื่องคิดเลข

Use switch on op to print the result of a and b. Support +, -, * and /. For any other operator, print "Unknown operator".ใช้ switch กับตัวแปร op เพื่อแสดงผลลัพธ์ของ a กับ b รองรับ +, -, * และ / ถ้าเป็นเครื่องหมายอื่นให้แสดง "ไม่รู้จักเครื่องหมายนี้"

Uses:ใช้: switch case break default

Exercise 3 · FizzBuzzแบบฝึกหัด 3 · FizzBuzz

Print the numbers 1 to 20. For multiples of 3 print "Fizz" instead, for multiples of 5 print "Buzz", and for multiples of both print "FizzBuzz". This is a classic job-interview warm-up.แสดงตัวเลข 1 ถึง 20 ถ้าเป็นพหุคูณของ 3 ให้แสดง "Fizz" แทน ถ้าเป็นพหุคูณของ 5 ให้แสดง "Buzz" และถ้าเป็นพหุคูณของทั้งสองให้แสดง "FizzBuzz" โจทย์นี้เป็นโจทย์อุ่นเครื่องยอดนิยมในการสัมภาษณ์งาน

Uses:ใช้: for if else if % &&

Exercise 4 · Ticket priceแบบฝึกหัด 4 · ราคาตั๋ว

Write a function ticketPrice(age) that returns the price in baht: under 4 is free (0), ages 4 to 12 pay 100, 60 and over pay 120, and everyone else pays 200.เขียนฟังก์ชัน ticketPrice(age) ที่คืนค่าราคาตั๋วเป็นบาท: อายุต่ำกว่า 4 ปีเข้าฟรี (0) อายุ 4–12 ปีจ่าย 100 อายุ 60 ปีขึ้นไปจ่าย 120 และคนอื่นๆ จ่าย 200

Uses:ใช้: function if else if return

Exercise 5 · Longest wordแบบฝึกหัด 5 · คำที่ยาวที่สุด

Find the longest word in the list and print it. Then change the list and check that your code still works.หาคำที่ยาวที่สุดในรายการแล้วแสดงผล จากนั้นลองเปลี่ยนรายการ แล้วตรวจว่าโค้ดยังทำงานถูกต้อง

Uses:ใช้: for…of if .length

Everyone makes these. Knowing them by sight will save you hours. ทุกคนเคยพลาดแบบนี้ ถ้าจำรูปแบบได้ จะช่วยประหยัดเวลาแก้บั๊กไปได้หลายชั่วโมง

Once the logic makes sense, a new language is mostly new spelling. PHP puts $ in front of variables. Python uses a colon and indentation instead of curly braces, and has no do…while. เมื่อเข้าใจตรรกะแล้ว การเรียนภาษาใหม่ส่วนใหญ่ก็แค่เปลี่ยนวิธีเขียน PHP ใส่ $ หน้าชื่อตัวแปร ส่วน Python ใช้เครื่องหมาย : และการย่อหน้าแทนวงเล็บปีกกา และไม่มี do…while

if (x > 0) {
  ...
} else if (x === 0) {
  ...
} else {
  ...
}

if ($x > 0) {
  ...
} elseif ($x === 0) {
  ...
} else {
  ...
}

if x > 0:
    ...
elif x == 0:
    ...
else:
    ...

switch (day) {
  case "sat":
    ...
    break;
  default:
    ...
}

switch ($day) {
  case "sat":
    ...
    break;
  default:
    ...
}

match day:  # 3.10+
    case "sat":
        ...
    case _:
        ...

for (let i = 0; i < 5; i++) {
  ...
}

for ($i = 0; $i < 5; $i++) {
  ...
}

for i in range(5):
    ...

for (const x of list) {
  ...
}

foreach ($list as $x) {
  ...
}

for x in list:
    ...

while (n > 0) {
  n--;
}

while ($n > 0) {
  $n--;
}

while n > 0:
    n -= 1

function add(a, b) {
  return a + b;
}

function add($a, $b) {
  return $a + $b;
}

def add(a, b):
    return a + b

console.log(x);

echo $x;

print(x)

&&  ||  !

&&  ||  !

and  or  not

list.length
text.length

count($list)
strlen($text)

len(list)
len(text)

The English terms are what you'll see in documentation, error messages and search results, so it pays to know both. คำศัพท์ภาษาอังกฤษคือสิ่งที่จะเจอในเอกสาร ข้อความแจ้งข้อผิดพลาด และผลการค้นหา จึงควรรู้ทั้งสองภาษา