Fonctions

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Pourquoi des fonctions ?

Pour éviter de dupliquer le code,
on déclare des fonctions (avec le mot-clé function).

name est un paramètre qui prend successivement les valeurs "bob" puis "kathy".

const hello = function(name) {
  console.log(`hello ${name}!`);
};
hello("bob");
hello("kathy");

Fonction et valeur de retour

Une fonction peut avoir une valeur de retour que l'on renvoie avec le mot-clé return.

const addOne = function(x) {
  return x + 1;
};
console.log(addOne(3));
console.log(addOne('bob'));

Fonction et return

Si on omet le return, la valeur de retour est undefined.

const addOne = function(x) {
  x + 1;    // oups !
};
console.log(addOne(3));

Paramètres et arguments

Lors de l'appel, s'il y a trop d'arguments, ils seront ignorés ; s'il n'y a pas assez d'arguments, les paramètres auront la valeur undefined.

const fun = function(x, y) {
  console.log(`${x} et ${y}`);
};
fun('1', '2', '3');
fun('1');

Notation flèche (1/2)

On peut utiliser les syntaxes
(arguments) => expression
(arguments) => { instructions }

const f = function(a, b) {
  return a + b;
};
console.log(f(40, 7));
const g = (a, b) => a + b;
console.log(g(40, 7));

const f = function(a, b) {
  console.log(`${a} + ${b}`);
  return a + b;
};
console.log(f(40, 7));
const g = (a, b) => {
  console.log(`${a} + ${b}`);
  return a + b;
};
console.log(g(40, 7));

Notation flèche (2/2)

Si on a un seul argument, on peut omettre les parenthèses :
argument => expression
argument => { instructions }

const f = () => 7;
const g = x => x + 7;
const h = (u, v) => u * v + 7;
console.log(f() + g(1) + h(2, 3));

Jouer avec les fonctions

Fonction comme valeur

Les fonctions sont des variables de type function.

const addOne = x => x+1;
console.log(typeof addOne);
const plusOne = addOne;
console.log(plusOne(3));

Attention à l'égalité !

const f = x => x+1;
const g = x => x+1;
const h = f;
console.log(f == g);
console.log(f == h);

Fonction qui prend une fonction en argument

Une fonction peut prendre une fonction en paramètre.

const doItTwice = (f, x) => {
  console.log(f(f(x)));
};
const plus2 = v => v + 2;
const times2 = v => v * 2;
doItTwice(plus2, 1);
doItTwice(plus2, "1");
doItTwice(times2, 1);
doItTwice(times2, "1");

Fonction récursive

Les fonctions en JavaScript peuvent être récursives.

const factorial =
  x => (x == 1 ? 1 : x * factorial(x - 1));
console.log(factorial(3));
console.log(factorial(21));
console.log(factorial(22));
console.log(factorial(171));
console.log(factorial(0));
console.log(factorial(1));

Imbrication de fonctions

Une fonction peut elle-même contenir une fonction locale.

const printHello = s => {
  const hello = v => `Hello ${v} !`;
  console.log(hello(s));
};
printHello("Bob");

Closure

Une fonction locale peut accéder aux variables de la fonction englobante.

const printHello = s => {
  const hello = () => `Hello ${s} !`;
  console.log(hello());
};
printHello("Bob");

Une fonction qui utilise les variables englobantes est appelée closure.

Fonctions prédéfinies

String vers number

parseInt() et parseFloat() permettent la conversion de string vers number.
toString() fait le contraire.

parseInt("123");
parseFloat("123.5");
var v = 78;
v.toString();
parseInt("hello");
parseInt("21.3");

toString() est une fonction que l'on applique sur une valeur : on appelle cela une méthode.

Math

Math contient les fonctions pour le calcul flottant.

Math.max(3, 7);
Math.min(3, 7);
Math.floor(3.6);
Math.abs(-7);
Math.PI;
Math.cos(Math.PI);
Math.sin(Math.PI / 2);

Math permet de ranger les fonctions en évitant qu'elles polluent l'environement global.

Random

Math.random() permet d'obtenir une valeur pseudo-aléatoire entre 0 et 1.

Math.random();
Math.random();
Math.random() * 10;
Math.floor(Math.random() * 10);

Charger un script externe

Scripts externes

La balise script permet de charger un script Javascript.

ou bien