Οι συναρτήσεις JavaScript ορίζονται με το λέξη-κλειδί λειτουργία.
Μπορείτε να χρησιμοποιήσετε μια δήλωση συνάρτησης ή α συνάρτηση έκφραση.
Νωρίτερα σε αυτό το σεμινάριο, μάθατε ότι οι συναρτήσεις δηλώνονται με το παρακάτω σύνταξη:
function functionName(parameters) {
// code to be executed
}Οι δηλωμένες συναρτήσεις δεν εκτελούνται αμέσως. Είναι "αποθηκευμένα για μελλοντική χρήση", και θα εκτελεστούν αργότερα, όταν επικληθούν (κληθούν).
function myFunction(a, 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>
Τα ερωτηματικά χρησιμοποιούνται για τον διαχωρισμό των εκτελέσιμων δηλώσεων JavaScript.
Δεδομένου ότι μια δήλωση συνάρτησης δεν είναι μια εκτελέσιμη δήλωση, είναι δεν είναι σύνηθες να το τελειώνεις με ερωτηματικό.
Μια συνάρτηση JavaScript μπορεί επίσης να οριστεί χρησιμοποιώντας μια έκφραση.
Μια έκφραση συνάρτησης μπορεί να αποθηκευτεί σε μια μεταβλητή:
const x = function (a, b) {return a * b};Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Αφού αποθηκευτεί μια παράσταση συνάρτησης σε μια μεταβλητή, η μεταβλητή μπορεί να χρησιμοποιηθεί ως συνάρτηση:
const x = function (a, b) {return a * b};
let z = x(4, 3);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
Η παραπάνω συνάρτηση είναι στην πραγματικότητα μια ανώνυμη συνάρτηση (μια συνάρτηση χωρίς α όνομα).
Οι συναρτήσεις που είναι αποθηκευμένες σε μεταβλητές δεν χρειάζονται ονόματα συναρτήσεων. Είναι πάντα επικαλείται (καλείται) χρησιμοποιώντας το όνομα της μεταβλητής.
Η παραπάνω συνάρτηση τελειώνει με ερωτηματικό επειδή είναι μέρος μιας εκτελέσιμης πρότασης.
Όπως είδατε στα προηγούμενα παραδείγματα, ορίζονται οι συναρτήσεις JavaScript με τη λέξη-κλειδί συνάρτηση.
Οι συναρτήσεις μπορούν επίσης να οριστούν με έναν ενσωματωμένο κατασκευαστή συνάρτησης JavaScript που ονομάζεται Συνάρτηση().
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Στην πραγματικότητα δεν χρειάζεται να χρησιμοποιήσετε τον κατασκευαστή συνάρτησης. Το παραπάνω παράδειγμα είναι το ίδιο με τη σύνταξη:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Τις περισσότερες φορές, μπορείτε να αποφύγετε τη χρήση της λέξης-κλειδιού νέα στο JavaScript.
Νωρίτερα σε αυτό το σεμινάριο, μάθατε για την "ανύψωση" (JavaScript Hoisting).
Η ανύψωση είναι η προεπιλεγμένη συμπεριφορά της JavaScript για τη μετακίνηση δηλώσεων στην κορυφή του τρέχον πεδίο εφαρμογής.
Η ανύψωση ισχύει για δηλώσεις μεταβλητών και για δηλώσεις λειτουργίας.
Εξαιτίας αυτού, οι συναρτήσεις JavaScript μπορούν να κληθούν πριν δηλωθούν:
myFunction(5);
function myFunction(y) {
return y * y;
}Οι συναρτήσεις που ορίζονται χρησιμοποιώντας μια έκφραση δεν ανυψώνονται.
Οι εκφράσεις συναρτήσεων μπορούν να γίνουν "αυτο-επίκληση".
Μια έκφραση αυτο-επίκλησης καλείται (ξεκινά) αυτόματα, χωρίς να καλείται.
Οι εκφράσεις συναρτήσεων θα εκτελεστούν αυτόματα εάν ακολουθηθεί η έκφραση με().
Δεν μπορείτε να κάνετε αυτόματη κλήση μιας δήλωσης συνάρτησης.
Πρέπει να προσθέσετε παρενθέσεις γύρω από τη συνάρτηση για να υποδείξουν ότι είναι μια έκφραση συνάρτησης:
(function () {
let x = "Hello!!"; // I will invoke myself
})();Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
Η παραπάνω συνάρτηση είναι στην πραγματικότητα μια ανώνυμη συνάρτηση αυτο-επίκλησης (συνάρτηση χωρίς όνομα).
Οι συναρτήσεις JavaScript μπορούν να χρησιμοποιηθούν ως τιμές:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Οι συναρτήσεις JavaScript μπορούν να χρησιμοποιηθούν σε εκφράσεις:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Ο τελεστής typeof στο JavaScript επιστρέφει "συνάρτηση" για λειτουργίες.
Όμως, οι συναρτήσεις JavaScript μπορούν καλύτερα να περιγραφούν ως αντικείμενα.
Οι συναρτήσεις JavaScript έχουν και ιδιότητες και μεθόδους.
Η ιδιότητα arguments.length επιστρέφει τον αριθμό των ορισμάτων που ελήφθησαν όταν κλήθηκε η συνάρτηση:
function myFunction(a, b) {
return arguments.length;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Η μέθοδος toString() επιστρέφει τη συνάρτηση ως συμβολοσειρά:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Μια συνάρτηση που ορίζεται ως η ιδιότητα ενός αντικειμένου, ονομάζεται μέθοδος στο αντικείμενο.
Μια συνάρτηση που έχει σχεδιαστεί για τη δημιουργία νέων αντικειμένων, ονομάζεται κατασκευαστής αντικειμένων.
Οι συναρτήσεις βέλους επιτρέπουν μια σύντομη σύνταξη για τη σύνταξη παραστάσεων συναρτήσεων.
Δεν χρειάζεστε τη λέξη-κλειδί function, τη λέξη-κλειδί return και το αγκύλες σγουρές.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Οι συναρτήσεις βέλους δεν έχουν το δικό τους αυτό. Δεν είναι κατάλληλα για τον ορισμό μεθόδων αντικειμένων.
Οι λειτουργίες βέλους δεν ανυψώνονται. Πρέπει να οριστούν πριν χρησιμοποιηθούν.
Χρησιμοποιώντας το const είναι πιο ασφαλές από τη χρήση του var, επειδή μια έκφραση συνάρτησης είναι πάντα σταθερή τιμή.
Μπορείτε να παραλείψετε τη λέξη-κλειδί return και τις σγουρές αγκύλες μόνο εάν η συνάρτηση είναι μία πρόταση. Εξαιτίας αυτού, ίσως είναι καλή συνήθεια να τα κρατάτε πάντα:
const x = (x, y) => { return x * y };
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Οι συναρτήσεις βέλους δεν υποστηρίζονται στον IE11 ή παλαιότερο.