What is const in React?

const in React is: 1. The variable declared by const is a value that cannot be changed; 2. The scope of const is the same as the let command; 3. The constant declared by the const command is not promoted; 4. The const declaration Constants, like let, cannot be declared repeatedly; 5. const declares a read-only constant.

The operating environment of this tutorial: windows7 system, React17 version. This method is suitable for all brands of computers.

const in React is:

1. Const declares a read-only constant. Once declared, the value of a constant cannot be changed.

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

The above code shows that changing the value of a constant will result in an error.

2. Variables declared by const are values ​​that cannot be changed. This means that once a const variable is declared, it must be initialized immediately and cannot be left for later assignment.

const foo;
// SyntaxError: Missing initializer in const declaration

The above code indicates that for const, if you just declare without assigning a value, an error will be reported.

3. The scope of const is the same as that of the let command: it is only valid within the block-level scope where the declaration is located.

if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

4. The constants declared by the const command are not promoted. They also have a temporary dead zone and can only be used after the declared position.

if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}

The above code is called before the constant MAX is declared, and an error is reported.

5. Constants declared by const cannot be declared repeatedly like let.

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

6. For composite type variables, the variable name does not point to the data, but to the address where the data is located. The const command only ensures that the address pointed to by the variable name remains unchanged, but does not guarantee that the data at that address remains unchanged, so you must be very careful when declaring an object as a constant.

const foo = {};
foo.prop = 123;
foo.prop
// 123
foo = {}; // TypeError: "foo" is read-only

In the above code, the constant foo stores an address, which points to an object. What is immutable is only this address, that is, foo cannot be pointed to another address, but the object itself is mutable, so new properties can still be added to it.

Here is another example.

const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错

In the above code, the constant a is an array. The array itself is writable, but if another array is assigned to a, an error will be reported.

7. If you really want to freeze the object, you should use the Object.freeze method.

const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

In the above code, the constant foo points to a frozen object, so adding new attributes will not work, and an error will be reported in strict mode.

8. In addition to freezing the object itself, the properties of the object should also be frozen. Below is a function that completely freezes an object.

var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, value) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};

ES5 has only two ways to declare variables: the var command and the function command. In addition to adding let and const commands, ES6 also has two other ways to declare variables: import command and class command. Therefore, ES6 has a total of 6 ways to declare variables.

Related free learning recommendations: javascript (video)

The above is the detailed content of What is const in React?. For more information, please follow other related articles on the PHP Chinese website!