Bonjour au forum,

Je suis un cours sur JS pour mieux comprendre son fonctionnement et par curiosité ... cependant, il me mette souvent : return qqchose

Ca veut dir quoi return true par exemple. On m'a dit que return false annulait l'action par défaut de qqch

Ex :

<a href="monsite.com" onclick="fonctionQuelconque(); return false">Cliquez ici</a>

Mais dans ce cas, return true ne sert à rien car ca confirme l'action par défaut or l'action est déja par défaut, pas besoin de le confirmer ...

Auriez-vous des exemples concrets si vous le pouvez?

Merci :))

6 réponses


Balbert
Réponse acceptée

Bonsoir @Lens Durandisse2,

On ecrit une fonction pour qu'il soit reutilisable dans le code.
Le return sert à retourner le resultat d'une fonction par fois très très très très très complexe( lol je pense que c'est compris).
Lorsqu'une fonction tombe sur l'instruction return elle fait la chose suivante :
1 - elle s'arrete directement à cette instruction même s'il y a d'autre instruction qui suit.
2 - puis elle renvoie le resultat qui se trouve devant l'instruction return.

Lorsqu'on fait return dans une fonction on peut recupperer le resultat de celle ci dans une variable.

Exemple :

Imaginons une superbe fonction qui calcule la moyenne d'un tableau.

function moyenne(tableau)
{
    if(tableau.length == 0) 
    {   
        // si la taille du tableau est 0 arrete toi et return 0.
        return 0;
     }
     // si la taille du tableau vaut 0 les instructions ci-dessous ne seront pas executer.
     // Tout simplement à cause du return qui se trouve en haut puis qu'il dit à la fonction de s'arrêter et de retourné 0.
    var m = 0;
    for(var i = 0 ; i < tableau.length ; i++)
    {
        m = m + tableau[i];
    }
    return m / tableau.length;
}

Imaginons maintenant qu'on veut calculer la moyenne de 3 tableaux et afficher le resultat.
On fera tout simplement le code ci dessous.

var tableau_1 = [1,2,9,0];
var tableau_2 = [1,1,1,1];
var tableau_3 = [];

var moyenne_1 = moyenne(tableau_1); // vaut 3.
var moyenne_2 = moyenne(tableau_2); // vaut 1.
var moyenne_3 = moyenne(tableau_3); // vaut 0.

console.log(moyenne_tableau_1);
console.log(moyenne_tableau_2);
console.log(moyenne_tableau_3);

Un autre exemple on veut verifier si la moyenne d'un tableau est dans un autre tableau.
comme ceci.
Exempe :
Est ce que la moyenne de tableau_2 qui vaut 1 se trouve dans le tableau tableau_1 ?

// On peut imager une fonction rechercher qui cherche une valeur dans un tableau.


function rechercher(valeur, tableau)
{   
    for(var i = 0 ; i < tableau.length ;i++)
    {
        if(tableau[i] == valeur)
        {
            // si on trouve la valeur on return true pour dire qu'on a trouvé la valeur.
            // la fonction s'arrete directement ici.
            // et c'est ce resultat qu'on recuppera dans une variable.
            return true;
        }
    }
    // si on parcourt tout le tableau et qu'on ne trouve rien alors 
    // on retourne false pour dire qu'on n'a pas trouvé la valeur.
    // et c'est ce resultat qu'on recuppera dans une variable.
    return false;
}

// appelons maintenant notre fonction de verification.
var tableau_1 = [7,2,1,0];
var tableau_2 = [1,1,1,1];
// on recuppere la moyenne du tableau 2 dans la variable moyenne_2
var moyenne_2 = moyenne(tableau_2);
// on essaye de voir si cette moyenne est dans le tableau 1.
var trouver = rechercher(moyenne_2 , tableau_1);

if(trouver == true)
{
    alert('trouver');
} else 
{   
    alert('pas trouver');   
}

// Pour comprendre ce que fait la fonction.
sachant que la moyenne du tableau 2 vaut 1.
Le programme fait ceci :

1 - i = 0 , est ce que tableau_1[0] vaut 1 ? non car 7 != 1
2 - i = 1, est ce que que tableau_1[1] vaut 1 ? non car 2 != 1
3 - i = 2, est ce que tableau_1[1] vaut 1 ? oui car 1 = 1. donc arrete toi(la fonction) et renvoie true comme resultat.

S'il n'y avait pas de return il allait continué malgré qui à trouvé le resultat.

Conclusion :

L'instruction return permet tout simplement de renvoyer le resultat d'une fonction.

La bonne façon de faire est la suivante

<a href="monsite.com" onclick="fonctionQuelconque(event);">Cliquez ici</a>

Tu passe l'évènement dans la fonction. Puis tu peux annuler le comportement par défaut depuis la fonction

    function fonctionQuelconque(event){
        // Ici je coupe le comportement par défaut
        event.preventDefault(); 
        ....
    }

Ok je comprends. Mais je parles de "return en général"

Je prends un exemple de code du cours que je suis sur OpenClassroom

<style>
    #parent, #child {
        position: absolute;
        top: 50px; left: 100px;
    }

    #parent {
        width: 200px; height: 200px;
        background-color: blue;
    }

    #child {
        width: 50px; height: 50px;
        background-color: red;
    }
</style>

<div id="parent">
    <div id="child"></div>
</div>

<script>
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');

    alert("Sans la fonction de calcul, la position de l'élément enfant est : \n\n" +
          'offsetTop : ' + child.offsetTop + 'px\n' +
          'offsetLeft : ' + child.offsetLeft + 'px');

    function getOffset(element) { // Notre fonction qui calcule le positionnement complet
        var top = 0, left = 0;

        do {
            top  += element.offsetTop;
            left += element.offsetLeft;
        } while (element = element.offsetParent); // Tant que « element » reçoit un « offsetParent » valide alors on additionne les valeurs des offsets

        return { // On retourne un objet, cela nous permet de retourner les deux valeurs calculées
            top: top,
            left: left
        };
   }

    alert("Avec la fonction de calcul, la position de l'élément enfant est : \n\n" +
          'offsetTop : '  + getOffset(child).top + 'px\n' +
          'offsetLeft : ' + getOffset(child).left + 'px');
</script>

Dans ce cours, ils expliquent à quoi sert offsetTop/offsetLeft et offsetParent

Je comprends absolument rien dans le code que je viens d'écrire à cause du return

Prenons un exemple :

<SCRIPT language=javascript>
function MettreAuCube(valeur) {
   return valeur * valeur * valeur ;
}
document.write("2^3 = "+MettreAuCube(2));
</SCRIPT>

Pourquoi ont -ils besoin de return ici. Ils auraient simplement pu écrire :

var total = valeur valeur valeur; et demander d'écrire avec documentwrite directement dans la fonction, ca sert à quoi en fait?

Pourquoi aurais-je besoin de return?

Merci de ta réponse grafikart, j'en tient compte :)

Merci de ta réponse, je vais lire tout ca :)

MERCI POUR TA RÉPONSE, J'AI COMRPIS _

Pense cliquer sur le bouton "il a répondu à ma question" sur le message de balbert ;)