What does it mean when curly braces just end the code?
When I checked the Vue.js source code, I saw that there are lines of code between the two curly braces, and there is no definition before that construct (like function
, ()=>
or otherwise). I paste it into the console and it launches. But how can I use it if I don't assign it to a variable?
What is it? Why should we use this method when writing code?
....
var formatComponentName = (null);
{
var hasConsole = typeof console !== 'undefined';
var classifyRE = /(?:^|[-_])(\w)/g;
var classify = function (str) { return str
.replace(classifyRE, function (c) { return c.toUpperCase(); })
.replace(/[-_]/g, ''); };
warn = function (msg, vm) {
var trace = vm ? generateComponentTrace(vm) : '';
if (config.warnHandler) {
config.warnHandler.call(null, msg, vm, trace);
} else if (hasConsole && (!config.silent)) {
console.error(("[Vue warn]: " + msg + trace));
}
};
tip = function (msg, vm) {
if (hasConsole && (!config.silent)) {
console.warn("[Vue tip]: " + msg + (
vm ? generateComponentTrace(vm) : ''
));
}
};
}
...
source to share
What you are illustrating is called a block. Sample code that you have provided, is a rather unusual approach to group a set of instructions for stylistic purposes, since the unit without the if
, while
, do...while
, for
or with
does not change that executes code.
To demonstrate
document.body.innerHTML = "Testing...";
{
document.body.innerHTML += "1";
document.body.innerHTML += "2";
document.body.innerHTML += "3";
}
document.body.innerHTML += "<br/>...and there you have it!"
https://jsfiddle.net/5crb1ezf/
in practice it is identical:
document.body.innerHTML = "Testing...";
document.body.innerHTML += "1";
document.body.innerHTML += "2";
document.body.innerHTML += "3";
document.body.innerHTML += "<br/>...and there you have it!"
Both examples will return the same text to the browser:
Testing ... 123 ... and there you have it!
On the other hand, if you are using the unit in conjunction with a control structure, such as if
, while
, do...while
, for
and with
, it will change the way the code is executed.
if (condition) {
// conditional statement here
}
As stated above, a mention of blocks can be found here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/block
source to share