wonderful.software
This page is a draft. It may be incomplete or contain inaccuracies. If you have any comment, please feel free to leave some feedback!

การสร้างฟังก์ชัน ​

ในตอนนี้ เราจะได้มาเรียนรู้กันเรื่องการสร้างฟังก์ชันไว้สำหรับใช้งานครับ

Arrow function ​

  • ที่จริงแล้วในบทก่อนๆ เราก็ได้สร้างฟังก์ชันกันไปพอสมควรแล้ว เมื่อเรากำหนดให้โค้ดสักชุดทำงานเมื่อปุ่มถูกกด เราได้เขียนโค้ดที่มีลักษณะดังนี้

    js
    myButton.onclick = () => {
  alert('Hi ' + yourName.value + '!')
}

    และนี่คือฟังก์ชันที่เราเขียน:

    js
    () => {
  alert('Hi ' + yourName.value + '!')
}

  • ในภาษา JavaScript ฟังก์ชันคือชุดคำสั่งที่ยังไม่ทำงานทันที แต่จะทำงานก็ต่อเมื่อมันถูกเรียกใช้งาน หน้าตาของมันเป็นแบบนี้

    js
    () => {
  // โค้ดที่เราต้องการให้ทำงานเมื่อฟังก์ชันถูกเรียกใช้งาน
}

ลองสร้างฟังก์ชันใน JavaScript Console ​

  • ลองใส่โค้ดนี้ลงใน JavaScript Console แล้วกดปุ่ม Enter

    
            
          console.log('a')
console.log('b')
          a
          b

    เขียนโค้ดหลายบรรทัดใน JavaScript Console

    ใน JavaScript Console เราสามารถเขียนโค้ดหลายบรรทัดได้ โดยการกดปุ่ม Shift+Enter เพื่อขึ้นบรรทัดใหม่

    ปกติโค้ดจะทำงานจากบนลงล่าง เราจึงเห็น a และ b แสดงผลออกมาตามลำดับ

  • แต่เมื่อเรานำโค้ดใส่ไว้ข้างในฟังก์ชัน () => { ... } ก็เหมือนกับว่าเราห่อหุ้มโค้ดไว้ให้ยังไม่ทำงาน ผลลัพธ์ที่เราได้กลับมาจึงเป็นข้อมูลที่เป็นชนิดฟังก์ชัน แล้วเราก็สามารถเรียกใช้งานมันได้

    
            
          () => {
  console.log('a')
  console.log('b')
}
            
            
          () => {
  console.log('a')
  console.log('b')
}

  • เพื่อให้สามารถเรียกใช้งานมันได้ เดี๋ยวจะตั้งชื่อให้มัน (โดยเก็บใส่ตัวแปร)

    
            
          let f = () => {
  console.log('a')
  console.log('b')
}
            
            
          undefined

  • เมื่อตรวจสอบชนิดของตัวแปร f จะเห็นว่าเป็นชนิดฟังก์ชัน

    
            
          typeof f
            
            
          "function"

  • เราก็จะสามารถเรียกใช้งานฟังก์ชัน f ได้ เมื่อเรียกใช้งาน โค้ดภายในฟังก์ชันก็จะถูกทำงาน ส่งผลให้เราเห็น a และ b แสดงออกมา

    
            
          f()
          a
          b

ขอบเขตของตัวแปร (variable scope) ​

  • ต่อไปเราจะมาเรียนรู้กันเรื่องขอบเขตของตัวแปรครับ

  • ตัวแปรที่ประกาศด้วยคำสั่ง let จะมีขอบเขตอยู่แค่ในบล็อกที่ล้อมรอบ

ตัวอย่างที่ 1 ​

  • ลองใส่โค้ดนี้ลงใน JavaScript Console

    
            
          let f = () => {
  let a = 1
  console.log('a is ' + a)
}

    โค้ดนี้จะประกาศฟังก์ชัน f ขึ้นมา

  • หลังจากนั้นเรียกใช้งานฟังก์ชัน f

    
            
          f()
          a is 1

  • ลองเรียกใช้งานตัวแปร a

    
            
          a
            
          ReferenceError: a is not defined
      >

    จะเห็นว่าตัวแปร a ไม่สามารถเข้าถึงได้ เพราะว่าตัวแปร a มีขอบเขตอยู่แค่ภายในบล็อกของฟังก์ชัน f เท่านั้น

ตัวอย่างที่ 2 ​

  • คราวนี้สร้างตัวแปร a ไว้ข้างนอก และทำให้แต่ละครั้งที่ฟังก์ชัน f ถูกเรียกใช้งาน ให้เพิ่มค่าของ a ทีละ 1

    
            
          let a = 1
let f = () => {
  console.log('a is ' + a)
  a = a + 1
}

  • ลองเรียกใช้งานฟังก์ชัน f ดูหลายๆ ครั้ง

    
            
          f()
          a is 1
    
            
          f()
          a is 2
    
            
          f()
          a is 3

  • ลองเช็คค่าของตัวแปร a ดู

    
            
          a
            
            
          4

  • เราจะเห็นว่า แต่ละครั้งที่เรียกใช้ฟังก์ชัน f() โค้ดภายในฟังก์ชันจะอ้างถึงตัวแปร a ที่อยู่ภายนอก ทำให้เป็นการอ้างถึงตัวแปร a ตัวเดียวกัน ส่งผลให้ค่าของตัวแปร a เพิ่มขึ้นเรื่อยๆ

ตัวอย่างที่ 3 ​

  • เราจะเริ่มจากโค้ดในตัวอย่างที่ 2 แต่เราจะย้ายการประกาศตัวแปร a เข้าไปในฟังก์ชัน f:

    
            
          let f = () => {
  let a = 1
  console.log('a is ' + a)
  a = a + 1
}

  • ลองเรียกใช้งานฟังก์ชัน f ดูหลายๆ ครั้ง

    
            
          f()
          a is 1
    
            
          f()
          a is 1
    
            
          f()
          a is 1

  • คราวนี้ เราจะเห็นว่า ในการเรียกใช้งานแต่ละครั้งของฟังก์ชัน f() โค้ดภายในฟังก์ชันจะอ้างถึงตัวแปร a ที่เพิ่งถูกสร้างขึ้นใหม่ขณะที่ฟังก์ชันถูกเรียกใช้งาน ซึ่งในแต่ละการเรียกใช้งานจะเป็นตัวแปรคนละตัวกัน

การสร้างฟังก์ชันรูปแบบอื่นๆ ​

  • ก่อนที่เราจะไปต่อ ขอหมายเหตุไว้นิดนึงว่า ในภาษา JavaScript มีวิธีสร้างฟังก์ชันที่ใช้กันบ่อยๆ อย่างน้อย 3 วิธีครับ:

    js
    // แบบที่ 1
let f = () => {
  // โค้ดที่เราต้องการให้ทำงานเมื่อฟังก์ชันถูกเรียกใช้งาน
}

// แบบที่ 2
let f = function() {
  // โค้ดที่เราต้องการให้ทำงานเมื่อฟังก์ชันถูกเรียกใช้งาน
}

// แบบที่ 3
function f() {
  // โค้ดที่เราต้องการให้ทำงานเมื่อฟังก์ชันถูกเรียกใช้งาน
}

    แต่ภายในคอร์สนี้ เราจะใช้แค่การเขียนโค้ดแบบแรกเท่านั้น (หากเรียนคอร์สนี้ควบคู่กับคอร์สอื่นๆ อาจจะได้เจอวิธีการเขียนโค้ดที่แตกต่างกันไป)

Up next ​

  • เราพอรู้จักกับฟังก์ชันแล้ว ฟังก์ชันเป็นโครงสร้างภาษาที่มีประโยชน์หลายอย่างมากๆ และในตอนต่อไป เราจะลองใช้ฟังก์ชันมาลดโค้ดที่ซ้ำกันดู