강좌 : 유튜브 드림코딩 by 엘리

3. Function

• 프로그램을 구성하는 기본적인 building block
• subprogram 이라고도 불린다
• 여러번 재사용 가능

📄 Function declaration

• funtion name(param1, param2) { body... return; }
• one function === one thing
• naming : doSomething, command, verb
• function is object in JS
• hoisting 가능

// 예시 1
// 'Hello' 밖에 출력할 수 없어서 쓸모가 없는 함수
function printHello() {
  console.log('Hello');
}
printHello();

// 예시 2
// 'message'라는 parameter값을 받아 인자하기 때문에 원하는 메세지를 출력할 수 있다
function log(message) {
  console.log(message);
}
log('Hello');

---

✍️Parameters

• premitive 타입의 경우 value값이 전달
• object 타입의 경우 reference값이 전달

// 예시
function changeName(obj) {
  // 전달된 object의 name을 coder로 변경
  obj.name = 'coder';  // hxxjxx.name
}
const hxxjxx = { name: 'hxxjxx' };
changeName(hxxjxx);
console.log(hxxjxx);

→ {name: coder}

---

✍️Default parameters

• added in ES6
• parameter옆에 원하는 default값을 지정하면 사용자가 parameter 값을 전달하지 않아도 값이 대체되어 사용

// default값을 안줬을 때
// 두가지의 parameter을 받아온다
function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}
showMessage('Hi');  // from이 정의되어있지 않기때문에 undefined를 인자

→ Hi by undefined

// default값을 줬을 때
function showMessage1(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage1('Hi'); // default값이 지정되어있기 때문에 대체되어 인자

→ Hi by unknown

---

✍️Rest parameters

• added in ES6
• 점세개(...)를 이용하여 배열형태로 전달

// 예시
function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
  // 좀더 간단하게 표현
  for (const arg of args) {
    console.log(arg);
  }
  // 더 간단하게 표현
  args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'hxxjxx');

---

✍️Scope

• block밖에서는 block안이 보이지 않고 안에서만 밖을 볼 수 있다
• block밖에서 선언된 함수는 전역 변수(global variable)라 한다
• block안에서 선언된 함수는 지역 변수(local variable)라 한다
• 지역 변수는 block안에서만 접근이 가능하고 전역 변수는 block안에서도 접근이 가능

---

✍️Return a value

• return타입이 없는 함수들은 return undefined;이 들어가지만 생략가능

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

---

✍️Early return, earlt exit

• block안에서 logic을 많이 작성하면 가독성이 떨어진다
• 조건이 맞지 않을때는 빨리 함수를 종료하고 조건이 맞을때만 필요한 logic을 실행하는 것이 더 좋다

// 안좋은 예시
function upgradeUser(user) {
  if (user.point > 10) {
  // long upgrade logic...
  }
}

// 좋은 예시
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 funcions
• can be returned by another function

---

📄 Function expression

• function declaration와 반대로 할당된 다음부터 호출이 가능

// 예시
// 함수를 선언함과 동시에 바로 print라는 변수에 할당
const print = function () {  // anonymous function
  console.log('print');
};
print();  // print
const printAgain = print;
printAgain();  // print

anonymous function

• 함수에 이름이 없는 것

named function

• 함수에 이름이 있는 것
• 디버깅할때 stack traces에 이름을 남길 수 있다
• 함수안에서 자신스스로 또다른 함수를 호출할 수 있다

---

✍️Callback function

• 함수를 전달해서 상황에 맞는 함수를 부르는것

// 예시
// 정답과 정답이 맞으면 호출될 함수와 정답이 틀리면 호출하게될 함수
function randomQuiz(answer, printYes, printNo) {
  if (answer === 'love you') {
    printYes();
  } else {
    printNo();
  }
}

const printYes = function () {
  console.log('yes!');
};

const printNo = function () {
  console.log('no');
};
randomQuiz('wrong', printYes, printNo);  // no
randomQuiz('love you', printYes, printNo);  // yes!

---

✍️Arrow function

• always anonymous
• 화살표 =>를 이용해서 function을 간결하게 사용
• block을 사용할경우 return키워드를 이용해서 값을 return해줘야한다

// 예시 1
const simplePrint = function () {
  console.log('simplePrint');
};

→ const simplePrint = () => console.log('simplePrint');

// 예시 2
const add = function (a, b) {
  return a + b;
};

→ const add = (a, b) => a + b;

// block을 사용할 경우
const simpleMultiply = (a, b) => {
  // do something more
  return a * b;
};

---

✍️IIFE

• Immediately Invoked Function Expression
• 선언함과 동시에 바로 호출
• 함수의 선언을 괄호로 묶은 뒤 호출하듯이 하면 된다
• 최근에는 잘 쓰이지 않는다

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