console.log affiche une "valeur future" de l'objet passé en paramètre

Version imprimable

30/10/2017, 20h20
Neckara

console.log affiche une "valeur future" de l'objet passé en paramètre
Bonjour,

Je viens de m'apercevoir que console.log affiche une "valeur future" de l'objet passé en paramètre.

Je présume que console.log est asynchrone et conserve une référence de l'objet qui lui est passé en paramètre. Ainsi, si cet objet est modifié après l'appel à console.log, son affichage le sera aussi :
Code:

1 2 3 4 5 // pseudo-code let x = 5; console.log(x); // affichera 7. x = 7;
Je suis quelque peu étonné par ce comportement et je souhaiterais savoir s'il y a un moyen de forcer console.log à afficher, lors de son appel, la valeur actuelle de l'objet.
Pour le moment j'utilise console.log( $.extend( true, {}, mon_objet));, est-ce que vous connaîtriez une meilleure méthode, si possible sans utiliser jQuery ?

En vous remerciant d'avance,
31/10/2017, 09h25
SpaceFrog

Tu as du tomber dans un warp espace temps ...
https://jsfiddle.net/n05g7xdx/

J'ai bien 5 en console ...
31/10/2017, 13h41
Neckara
Comme indiqué, c'est du pseudo-code. Le code que j'ai marchera :
- si je l'exécute dans un worker ;
- si je met un point d'arrêt grâce au débogueur ;
- si je l'exécute directement dans la console JavaScript du navigateur.
Je pense que le problème vient du fait que j'ai jusqu'à une seconde de calcul, ce qui retarde l'exécution du console.log.
31/10/2017, 13h48
SpaceFrog

Oui car javascript fonctionne en bulle, la ligne suivant est interprétée avant que ton calcul ne soit terminé

:salut:

C'est parce que le "log" est retardé jusqu'à ce que Chrome ait le temps de l'exécuter, la priorité est donnée à l'exécution du JS.

Exemple :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<!--
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
				integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
				crossorigin="anonymous">
	-->
	<title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
 
                        {
                                let t = [ 0, 2 ];
                                
                                console.log( t );
                                
                                t[ 0 ] += 2;
                                
                                console.log( t );
                        }
                        
                        {
                                let t = [ 0, 2 ];
                                
                                console.log( t );
                                
                                setTimeout( () => {
                                        t[ 0 ] += 2;
                                        console.log( t );
                                }, 100 );
                        }
 
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>

Si vous souhaitez suivre l'évolution d'une ou plusieurs valeurs dans la console (il y a aussi le débogage ligne par ligne), je pense qu'il est préférable de stocker les valeurs dans un Array et de faire un seul console.log() à la fin du script JS.

Exemple :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<!--
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
				integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
				crossorigin="anonymous">
	-->
	<title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
 
                        {
                                let
                                        x = 5,
                                        y = 2,
                                        arX = [ x ],
                                        arY = [ y ];
                                
                                x = x**y;
                                arX.push( x );
                                
                                y = x - 2 * y;
                                arY.push( y );
                                
                                x = Math.pow( y, x );
                                arX.push( x );
 
                                y = Math.log( x );
                                arY.push( y );
                                
                                console.log( `arX = ${ arX.join( ", "  ) }` );
                                console.log( `arY = ${ arY.join( ", "  ) }` );
                        }
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>