Back to Definitions
- function - a named sequence of statements that performs a specific task or useful operation
- parameter - a variable that receives an argument that is passed into a function, think of it as as the variable(s) in the function header / signature
- call/invoke/apply - to run or execute a function
- argument - a piece of data that is passed into a function when that function is called
- scope - the area of the code where a name/identifier is available for access and/or use
Defining a Function
We'll take a look at 3 ways of defining functions in JavaScript →
- function declarations
function foo(arg1, arg2) { return arg1 + arg2; }
- function expressions
const foo = function(arg1, arg2) { return arg1 + arg2; }
- arrow functions
(arg1, arg2) => { return arg1 + arg2 }
Function Declarations
Function declaration syntax:
function foo(arg1, arg2) {
return arg1 + arg2;
}
- start with the key word
function
(note that return type is not specified) - followed by function name
- followed by optional comma separated parameters within parentheses (again, no types precede the arguments)
- and finally, the function body surrounded by curly braces (with an optional return)
- what do you think you get back if return is omitted? → …
undefined
- what do you think you get back if return is omitted? → …
We'll see later that function declarations are special in that they can used before they are declared in your code!
Function Expressions
Another way to create a function is by using a function expression (remember, functions are first-class citizens): →
const doubleTheNumber = function(n) {
return n + n;
};
console.log(doubleTheNumber(5));
- declare a variable
- set it equal to the keyword,
function
- followed by parentheses and an optional list of parameters (separated by commas if more than one)
- the function body is just a block of code (surrounded by curly braces, of course! …and again with an optional return)
- note the semicolon at the end of the function definition (it is an assignment statement after all!)
- finally, the variable,
doubleTheNumber
, can be called/invoked because it's a function!
Function Expressions Continued
Function expressions, as the name implies, are expressions! →
- that means that they evaluate to a value (that is… they evaluate to a function)
- so, you can use them anywhere values are needed… some examples:
// to initialize a variable const doubleTheNumber = function(n) { return n + n; };
// as an argument const numbers = [1, 2, 3, 4]; numbers.map(function(n) { return n + n; });
// as a return value function f() { return function(n) { return n + n; }); }
Arrow Functions
Introduced in ES6, arrow functions are a way of writing function expressions in a very concise syntax.→
(arg1, arg2) => { /* body goes here */}
- it's a shorthand / more convenient way of writing a function expression
- its behavior is subtly different from regular function expressions
- it doesn't have a built in
arguments
object (we'll see this later) - its
this
is the value ofthis
where it was defined (we'll talk aboutthis
later as well)
- it doesn't have a built in
Arrow Function Syntax
There are a few ways to write arrow functions. →
- Parentheses around parameters, curly braces around body:
(p1, p2, ..., pN) => { statements }
- You can drop the curly braces if you have a single expression. The value of that expression will be implicitly returned if you drop curly braces:
(p1, p2, ..., pN) => expression // same as { return expression; }
- If there's only one parameter, you could also drop the parentheses:
singleParam => { statements }
- If you have no parameters, use empty parentheses:
() => { statements }
Block Scope vs Function Scope
Again, scope is the area or portion of your program where a variable name or identifier is available.
- some languages (C, Java) use blocks to create new scopes
- ES6 does that
- but ES5 doesn't do that (of course); instead… it only uses functions to create scope
In ES5, functions are the only constructs that can create a new scope!
(but with ES6, let
and const
give you block level scope!)
Scope
Variables declared at the "top level" of your program (outside of functions) and variables declared without const
, let
or var
(in most cases) are in the global scope.
- global variables are accessible anywhere
- global variables are considered harmful… why? →
- because global variables are accessible everywhere, it makes things difficult to debug and fix issues as many places may read or write a value
- when creating functions that depend on global variables, those functions will not be portable across multiple programs (as they depend on a global variable being defined)
Functions and Scope
- parameters in a function are local to that function
- variables declared with the keyword,
var
are local to the function - variables declared with the keywords,
const
orlet
are local to the block that they're declared in - variables declared without the
let
,const
orvar
affect the global scope… ⊙﹏⊙- (actually, the nearest enclosing scope containing the name - most of the time this is global, but it could be an outer function!)
- global variables (again) are accessible throughout your program, even from within you function's body
An Example
Based on the previous slide, what is the output of the following code? →
let x = "hi!"; // hello... I'm a global variable
const f = function() {
let x = "from f";
};
const g = function() {
x = "from g";
};
console.log(x)
f();
console.log(x);
g();
console.log(x);
hi!
hi!
from g
Nested Functions
- functions can be defined within functions
- just create a function within another function using declarations, expressions or arrow functions
- the variables in the outer function are available to the inner function and can be used just by using the variable name (no new declaration is needed)
- but the variables in the inner function are local to the inner function
Without Const, Let, or Var Revisited
Variables declared without const
, let
, or var
actually reference the variable in nearest enclosing scope (if it's not a const
) containing the name (usually global, but a bit tricky for nested functions).
let x = 1;
function f() {
let x = 2;
function g() {
x = 3;
console.log(x);
}
g(x);
console.log(x);
}
f();
console.log(x);
3
3
1
Functions as Values
- functions are objects… and they can exist as values, like numbers, strings, etc.
- the names that we use for functions are just like regular variables
- reassignment works fine!
let sayHello = function() {
console.log("Hola!");
};
sayHello();
sayHello = function(x) {
return x * x
};
console.log(sayHello(5));
Functions as Values Continued
You can even pass functions around, return them as values, etc.
- describe the first function →
- what do you think the output of this code is? →
const callTwice = function(f) {
f();
f();
};
const g = function() {
console.log("nobody's home!");
};
callTwice(g);
nobody's home!
nobody's home!
标签:function,Functions,const,variables,global,functions,return From: https://www.cnblogs.com/M1stF0rest/p/17067391.html