CoffeeScript - ฟังก์ชั่น

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

ฟังก์ชันช่วยให้โปรแกรมเมอร์สามารถแบ่งโปรแกรมขนาดใหญ่ออกเป็นฟังก์ชันขนาดเล็กและสามารถจัดการได้

โดยทั่วไปการใช้ JavaScript เราสามารถกำหนดฟังก์ชันได้สองประเภท - named functionsฟังก์ชั่นปกติที่มีชื่อฟังก์ชันและ Function expressions. การใช้นิพจน์ฟังก์ชันเราสามารถกำหนดฟังก์ชันให้กับตัวแปรได้

//named function
function sayHello(){
   return("Hello there");
}
 
//function expressions
var message = function sayHello(){
   return("Hello there");
}

ฟังก์ชั่นใน CoffeeScript

ไวยากรณ์ของฟังก์ชันใน CoffeeScript นั้นง่ายกว่าเมื่อเทียบกับ JavaScript ใน CoffeeScript เรากำหนดเฉพาะนิพจน์ฟังก์ชัน

functionคำสำคัญถูกกำจัดใน CoffeeScript ในการกำหนดฟังก์ชันที่นี่เราต้องใช้ลูกศรบาง ๆ (->).

เบื้องหลังคอมไพเลอร์ CoffeeScript จะแปลงลูกศรเป็นนิยามฟังก์ชันใน JavaScript ดังที่แสดงด้านล่าง

(function() {});

ไม่บังคับให้ใช้ไฟล์ returnคำสำคัญใน CoffeeScript ทุกฟังก์ชันใน CoffeeScript จะส่งกลับคำสั่งสุดท้ายในฟังก์ชันโดยอัตโนมัติ

  • หากเราต้องการกลับไปที่ฟังก์ชันการโทรหรือส่งคืนค่าก่อนที่เราจะถึงจุดสิ้นสุดของฟังก์ชันเราสามารถใช้ไฟล์ return คำสำคัญ.

  • นอกเหนือจากฟังก์ชันในบรรทัด (ฟังก์ชันที่อยู่ในบรรทัดเดียว) เรายังสามารถกำหนดฟังก์ชันหลายบรรทัดใน CoffeeScript ได้อีกด้วย เนื่องจากเครื่องมือจัดฟันที่เป็นลอนถูกกำจัดออกไปเราสามารถทำได้โดยรักษาการเยื้องที่เหมาะสม

การกำหนดฟังก์ชัน

ต่อไปนี้เป็นไวยากรณ์ของการกำหนดฟังก์ชันใน CoffeeScript

function_name = -> function_body

ตัวอย่าง

ด้านล่างเป็นตัวอย่างของฟังก์ชันใน CoffeeScript ที่นี่เราได้สร้างฟังก์ชันชื่อgreet. ฟังก์ชันนี้จะส่งคืนคำสั่งในนั้นโดยอัตโนมัติ บันทึกลงในไฟล์ที่มีชื่อfunction_example.coffee

greet = -> "This is an example of a function"

คอมไพล์โดยดำเนินการคำสั่งต่อไปนี้ในพรอมต์คำสั่ง

c:\>coffee -c function_example.coffee

ในการคอมไพล์จะสร้างโค้ด JavaScript ต่อไปนี้ ที่นี่คุณสามารถสังเกตได้ว่าคอมไพเลอร์ CoffeeScript ส่งคืนค่าสตริงในฟังก์ชันที่ชื่อโดยอัตโนมัติgreet().

// Generated by CoffeeScript 1.10.0
(function() {
  var greet;
  
  greet = function() {
    return "This is an example of a function";
  };

}).call(this);

ฟังก์ชั่นหลายบรรทัด

นอกจากนี้เรายังสามารถกำหนดฟังก์ชันที่มีหลายบรรทัดได้โดยคงการเยื้องไว้แทนวงเล็บปีกกา แต่เราต้องสอดคล้องกับการเยื้องที่เราติดตามสำหรับบรรทัดตลอดทั้งฟังก์ชัน

greet =  ->
  console.log "Hello how are you"

ในการรวบรวม CoffeeScript ข้างต้นจะให้รหัส JavaScript ต่อไปนี้ คอมไพเลอร์ CoffeeScript จะจับเนื้อหาของฟังก์ชันที่เราแยกออกโดยใช้การเยื้องและวางไว้ในวงเล็บปีกกา

// Generated by CoffeeScript 1.10.0
(function() {
  var greet;

  greet = function() {
    return console.log("Hello how are you");
  };

}).call(this);

ฟังก์ชันที่มีอาร์กิวเมนต์

เรายังสามารถระบุอาร์กิวเมนต์ในฟังก์ชันโดยใช้วงเล็บดังที่แสดงด้านล่าง

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c

ในการรวบรวมไฟล์ CoffeeScript ด้านบนไฟล์จะสร้าง JavaScript ดังต่อไปนี้

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

}).call(this);

เรียกใช้ฟังก์ชัน

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

add = ->
  a=20;b=30
  c=a+b
  console.log "Sum of the two numbers is: "+c  
add()

ในการคอมไพล์ตัวอย่างด้านบนจะแสดง JavaScript ต่อไปนี้

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function() {
    var a, b, c;
    a = 20;
    b = 30;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };
  add();
}).call(this);

ในการรันโค้ด CoffeeScript ข้างต้นจะสร้างผลลัพธ์ต่อไปนี้

Sum of the two numbers is: 50

การเรียกใช้ฟังก์ชันด้วยอาร์กิวเมนต์

ในทำนองเดียวกันเราสามารถเรียกใช้ฟังก์ชันที่มีอาร์กิวเมนต์ได้โดยส่งผ่านไปยังฟังก์ชันดังที่แสดงด้านล่าง

my_function argument_1,argument_2
or
my_function (argument_1,argument_2)

Note - ในขณะเรียกใช้ฟังก์ชันโดยส่งอาร์กิวเมนต์ไปยังฟังก์ชันการใช้วงเล็บเป็นทางเลือก

ในตัวอย่างต่อไปนี้เราได้สร้างฟังก์ชันชื่อ add() ที่ยอมรับสองพารามิเตอร์และเราได้เรียกใช้

add =(a,b) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

ในการคอมไพล์ตัวอย่างด้านบนจะแสดง JavaScript ต่อไปนี้

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);

}).call(this);

ในการดำเนินการโค้ด CoffeeScript ด้านบนจะสร้างผลลัพธ์ต่อไปนี้

Sum of the two numbers is: 30

อาร์กิวเมนต์เริ่มต้น

CoffeeScript รองรับอาร์กิวเมนต์เริ่มต้นด้วย เราสามารถกำหนดค่าเริ่มต้นให้กับอาร์กิวเมนต์ของฟังก์ชันดังที่แสดงในตัวอย่างต่อไปนี้

add =(a = 1, b = 2) ->
  c=a+b
  console.log "Sum of the two numbers is: "+c
add 10,20

#Calling the function with default arguments
add()

ในการคอมไพล์ CoffeeScript ข้างต้นจะสร้างไฟล์ JavaScript ต่อไปนี้

// Generated by CoffeeScript 1.10.0
(function() {
  var add;

  add = function(a, b) {
    var c;
    if (a == null) {
      a = 1;
    }
    if (b == null) {
      b = 2;
    }
    c = a + b;
    return console.log("Sum of the two numbers is: " + c);
  };

  add(10, 20);
  add()

}).call(this);

ในการรันโค้ด CoffeeScript ข้างต้นจะสร้างผลลัพธ์ต่อไปนี้

Sum of the two numbers is: 30
Sum of the two numbers is: 3