JS variable local semble influer en global

**Sergeras** · 05/02/2018, 11h08

Bonjour amis Developpezeur,

Je suis un noob en JS et je rencontre un problème que je n'arrive pas à expliquer,
J'aimerais avoir votre avis, si c'est normal ou si je m'y prends mal.

Explication :
1/ J'ai un tableau array avec des valeurs
2/ j’envoie ce tableau dans une fonction afin de l'utiliser (mais que en local)
3/ je souhaite recommencer à l'infini sans que le tableau soit altéré.
Le problème :
- La fonction me modifie mon tableau

- Pourtant (sauf errreur de ma part, la fonction utilise le tableau en local).
- J'ai même créé une variable locale pour ce faire.

Mais rien n'y fait, mon tableau est modifié.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script>
                <!--
                function f_Input(f_Input1){
                        var f_Input_Temp0 = f_Input1;
                        f_Input_Temp0[1] = f_Input_Temp0[1].split("|");
                }
                //-->
        </script>
</head>
<body>
	<script>
                <!--
                var tableau_Test = new Array();
                tableau_Test.push(Array("1","21|22|23"))
                fCreeForm()
                function fCreeForm(){
                        for (var i = 0; i < tableau_Test.length; i++) {
alert(tableau_Test[i])
                        f_Input(tableau_Test[i]);
alert(tableau_Test[i])
                        }
                }
        //-->
        </script>
</body>
</html>

**psychadelic** · 05/02/2018, 13h21

Pourquoi faire simple quand on peut faire compliqué....

Des tableaux dans des tableaux,
des noms de variables proches de noms de fonctions,
si tu commence la programmation avec cette optique, non seulement tu vas souffrir, mais je plains ceux qui devront relire ton code....

un test plus simple pour comprendre =>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>test Tableau vs Variables </title>
</head>
<body>
	<script>
 
                function Fct_ManipVar (argVar)
                {
                        var inVar =  argVar;
                        inVar = "modif in Fct_ManipVar";
                }
 
                function Fct_ManipTab (argTab)
                {
                        var inTab =  argTab;
                        inTab[0] = "modif in Fct_ManipTab";
                }
 
                var var_bibi = "je suis bibi";                  
                var var_Tab_XY =  ['aaa','bbb'];                        
 
                alert('var_bibi t1 = ' + var_bibi);
                alert('var_Tab_XY[0]  t1 = ' + var_Tab_XY[0] );
 
 
                Fct_ManipVar(var_bibi);
                Fct_ManipTab(var_Tab_XY);
 
                alert('var_bibi t2 = '+ var_bibi);
                alert('var_Tab_XY[0]  t2 = '+ var_Tab_XY[0] );
        </script>
</body>
</html>

tu constatera qu'il y a une différence de traitement entre les variables et les tableaux..

parce que quand on écrit var inTab = argTab; on ne fait pas une copie d'un tableau dans un nouveau tableau.
on fait juste la copie d'un pointeur sur un tableau vers un nouveau pointeur sur le même tableau.

Un pointeur, et non l'objet lui-même (en Javascript tout (presque tout) est objet).

**Sergeras** · 05/02/2018, 13h35

Salut Psy,

Merci pour ta réponse,
J'ai extra_simplifié, c'est pour cette raison que ça parait compliqué pour faire simple. Mais comme le dit si bien Mulder (la vérité est ailleurs)

Bref, si je comprends bien le plus simple pour avoir une copie d'un tableau est de créer un new puis de boucler ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function f_Input(f_Input1){
    var f_Input_Temp0 = new Array();
    for (var i = 0; i < f_Input1.length; i++) {
	f_Input_Temp0[i] = f_Input1[i];
    }
      f_Input_Temp0[1] = f_Input_Temp0[1].split("|");
  }

**psychadelic** · 05/02/2018, 14h36

Envoyé par Sergeras

Bref, si je comprends bien le plus simple pour avoir une copie d'un tableau est de créer un new puis de boucler ?

sauf que si on à vraiment dans l'idée de vouloir dupliquer tout un tableau (ou un objet), c'est qu'il y a certainement un gros problème en logique algorithmique chez l'auteur du code.

Les mecs qui inventent les langages, en général ils savent plutôt à quoi y jouent.
Si tu t'imagine avoir trouvé une énorme incohérence dans la façon dont est pensé un langage, pose toi d'abord la question de savoir si ce que tu imagine est vraiment malin.

Sinon, si tu veux absolument dupliquer un objet en JavaScript on utilise plutôt la paire JSON.stringify() et JSON.parse() pour faire ce type d'opération.

**NoSmoking** · 05/02/2018, 14h58

Bonjour,
effectivement les tableaux sont passés aux fonctions par « adresse » et non par valeur.

Si tu souhaites faire une copie de ce tableau tu peux utiliser la méthode slice(), sans argument, qui retourne une copie du tableau.

Ne pas oublier qu'il existe des méthodes très pratiques sur les arrays lorsque l'on veut faire du traitement., par exemple filter() ou autre map().

**psychadelic** · 05/02/2018, 15h34

Envoyé par NoSmoking

~~effectivement les tableaux sont passés aux fonctions par « adresse » et non par valeur.~~

C'est pas bien d'écrire des choses fausses pour embrouiller la tête des débutants

quand on code : var xTab_AB = ['aaa','bbb'];

xTab_AB est déjà un pointeur vers un tableau.

Ce n'est pas le mécanisme de l'utilisation d'une fonction qui analyse si les arguments sont d'un type ou d'un autre, il les prends comme ils le sont déjà.

S'il te faut une preuve :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var xTab_AB = ['aaa','bbb'];             
var xTab_DG = xTab_AB;
 
xTab_DG[0] = 'dd';
xTab_DG[1] = 'gg';
 
 
alert("xTab_AB = ['" + xTab_AB[0] + "', '" + xTab_AB[1] + "']");
 // renvoie ==> ['dd','gg']
 
// et inversement ...
 
xTab_AB[0] = 'AB';
 
alert("xTab_DG = ['" + xTab_DG[0] + "', '" + xTab_DG[1] + "']");
 // renvoie ==> ['AB','gg']

**NoSmoking** · 05/02/2018, 16h18

Envoyé par psychadelic

C'est pas bien d'écrire des choses fausses pour embrouiller la tête des débutants

qu'est ce qui te gène, la notion d'« adresse » alors pardon j'aurais du mettre référence

De plus concernant les tableaux, array, il y a des subtilités comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var tab = [1, 2, 3];
function test_1(param) {
  param = [0];
}
test_1(tab);
console.log('test_1 : ', tab);  // >> test_1 :  Array [ 1, 2, 3 ]
 
function test_2(param) {
  param[0] = 0;
}
test_2( tab);
console.log('test_2 : ', tab);  // >> test_2 :  Array [ 0, 2, 3 ]

**psychadelic** · 05/02/2018, 17h15

Désolé, mais ton exemple ne prouve rien..

dans la fonction test_1, l'argument param est un nouveau pointeur en copie du pointeur tab utilisé pour ton tableau aux valeurs = [1, 2, 3];

quand tu écrit dans ta fonction test_1 : param = [0]; tu ne fait que réaffecter le pointeur 'param' vers un nouveau tableau avec l'unique valeur [0];

donc cette fonction ne fait juste que réaffecter juste un autre pointeur vers un nouvel objet.

c'est pareil s'il s'agit d'une variable primitive

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 var babar = 'babar';
 
function test_42(param) {
  param = ' super truc différent';
}
test_42(babar);
 
console.log('babar = ', babar); // renvoie babar = babar

**NoSmoking** · 05/02/2018, 19h10

Envoyé par psychadelic

Désolé, mais ton exemple ne prouve rien..

où as tu vu que je cherchais à prouver quelque chose, je n'ai fait qu'exposer une subtilité.

L'exemple 1 montre simplement qu'il peut y avoir « mutation » du paramètre en argument, exemple peut être plus expressif

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function test_3(param) {
  console.log('before param : ', param);        // Array [ 0, 2, 3 ]
  console.log('before : ', arguments[0]);       // Array [ 0, 2, 3 ] 
  param = [0];
  console.log('after param : ', param); 	//Array [ 0 ]
  console.log('after args[0] : ', arguments[0]; //Array [ 0 ]
}

**psychadelic** · 05/02/2018, 19h43

Pour moi ce n'est qu'une réaffectation, pas une mutation

Quand on écrit var chose = "abcd";
l'interpréteur crée une valeur "abcd" et l'affecte à l'élément 'chose'

si ensuite on code : t var chose = "xyz";
l'interpréteur crée une valeur "xyz" et l'affecte à l'élément 'chose'
l'ancienne valeur "abcd" n'est plus affectée à rien et le garbage collector de l'interpréteur JS se charge de rendre disponible la place mémoire qu'elle occupait, suivant le besoin.

à aucun moment en mémoire il n'y a eu de réécriture sur l'espace mémoire qu'aucuppait la chaine "abcd"...

https://fr.wikipedia.org/wiki/Ramass...nformatique%29 (Garbage Colector en Français)

**Sergeras** · 05/02/2018, 20h24

Salut à vous deux et un grand merci pour cette prompte discution

Ca fait pas mal d'infos d'un coup a analyser.
Je vais regarder vos ptits bous de code qui vont bien m'aider.

En tout cas très inintéressante votre discussion, ça permet de mieux comprendre pourquoi je faisais erreur.
C'est vrai que de petites modifications dans les languages et op on est perdu.

Encore merci

**Beginner.** · 05/02/2018, 22h07

Ce n'est pas propre aux fonctions c'est vrai mais ce n'est pas la première fois que je lis des expressions comme "passage par valeur ou par référence"... Même si en réalité c'est toujours un passage par valeur mais la valeur peut être une référence (adresse).

**danielhagnoul** · 05/02/2018, 22h29

Dans f_Input, la variable ne doit pas pointer vers le tableau passé par référence (comme tous les objets en JS), mais copié la valeur souhaitée.

Voici la correction de votre code en ES2015+ (le JS d'aujourd'hui) :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
let tableauTest = [];
 
function fInput( p ){
	let temp = p[1]; // pas le tableau passé par référence mais la valeur souhaitée
 
	temp = temp.split( "|" );
 
	console.log( `temp = ${ temp }` ); // temp = 21,22,23*/
}
 
function fCreeForm(){
	for ( const item of tableauTest ) {
		console.log( `tableauTest[i]  = ${ item }` ); //tableauTest[i] = 1,21|22|23
		fInput( item );
		console.log( `tableauTest[i] = ${ item }` ); // tableauTest[i] = 1,21|22|23
	}
}
 
tableauTest.push( [ "1", "21|22|23" ] );
 
fCreeForm();

**psychadelic** · 05/02/2018, 23h54

Oui, l'affectation par un let opère comme une copie (ici du tableau) mais c'est surtout une encapsulation des valeurs qui ne peuvent sortir de la fonction (ici fInput )

mais cela ne peut ni lui donner une explication sur la différence entre les variables primitives et les objets, ni sur la logique de l'adressage des objets.

**Sergeras** · 06/02/2018, 07h01

Je vois, merci pour cette explication supplémentaire
Let et const sont mes copains.

J'prends note du ES2015+

Plus ca va, plus je me rend compte que c'est une conception extrêmement différente du Python.
Faut que je fasse un REZ de mes façons de penser habituelle.

Et surtout va falloir que je plus de temps sur les tutos, le temps que ca rentre dans ma caboche

Merci a vous tous pour ces réponses et pour l’intérêt que vous avez apporté a ma question.

**Beginner.** · 06/02/2018, 12h45

Euh ben quelque chose doit m'échapper car je ne vois pas ce que "let" apporte de plus que "var" (je parle dans ce cas précis)...

Cette instruction let temp = p[1]; il me semble que c'est juste une affectation : on affecte à temp la valeur (ici c'est une string) du deuxième élément du tableau p.

Ce tableau p pointe sur le tableau passé en argument mais ce dernier n'est pas modifié par l'instruction ci-dessus ce qui est normal (par contre il en aurait été autrement avec par exemple cette instruction : p[1] = "toto";).

Il me semble aussi que le code posté par NoSmoking au message #7 met cela en évidence, non ?

Envoyé par psychadelic

Oui, l'affectation par un let opère comme une copie (ici du tableau) ...

Je pense que tu voulais dire : "...(ici du deuxième élément du tableau)...", non ?

**psychadelic** · 06/02/2018, 14h48

@Beginner.
oui tu à raison ici ce n'est juste que sur un élément du tableau, et en plus il est primitif.

sinon la fonction let en javascript permet aussi de surpasser un this, dans le cas de fonctions imbriquées

@Sergeras
vaut mieux éviter de vouloir calquer les fonctionnalités d'un langage sur un autre, JavaScript et Python sont partis dans des voies très différentes,
et que je sache(?) Python ne travaille pas en asynchrone.

les divergences ne peuvent que s'agrandir avec le temps

**NoSmoking** · 06/02/2018, 15h01

Envoyé par psychadelic

Pour moi ce n'est qu'une réaffectation, pas une mutation

une fois de plus tu joues sur les mots, quand je parle de « mutation » c'est au sens propre du terme et pas pour parler de « Mutable objects » ou autres termes.

Je précise simplement que l'on peut avoir des surprises comme par exemple quand j'ai déposé ma tondeuse chez Untel qui habite à une certaine adresse et que lorsque j'en ai besoin je me rend à cette adresse mais ce n'est plus Untel qui est là car il a été muté, remplacé.

Dans le cas présent je ne vois pas ce que viens faire dans cette discussion le Garbage Collector.

L'essentiel est quand même que Sergeras y trouve son compte et je lui conseilles quand même de regarder du côté de l'ES6 qui apporte de nouvelles solutions en masquant certaines problématiques rencontrées sous ES5, comme par exemple l'instruction let qui permet de déclarer une variable dont la portée est celle du bloc dans lequel elle a été déclarée, mais il y en a bien d'autres.

JS variable local semble influer en global

JavaScript

Discussions similaires

Partager

Partager