ฟังก์ชันจาวาสคริปต์

สารบัญ

    แสดงสารบัญ

ฟังก์ชั่น JavaScript คือบล็อกของโค้ดที่ออกแบบมาเพื่อดำเนินการ งานเฉพาะ

ฟังก์ชัน JavaScript จะถูกดำเนินการเมื่อ "บางสิ่งบางอย่าง" เรียกมัน (เรียกมัน)

ตัวอย่าง

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

ไวยากรณ์ฟังก์ชัน JavaScript

ฟังก์ชัน JavaScript ถูกกำหนดด้วยคำหลัก function ตามด้วย ชื่อ ตามด้วยวงเล็บ ()

ชื่อฟังก์ชันสามารถประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง และเครื่องหมายดอลลาร์ (กฎเดียวกันกับตัวแปร)

วงเล็บอาจมีชื่อพารามิเตอร์คั่นด้วยเครื่องหมายจุลภาค:
(parameter1, พารามิเตอร์2, ...)

โค้ดที่จะดำเนินการโดยฟังก์ชันจะอยู่ในวงเล็บปีกกา: {}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

ฟังก์ชัน พารามิเตอร์ แสดงอยู่ในวงเล็บ() ใน คำจำกัดความของฟังก์ชัน

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

ภายในฟังก์ชัน อาร์กิวเมนต์ (พารามิเตอร์) ทำหน้าที่เป็นตัวแปรท้องถิ่น

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

รหัสภายในฟังก์ชันจะดำเนินการเมื่อ "บางสิ่ง" เรียกใช้ (เรียก) the การทำงาน:

  • เมื่อมีเหตุการณ์เกิดขึ้น (เมื่อผู้ใช้คลิกปุ่ม)

  • เมื่อมันถูกเรียกใช้ (เรียกว่า) จากโค้ด JavaScript

  • โดยอัตโนมัติ (เรียกใช้ด้วยตนเอง)

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับการเรียกใช้ฟังก์ชันในภายหลัง บทช่วยสอน

ฟังก์ชั่นการส่งคืน

เมื่อ JavaScript ไปถึงคำสั่ง return ฟังก์ชันจะหยุดทำงาน

หากฟังก์ชันถูกเรียกใช้จากคำสั่ง JavaScript จะดำเนินการ "return" เพื่อรันโค้ดหลังคำสั่งที่เรียกใช้

ฟังก์ชันต่างๆ มักจะคำนวณ ค่าส่งคืน ค่าส่งคืนคือ "กลับ" กลับไป "ผู้โทร":

ตัวอย่าง

คำนวณผลคูณของตัวเลขสองตัว แล้วส่งคืนผลลัพธ์:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
    return a * b;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

ทำไมต้องมีฟังก์ชั่น?

ด้วยฟังก์ชันที่คุณสามารถใช้โค้ดซ้ำได้

คุณสามารถเขียนโค้ดที่สามารถใช้ได้หลายครั้ง

คุณสามารถใช้โค้ดเดียวกันกับอาร์กิวเมนต์ที่แตกต่างกันเพื่อให้ได้ผลลัพธ์ที่แตกต่างกัน

ตัวดำเนินการ()

ตัวดำเนินการ() เรียกใช้ (เรียก) ฟังก์ชัน:

ตัวอย่าง

แปลงฟาเรนไฮต์เป็นเซลเซียส:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

การเข้าถึงฟังก์ชันที่มีพารามิเตอร์ไม่ถูกต้องอาจทำให้ได้คำตอบที่ไม่ถูกต้อง:

ตัวอย่าง

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

การเข้าถึงฟังก์ชันโดยไม่มี() จะส่งคืนฟังก์ชัน ไม่ใช่ผลลัพธ์ของฟังก์ชัน:

ตัวอย่าง

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

บันทึก

ดังที่คุณเห็นจากตัวอย่างด้านบน toCelsius หมายถึงออบเจ็กต์ฟังก์ชัน และ toCelsius() หมายถึงผลลัพธ์ของฟังก์ชัน

ฟังก์ชันที่ใช้เป็นค่าตัวแปร

สามารถใช้ฟังก์ชันในลักษณะเดียวกับที่คุณใช้ตัวแปรในสูตร การมอบหมาย และทุกประเภท การคำนวณ

ตัวอย่าง

แทนที่จะใช้ตัวแปรเพื่อเก็บค่าที่ส่งคืนของฟังก์ชัน:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

คุณสามารถใช้ฟังก์ชันเป็นค่าตัวแปรได้โดยตรง:

let text = "The temperature is " + toCelsius(77) + " Celsius";

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชันต่างๆ ในภายหลังในบทช่วยสอนนี้

ตัวแปรท้องถิ่น

ตัวแปรที่ประกาศภายในฟังก์ชัน JavaScript จะกลายเป็น ท้องถิ่นถึง ฟังก์ชั่น.

สามารถเข้าถึงได้เฉพาะตัวแปรในเครื่องเท่านั้น จากภายในฟังก์ชัน

ตัวอย่าง

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

เนื่องจากตัวแปรเฉพาะที่ได้รับการยอมรับภายในฟังก์ชันเท่านั้น ตัวแปรที่มีชื่อเดียวกันจึงสามารถใช้ในฟังก์ชันที่ต่างกันได้

ตัวแปรท้องถิ่นจะถูกสร้างขึ้นเมื่อฟังก์ชันเริ่มทำงาน และจะถูกลบออกเมื่อฟังก์ชันเสร็จสมบูรณ์