Function
Created : April 27, 2020
- Structure the code, make it readable, and reuse them without repeat.
-
name starts with a verbal prefix
- e.g. showMessage, getAge, calcSum, createForm, checkPermission
-
Higher order functions
- functions that can take other functions as inputs.
-
Function안에서
this
쓸땐 arrow function 쓸 수 없음- arrow functions do not have their own 'this' context.
- 대신
function() { }
써주기
Function Declaration
const username = 'Rosie';
function showMessage () {
const message = `Hi, ${username}`; // can access global variable 'username'
console.log(message);
}
showMessage(); // Hi, Rosie
console.log(message); // ReferenceError (only accessed inside function)
let username = 'Rosie';
function showMessage () {
username = 'Junghwa'; // also can modify global variable
const message = `Hi, ${username}`;
return message;
}
console.log(username); // Rosie
console.log(showMessage()); // Hi, Junghwa
console.log(username); // Junghwa (value was changed by function)
Function declaration vs Function expression
- Function declaration
sum(1, 2); // 3
function sum1 (a, b) {
return a + b;
}
- Function expression is created when the execution reaches it and can be used only after creation
sum(1, 2); // ReferenceError: Cannot access 'sum' before initialization
const sum = function (a, b) {
return a + b;
}
// Use arrow function
const sum = (a, b) => a + b;
// 1 arg (can omit '()')
const double = n => n * 2;
// no arg (cannot omit '()')
const sayHi = () => alert('Hi');
- When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an initialization stage.
- Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable.
Parameters, Arguments
// if 'from' parameter is not passed, get default value 'stranger'
function showMessage (message, from = 'stranger') {
console.log(`${message} from ${from}`);
}
showMessage('Hi'); // Hi from stranger
message
,from
= parameters : variables in the function declaration'Hi'
= arguments : values passed to function when function is called
Arrow function
- No function body + only a return value → omit the keyword
return
and{ }
surrounding the code. - Simplify smaller functions into one-line statements
- e.g.
const func = () => console.log('Hello');
Callback functions
function ask (question, yes, no) {
if (confirm(question)) yes();
else no();
}
ask(
'Do you agree?',
() => console.log('You agreed.'),
() => console.log("You didn't agree.")
);