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