Function(sub program)

• Application Programming Interface(API)
  • INPUT x => FUNCTION f: => OUTPUT f(x)
  • INPUT(parameter) -> FUNCTION -> OUTPUT(return)
• Application Programming Interface를 사용할 때 함수 이름을 보고 알 수 있다
• fundmental building block in the program
  • 프로그램을 구성하는 가장 기본적인 빌딩 프로그램
• subprogram can be use multiple times
  • 서브프로그램이라고도 하며 재사용성이 뛰어나다
• performs a task or calculates a vlue
  • 대체적으로 한가지의 테스크(직무, 작업)나 계산을 위해 사용
• 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 역할
• 파라미터가 주어졌을 때 처리해서 결과를 만들수도 있다
• 파라미터 값을 넣어줘도 되고 없어도 상관이 없다
• 값을 반환 할 때는 'return 반환 값;'을 마지막에 추가해 준다
• return도 반환할 값이 없으면 없어도 된다
  

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
  • (Function 은 오브젝트 이므로 변수에 할당, param으로 전달하거나 return 할 수 있다)

function printHello() {
  console.log("Hello");
}
printHello();
// 내부에 지정된 출력은 크게 도움이 되지 않는다

function log(message) {
  console.log(message);
}
log("Hello@");
// 이렇게 동적으로 작동할 수 있으면 좋다
log(1234);
// JS는 Type이 없고 동적 할당으로 타입 지정이 힘들다
// JS가 어느정도 되면 TypeScript를 배우는게 좋다

2. Parameters(매개변수)

• premitive parametes : passed by value
  • 메모리에 value가 저장되어 있기 때문에 value가 전달
• obejct promaters : passed by reference
  • 메모리에 ref가 저장되어 있어 ref가 전달

function changeName(obj) {
	// obj로 받아온 ref가 가리키는 data를 바꾸면 외부에서도 바뀐다
    	obj.name = 'coder';
}
const ellie = { name : 'ellie'};
changeName(ellie);
console.log(ellie.name); // coder

3. default Parameters (added in ES6)

• function name(param1 = value, param2 = value) { body... return; }

function showMessage(message, from) {
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// parameter가 하나 부족하다!
// error은 없지만 제대로 출력 되지 않는다

function showMessage(message, from) {
    if(from === undefined)
        from = 'unknown';
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// 옛날에는 조건을 줘서 값을 할당하고는 했음

function showMessage(message, from='unknown') {
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// Default Parameters로 parameter에 바로 넣어 줄 수 있다

4. Rest Parameters(added in ES6)

• Forward values in array form
  • 배열 형식으로 값 전달
• function name(...args) { body... return; }
  • '...'을 통해 배열 형태로 parameter값 전달

function printAll(...args) {
    // 기본 for문
    for(let i = 0; i < args.length; i++){
     	 console.log(args[i]);
     }
	
    	// for of문(배열일 경우에만 사용)
     for(const arg of args){
	 console.log(arg);
     }
	
    // forEach(마찬가지로 배열일 경우에만 사용)
    args.forEach(arg => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

5. Local scope(지역 범위)

• {} 내부에 선언된 변수는 외부에서 접근할 수 없다

// global variable, 전역변수
let globalMessage = 'global';

function printMessage() {
    // local variable, 지역 변수
    let message = 'hello';
    console.log(message);
    console.log(globalMessage);
    function printAnother() {
        console.log(message);
        // local variable, 지역 변수
        let childMessage = 'hello';
    }
    console.log(childMessage); // error
}
printMessage();

6. return a value

• return 값이 없는 function은 return undefined; 와 같다

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

7. Early return, Early exit

• 종료는 최대한 빨리 종료를 시켜라

// bad
// block 내부에 코드를 작성하는 건 가독성이 떨어진다
function upgradeUser(user) {
     if(user.point > 10) {
         // long upgrade logic.URLSearchParams..
     }
 }

// good
// 조건이 맞지 않을 때는 빠르게 함수를 종료시키고
// 그 외에 로직을 실행히키는게 좋다
function upgradeUser(user) {
    if(user.point <= 10) {
        return;
    }
    // long upgrade logic.URLSearchParams..
}

번외, 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
  • 다른 함수의 parameter 값으로 전달이 된다
• can be returned by another function
  • 다른 함수를 반환도 가능하다

8. Function expression (표현식)

• a function declareation can be called earlier than it is defined. (hoisted)
  • 함수 선언식은 선언 전에 호출이 가능하다(호이스팅)
• a function expression is create when the execution reached it
  • 함수 표현식은 할당, 선언 후에 호출이 가능하다!

9. anonymous function(익명함수)

• 무기명 함수라고도 하여 함수의 이름이 없이 선언되고 사용되는 함수 입니다!
• 표현식에서 주로 사용되는 방법입니다

// print 익명함수
const print = function() {
     console.log('print');
 }
 print();
 const printAgain = print;
 printAgain();
 
 // sum익명함수
 const sum = function(num1, num2) {
 	return num1 + num2
 }
 const sumAgain = sum;
 console.log(sumAgain(1, 3));

10. Callback function using function expression

• 함수를 전달해서 야 니가 상황에 맞으면 니가 원하면 전달된 함수를 불러라고 전달한 것
• callback function : printYes, printNo

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

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

// named function
// better debugging in devugger's stack traces
// redusions
 const printNo = function print () {
    console.log('no!');
    // Recursive function, recursion(재귀 함수)
    print();
}

randomQuiz('wrong',printYes, printNo);
randomQuiz('love you',printYes, printNo);

11. Arrow Function(화살표 함수)

• always anonymous function
  • 언제나 익명 함수

    const simplePrint = function () {
        console.log('simplePrint!')
    }
    const simplePrint = () => console.log('simplePrint');

    function add(a,b) {
        return a+b;
    }
    const add = (a,b) => a+b;
    
    const add = (a, b) => {
         return a + b;
    }
    const sum = add(1, 2);
    // 다른 실행문 없이 반환을 바로 준다면 간략화 할 수 있다
    const add = (a, b) => a + b;
    const sum = add(1, 2);
    const call = (name) => {
          console.log(`${name} 안녕!`);
    }

12. IIFE(Immediately Invoked Function Expression, 즉시 실행 함수)

• 함수를 선언과 동시에 호출을 희망 할 경우 ()()로 묶어준다

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