Hoisting is Dead: var vs. let vs. const
Rappel
Variables globales 🤮
1
userName = 'Foo BAR';
2
3
console.log(userName); // Foo BAR
Copied!
Use strict 😅
1
'use strict';
2
3
userName = 'Foo BAR'; // ReferenceError: userName is not defined
Copied!
1
'use strict';
2
3
console.log(userName); // ReferenceError: userName is not defined
Copied!
Hoisting
Variable hoisting
🧐
😱
1
'use strict';
2
3
console.log(userName); // ???
4
5
var userName = 'Foo BAR';
Copied!
1
'use strict';
2
3
console.log(userName); // undefined
4
5
var userName = 'Foo BAR';
Copied!
Function hoisting
🧐
😱
1
'use strict';
2
3
greetings(); // ???
4
5
function greetings() {
6
console.log('HI!');
7
}
8
9
function greetings() {
10
console.log('HELLO!');
11
}
Copied!
1
'use strict';
2
3
greetings(); // HELLO!
4
5
function greetings() {
6
console.log('HI!');
7
}
8
9
function greetings() {
10
console.log('HELLO!');
11
}
Copied!
Un peu mieux
1
'use strict';
2
3
greetings(); // TypeError: greetings is not a function.
4
5
var greetings = function () {
6
console.log('HI!');
7
};
8
9
greetings(); // HI!
10
11
var greetings = function () {
12
console.log('HELLO!');
13
};
14
15
greetings(); // HELLO!
Copied!
let
Les variables ne sont accessibles qu'après leur déclaration.
1
console.log(userName); // ReferenceError: userName is not defined
2
3
let userName = 'Foo BAR';
Copied!
Les variables ne sont accessibles que dans le bloc de code.
1
if (true) {
2
let userName = 'Foo BAR';
3
}
4
5
console.log(userName); // ReferenceError: userName is not defined
Copied!
const
const permet de déclarer des variables constantes qui ne peuvent pas être réinitialisées.1
const user = {
2
firstName: 'Foo',
3
lastName: 'BAR'
4
}
5
6
user = null; // TypeError: Assignment to constant variable.
Copied!
const n'est pas immutable.1
user.firstName = 'John'; // OK!
Copied!
Il est recommandé de déclarer toutes les variables en
const sauf quand la réutilisation d'une variable s'avère inévitable.Cela évite de nombreuses erreurs d'inattention difficiles à diagnostiquer.
L'utilisation de const décourage le recyclage maladroit de variables :
1
const user = {
2
firstName: 'Foo',
3
lastName: 'BAR'
4
}
5
6
/* 🤢*/
7
user = user.firstName; // TypeError: Assignment to constant variable.
Copied!
Dernière mise à jour 4yr ago