Function, Arrow Function

Function

• fundamental building block in the program
• subprogram can be used multiple times
• performs a task or calculates a value

 

1. Function declaration

• 함수의 기본 형태: function name(param1, param2) {body ... return;}
• 특징
• one function === one thing    // 하나의 함수에서는 하나의 기능만 수행하는 것이 좋음
• naming: doSomething, command, verb    // 함수 이름은 어떤 기능을 하는지 보기 쉽게 작성하는 것이 좋음
• e.g. createCardAndPoint -> createCard, createPoint
• function is object in JS    // 함수는 자바스크립트에서 오브젝트의 일종

// Hello를 출력하는 함수
function printHello() {
  console.log('Hello');
}
printHello();    // Hello


// 메시지를 출력하는 함수
function log(message) {
  console.log(message);
}
log('Hello@');    // Hello@
log(1234);    // 1234

 

2. Parameters

• premitive parameters: passed by value
• object parameters: passed by reference

function changeName(obj) {
  obj.name = 'coder';
}
const ellie = {name: 'ellie'};
changeName(ellie);    // ellie가 참조하는 레퍼런스를 coder로 변경
console.log(ellie);    // {name: 'coder'}

 

3. Default parameters (added in ES6)

function showMessage(message, from = 'unknown') {    // 입력되지 않은 값에 기본으로 unknown 출력되도록 함
  console.log(`${message} by ${from}`);
}
showMessage('Hi~');  // Hi~ by unknown

 

4. Rest parameters (added in ES6)

function printAll(...args) {    // 배열을 풀어서 출력할 때
  for(let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
printAll('dream'. 'coding', 'ellie');

// 배열에 있는 값을 출력하는 방법 2
function printAll(...args) {
  for(const arg of args) {
    console.log(arg);
  }
}

// 배열에 있는 값을 출력하는 방법 2
function printAll(...args) {
  args.forEach((arg) => console.log(arg));
}

 

5. Local Scope

• 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있음
• 스코프 안에서 스코프 밖의 변수를 참조할 수 있지만, 스코프 밖에서 스코프 안의 변수는 참조할 수 없음

let globalMessage = 'global';    // global variable
function printMessage() {
  let message = 'hello';
  console.log(message);    // local variable
  console.log(globalMessage);
  
  function printAnother() {
    console.log(message);
    let childMessage = 'hello';
  }
  console.log(childMessage);    // error 발생! 스코프 안의 변수는 참조할 수 없음
}
printMessage();    // hello global

 

6. Return a value

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2);
console.log(`sum: ${sum(1, 2)}`);    // sum: 3

 

7. Early return, early exit

// bad
function upgradeUser(user) {
  if(user.point > 10) {
    // long upgrade logic ...    // 블럭 안에 로직을 많이 작성하면 가독성이 떨어짐
  }
}


// good
function upgradeUser(user) {
  if(user.point <= 10) {
    return;    // 조건이 맞지 않을 때는 빨리 리턴해서 종료시키는 것이 좋음
  }
  // long upgrade logic ...
}

 

 

First-class function

• functions are treated like any other variable
• can be assigned as a value to variable
• can be passed as an argument to other functions
• can be returned by another function

 

1. Function expression

• a function declaration can be called earlier than it tis defined (hoisted)
• a function expression is created when the execution reaches it

const print = function () {    // anonymous function 이름없는 함수
  console.log('print');
};
print();    // print
const printAgain = print;
printAgain ();    // print
const sumAgain = sum;
console.log(printAgain(1, 3));    // 4

 

2. Callback funcrion using function expression

function randomQuiz(answer, printYes, printNo) {    // answer가 맞으면 printYes, 아니면 printNo 함수를 호출
  if(answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}
const printYes = function() {    // anonymous function
  console.log('yes!');
};

const printNo = function print() {    // named function: 디버깅할 때 어떤 함수에서 오류가 났는지 찾기 쉬움
  console.log('no!');
};

randomQuiz('wrong', printYes, printNo);    // no!
randomQuiz('love you', printYes, printNo);    // yes!

 

 

Arrow function

• 항상 이름 없는 함수로 사용함(always anonymous)

const simplePrint = () => console.log('simplePrint!');
const add = (a, b) => a + b;
const simpleMultiply = (a, b) => {
  // do something more
  return a * b;
};

 

 

IIFE: Immediately Invoked Function Expression

• 요즘에는 잘 사용하지 않지만 자바스크립트에서 바로 함수를 실행하고 싶을 때 사용할 수 있음

(function hello() {
  console.log('IIFE');
})();    // IIFE