Easy-Micro [ JAVASCRIPT - Fonctions Javascript ] - Formations informatiques pour entreprises

JavaScript
Fonctions Javascript
Les fonctions JavaScript

Les déclaration de fonctions Javascript (syntaxe classique)

Fonction nommée sans argument

function faitcoucou() {
   alert("Bien-le bonjour !");
};

faitcoucou(); // oubien window.onload=faitcoucou;

ici, on déclare une fonction avec le mot clef function, on donne un nom à notre fonction et on fait suivre ce nom par un couple de parenthèses et un couple d’accolades

Fonction nommée avec arguments

function multiplication(nombre1, nombre2) { 
    return nombre1 + ' * ' + nombre2 + ' = ' + (nombre1 * nombre2);
}

window.console.log(multiplication(5, 10));

⚠ les "+" sont utilisés pour la concaténation ! On aurais pu exécuter cette fonction en cliquant sur un paragraphe p1 : document.getElementById('p1').innerHTML = multiplication(5, 10);

Fonction nommée auto-invoquée : une fonction peut s'appeler elle-même

(function bonjour(){ alert('Bonjour !');})();

on rajoute un couple de parenthèses autour de la fonction et un second après le code de la fonction.

Fonction itérative ou récursive

Une fonction est dite récursive si elle s'appelle elle-même.

Fonction itérative (avec boucle for) :

function factorial(x) {
  let resultat = 1;
  for (let i = 1; i <= x; i++)
    resultat = resultat * i;
  return resultat;
}

window.console.log(factorial(5)); // donne : 120

Fonction identique à la précédente mais cette fois-ci récursive : cette fonction s'appelle elle-même avec un if

function factorial(x) {
 
  if (x === 0) return 1;
  else return x * factorial(x - 1);
}

window.console.log(factorial(5)); // donne : 120

Exemple du calcul de la factorielle. La factorielle d'un nombre est le produit de tous les entiers de 1 à ce nombre. Ainsi, la factorielle du nombre 5 est égale au produit de 1 x 2 x 3 x 4 x 5. Elle est donc égale à 120. Source de cet exemple : OneChapterADay

Fonction anonyme

Une fonction anonyme est une fonction classique mais sans nom.

const faitEncoreCoucou = function() {
    alert('Encore coucou');
};

window.console.log(faitEncoreCoucou());

Fonction anonyme auto-invoquée

(function() { alert('Alerte exécutée par une fonction anonyme');})();

on rajoute un couple de parenthèses autour de la fonction et un second après le code de la fonction.

Les expressions de fonctions

Pour créer une expression de fonction, on utilise une syntaxe classique à la différence qu'on va cette fois-ci directement assigner notre fonction à une variable.

const faitcoucou = function(){
    alert("Bien-le bonjour !");
};

window.console.log(faitcoucou());

Est utilisé ci-dessus une fonction anonyme

Si on donne un nom à notre fonction anonyme, on parlera de "NFE" pour "Named Function Expression" (expression de fonction nommée). Ajouter un nom à une expression de fonction permet à la fonction de faire référence à elle-même en interne en étant sûr de s'appeler en évitant que la variable qui contient l’expression de fonction change de valeur.

const faitcoucou = function bonjour(nom) {
    if (nom) {
        alert('Bien-le bonjour ' + nom);
    } else {
        bonjour('inconnu');
    }
};

faitcoucou('Maurice'); // Bien-le bonjour Maurice
faitcoucou(); // Bien-le bonjour inconnu

Est utilisé ci-dessus une fonction NFE. La variable faitcoucou appelle la fonction bonjour [Voir ce code dans JS Bin]

Les expressions de fonctions fléchées

Les fonctions fléchées sont très compacte donc rapide à écrire (ES6 soit ECMAScript 2015). Elles utilisent le signe => d'où leur nom

/*Expression de fonction classique :
const maSomme = function(a, b) {
    return a + b;
};
*/

/* Equivalent en fonction fléchée :
const maSomme = (a, b) => {
     return a + b ;
};
*/

//Equivalent en fonction fléchée minimisée :
const maSomme = (a, b) => a + b;

window.console.log(maSomme(1, 2));

La flèche représente le return. On utilise plus naturellement les constante (const) plutôt que les variables (let) avec les fonctions fléchées.

Si notre fonction fléchée n'a besoin que d'un argument pour fonctionner, alors on pourra également omettre le couple de parenthèses.

/*Expression de fonction classique :
const double = function(n){
    return n * 2
}
*/

//Equivalent en fonction fléchée :
const double = n => n * 2;


window.console.log(double(3));

Source de l'exemple : Pierre Giraux

⚠ Les fonctions fléchées sont différentes des autres fonctions au sens où elles ne possèdent pas de valeur propre pour this (voir Objet et Classe Javascript) : si on utilise ce mot clef dans une fonction fléchée, alors la valeur utilisée pour celui-ci sera celle du contexte de la fonction fléchée c’est-à-dire celle de la fonction englobante.

const easyMicro = {
    nom: 'Bisch',
    prenom: 'François',
    hobbies: ['Trail', 'Photo'],
  
    disBonjour(){
        const bonjour = () => alert('Bonjour ' + this.prenom);
        bonjour();
    }
};

easyMicro.disBonjour(); //Bonjour François

Exemple adapté à partir de celui de Pierre Giraux

Les fonctions JavaScript prédéfinies

Les fonctions déjà intégrées à JavaScript

escape()
Encode les caractères spéciaux
eval()
Evalue le code contenu dans une chaîne
isFinite()
Indique si le paramètre est un nombre fini
isNaN()
Indique si l'argument n'est pas un nombre (NotaNumber)
parseFloat()
Convertit (parser) une chaîne en décimal (Float)

Convertir une chaîne en réel et arrondi au chiffre supérieur

let monReel = parseFloat(Math.ceil(monReel));
parseInt()
Convertit (parser) une chaîne en entier (Interger)
unescape()
Décode une chaîne de caractères

< >