ความแตกต่างของ Functional Expressions ใน JavaScript

ชื่อ Function Expression นั้นไม่ได้ถูกตั้งขึ้นมาลอยๆ มันหมายความตามนั้นจริงๆ นั่นคือ ฟังก์ชันประเภทนี้เป็นส่วนหนึ่งของนิพจน์ (expression) ใดๆ

ตัวอย่างเช่น เราสามารถนำสตริงมาบวกกับฟังก์ชันแบบไม่มีชื่อ (anonymous function) ได้:

javascriptlet str = 'str' + function() {return 3;};
console.log(str); // จะแสดงผล 'strfunction() {return 3;}'

ทำไมเราถึงเห็นผลลัพธ์ที่แปลกแบบนี้ และไม่ใช่เลข 3? นั่นเป็นเพราะพจน์ที่สองนั้นไม่ใช่ผลลัพธ์จากการทำงานของฟังก์ชัน แต่เป็นซอร์สโค้ดต้นฉบับของมัน (เพราะเราไม่ได้เรียกใช้ฟังก์ชันนี้ เราแค่เขียนมันลงไป)

กล่าวคือ ชื่อ functional expression นั้นบ่งบอกว่าฟังก์ชันดังกล่าวเข้ามามีส่วนร่วมในนิพจน์บางอย่าง

การกำหนดค่าให้กับตัวแปรก็ถือเป็นนิพจน์เช่นกัน:

javascriptlet func = function() {
  console.log('!');
};

นอกจากนี้ เรายังสามารถส่งฟังก์ชันไปเป็นพารามิเตอร์ใน console.log ได้ และมันจะแสดงซอร์สโค้ดของฟังก์ชันนั้นออกมาที่คอนโซล - นี่ก็ถือเป็นนิพจน์เช่นกัน:

javascriptconsole.log(function() {return 3;});

ทำไมเรื่องนี้ถึงสำคัญ: เพราะความแตกต่างระหว่าง Function Declaration และ Function Expression นั้นไม่ได้อยู่ที่ว่าฟังก์ชันแรกถูกสร้างขึ้นพร้อมกับชื่อ ส่วนฟังก์ชันที่สองนั้นไม่ได้มีชื่อตั้งแต่เริ่มต้น แต่มันไม่ใช่แบบนั้น

ตัวอย่าง นี่คือฟังก์ชันที่ไม่มีชื่อ แต่ไม่ได้มีส่วนร่วมในนิพจน์ใดๆ (พูดง่ายๆ คือ ไม่ได้มีการกระทำใดๆ กับมัน):

javascript/*
  ฟังก์ชันนี้จะเป็น Function Declaration,
  แต่มีข้อผิดพลาดทางวากยสัมพันธ์ (syntax error):
*/
function() {
  console.log('!');
}

โค้ดแบบนี้จะให้ข้อผิดพลาด! ทำไม: เนื่องจากฟังก์ชันไม่ได้มีส่วนร่วมในนิพจน์ใดๆ บราวเซอร์จึงถือว่ามันเป็น Function Declaration แต่ไม่พบชื่อของมัน และจึงส่งข้อผิดพลาดออกมา

เพื่อให้ข้อผิดพลาดหายไป เราต้องทำให้ฟังก์ชันกลายเป็นส่วนหนึ่งของนิพจน์บางอย่าง ตัวอย่างเช่น ใส่โอเปอเรเตอร์ + ไว้ข้างหน้าฟังก์ชัน:

javascript+function() { // โค้ดแบบนี้ถูกต้อง
  console.log('!');
};

มันทำงานอย่างไร: ตัวโอเปอเรเตอร์ + เองไม่ได้ทำอะไร นี่เหมือนกับการเขียนเลข +3 แทนที่จะเป็นเลข 3 - เป็นที่ยอมรับได้ แต่ไม่ได้เปลี่ยนอะไร

แต่ในกรณีของฟังก์ชัน - มันเปลี่ยน ตอนนี้ฟังก์ชันของเราไม่ได้แค่ถูกเขียนลงไป แต่ได้มีส่วนร่วมในนิพจน์แล้ว ดังนั้นจึงจะไม่มีข้อผิดพลาดเกิดขึ้น ไม่มีผลลัพธ์จากการทำงานของฟังก์ชันเช่นกัน เพราะเราแค่เขียนมันลงไป แต่ไม่ได้เรียกใช้

แทนที่จะใช้ + เราสามารถเขียนอะไรก็ได้ ตัวอย่างเช่น:

javascript-function() { // โค้ดแบบนี้ถูกต้อง
  console.log('!');
};

!function() { // โค้ดแบบนี้ถูกต้อง
  console.log('!');
};

เรายังสามารถใส่ฟังก์ชันของเราไว้ในวงเล็บ () ได้ ในกรณีนี้มันก็จะกลายเป็น functional expression เช่นกัน:

javascript(function() { // โค้ดแบบนี้ถูกต้อง
  console.log('!');
});

javascriptfunction func() {
  console.log('!');
}

javascriptlet func = function() {
  console.log('!');
}

javascript+function() {
  console.log('!');
}

javascript!function func() {
  console.log('!');
}

javascript-function func() {
  console.log('!');
}

javascript1 + function func() {
  console.log('!');
}

javascript(function func() {
  console.log('!');
})

javascriptconsole.log(
  function() {
    console.log('!');
  }
);