[ ] JavaScript |
JavaScript, , . , .
JavaScript , . : .
({}), , .
: JavaScript . Node.js , Node.js .
const globalVariable = 'some value';
, , .
const hello = 'Hello CSS-Tricks Reader!';
function sayHello () {
console.log(hello);
}
console.log(hello); // 'Hello CSS-Tricks Reader!'
sayHello(); // 'Hello CSS-Tricks Reader!'
, . - , , . const let, , , . .
// !
let thing = 'something';
let thing = 'something else'; // , thing
var, . , .. .
// !
var thing = 'something';
var thing = 'something else'; // -
console.log(thing); // 'something else'
, , .
, , . .
JavaScript :
, , . .
, hello sayHello:
function sayHello () {
const hello = 'Hello CSS-Tricks Reader!';
console.log(hello);
}
sayHello(); // 'Hello CSS-Tricks Reader!'
console.log(hello); // , hello
, {} const let, .
, , hello :
{
const hello = 'Hello CSS-Tricks Reader!';
console.log(hello); // 'Hello CSS-Tricks Reader!'
}
console.log(hello); // , hello
, .. ( ).
, function declaration (. .: function () {...}), . , :
// ,
sayHello();
function sayHello () {
console.log('Hello CSS-Tricks Reader!');
}
// ,
function sayHello () {
console.log('Hello CSS-Tricks Reader!');
}
sayHello();
function expression ( ) (. .: var f = function () {...}), .
sayHello(); // , sayHello
const sayHello = function () {
console.log(aFunction);
}
- , . , .
, , .
second firstFunctionVariable.
function first () {
const firstFunctionVariable = `I'm part of first`;
}
function second () {
first();
console.log(firstFunctionVariable); // , firstFunctionVariable .
}
, . .
.
function outerFunction () {
const outer = `I'm the outer function!`;
function innerFunction() {
const inner = `I'm the inner function!`;
console.log(outer); // I'm the outer function!
}
console.log(inner); // , inner
}
, , . , , , ( ), .
, , .
, , , , , .
, , . , . , .
function outerFunction () {
const outer = `I see the outer variable!`;
function innerFunction() {
console.log(outer);
}
return innerFunction;
}
outerFunction()(); // I see the outer variable!
, , .
function outerFunction () {
const outer = `I see the outer variable!`;
return function innerFunction() {
console.log(outer);
}
}
outerFunction()(); // I see the outer variable!
, :
, - . , , Ajax-, console.log:
function (x) {
console.log('A console.log is a side effect!');
}
, , , , (, Ajax- ).
, . , .
: ES6.
function makeCake() {
setTimeout(_ => console.log(`Made a cake`), 1000);
}
, .
, . makeCake.
function makeCake(flavor) {
setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000));
}
.
makeCake('banana'); // Made a banana cake!
, , , , , , , .
prepareCake, . makeCakeLater prepareCake.
, , .
function prepareCake (flavor) {
return function () {
setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000));
}
}
const makeCakeLater = prepareCake('banana');
// ...
makeCakeLater(); // Made a banana cake!
, .
, , , . - , , .
, .
function secret (secretCode) {
return {
saySecretCode () {
console.log(secretCode);
}
}
}
const theSecret = secret('CSS Tricks is amazing');
theSecret.saySecretCode(); // 'CSS Tricks is amazing'
saySecretCode (), secretCode secret. .
(DevTools) Chrome Firefox . .
: debugger , JavaScript .
prepareCake:
function prepareCake (flavor) {
// debugger
debugger
return function () {
setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000));
}
}
const makeCakeLater = prepareCake('banana');
DevTools Sources Chrome ( Debugger Firefox), .
debugger . , :
function prepareCake (flavor) {
return function () {
// debugger
debugger
setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000));
}
}
const makeCakeLater = prepareCake('banana');
: Sources ( Debugger) .
:
