5.Functions 함수

1. Function(함수)

• 여러번 재사용이 가능하다.

• 한가지의 임무나 또는 계산을 하기위한 역할을 한다.

• 하나의 함수는 한가지의 일만 하도록 한다.

• 함수는 무언가를 동작하는것이기 때문에, 이름을 동사, command, doSoething으로 이름을 정하는것이 좋다.
  • ex) createCard , readMessage

• 함수는 한가지 일만하도록 하기 때문에 , createCardAndPoint 이런것보다 —> createCard , createPoint로 따로 분리해놓는것이 좋다.

• javascript에서 함수는 객체(object)이다. 그래서 변수에도 할당할수 있고, 파라미터로 전달할수 있고, 함수의 리턴으로도 사용할수 있는것이다.

2. 함수의 근본

• 함수는 입력(input)을 넣었을때 내가 원하는 출력(output)을 가져와주는것이다. 따라서 함수의 근본은 입력 과 출력에 있다.

function printHello() {
  console.log("Hello");
}
// bad , 그냥 출력만 되잖아.

function log(message) {
  console.log(message);
}
log("Hello");
// good , 내가 어떤 입력을 했을때 어떤 출력의 결과를 얻을수 있게 만들었다

3. 파라미터

• premitive parameters : passed by value

• object parameters : passed by reference ,

4. Default 파라미터 (ES6)

• Java와 다르게 파라미터의 갯수를 맞춰서 함수를 선언 안해도 undefined라는게 알아서 들어가네

function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}

//console.log(Hi by undefined)

showMessage("Hi");

이것을 개선하기위해 예전에는

function showMessage(message, from) {
  if (from === undefined) {
    from = "yosup";
  }
  console.log(`${message} by ${from}`);
  //console.log(Hi by yosup)
}

showMessage("Hi");

하지만 ES6 에서는

function showMessage(message, from = "yosup") {
  console.log(`${message} by ${from}`);
  //console.log(Hi by yosup)
}

showMessage("Hi");

5. Rest 파라미터 (ES6)

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
}
//... 을 쓰면 배열형태로 전달된다.

printAll("dream", "coding", "ellie");

좀더 나은 코딩

function printAll(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}
//... 을 쓰면 배열형태로 전달된다.

printAll("dream", "coding", "ellie");

좀더 나은 코딩(arrow function 과 forEach 콜백함수를 씀)

function printAll(...args) {
  args.forEach((arg) => console.log(arg));
}
//... 을 쓰면 배열형태로 전달된다.
printAll("dream", "coding", "ellie");

6. return

function sum(a, b) {
  return a + b;
}

sum(3, 5); // 8

function printUndefined(a, b) {
  a + b;

  //return undefined가 생략
}

console.log(printUndefined(3, 5)); //undefined

//return 이 명시되어있지 않으면 undefined를 return 한다.

7. early return

• 나쁜 케이스

function upgradeUser(user) {
  if (user.point > 10) {
    //long upgrade logic..
  }
}

• 좋은 케이스 : 블록 안에서 로직을 작성하는것은, 가독성이 떨어진다.

function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }

  //long upgrade logic..
}

8. 함수의 표현식

• 자바스크립트는 first-class function을 지원한다. 이말인즉슨 (1). 다른변수와 마찬가지로 변수에 할당되며 , 파라미터로도 전달이 되고 , return으로도 전달이 된다는 말이다.

• 함수의 표현식은 annoymouse function과 named function이 있는데 일반적으로 annoymouse function을 쓰고 named fucntion은 재귀함수나 디버깅을 할고 디버깅한것을 추적할때 쓴다.

// 함수 표현식 중 anonymous function : 함수에 이름이 없는것을 의미함

print(); // 불가 , 함수 표현식은 변수 호이스팅이 되기 떄문이다.

const print = function () {
  console.log("print");
};
// // 함수에 이름이 있으면 named funtion 이라고 함
// const print = function print() {
//   console.log("print");
// };

print();
const printAgain = print;
printAgain();

sum(3, 5); // 가능 , 함수 산언문은 함수 호이스팅이 되기 때문이다.

function sum(a, b) {
  return a + b;
}
// 함수 선언문

const sumAgain = sum;
console.log(sumAgain(1, 3));

8. 콜-백 함수 : 파라미터로 함수를 전달해서 함수를 실행하는것

여기서 콜백함수는 printYes , printNo 이다.

function randomQuiz(answer, printYes, printNo) {
  if (answer === "love you") {
    printYes();
  } else {
    printNo();
  }
}

9. Arrow function (Arrow function은 좀더 자세하게 다룰 필요가 있다.)

const simplePrint = function () {
  console.log("simple");
};

const simplePrint = () => console.log("simple");