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.")
);