출처 : 유튜브 드림코딩 자바스크립트

Function

• fundamental building block in the program(프로그램을 구성하는 굉장히 기본적인 buildidng block)**
• subprogram can be used multiple times
• performs a task or calculate a value**

1. Function declaration (function을 정의하는 방법)

• function name(param1, param2){body.... return;}
• one function === one thing (하나의 함수는 한 가지의 일만 하도록 만들어야한다.)
• naming : doSomething, command, verb
  e.g. createCarAnndPoint -> createCard, createPoint 로 나누는 게 더 좋다.
• function is object in JS -> function을 변수에 할당할 수 있고 함수를 return할 수도, parameter로 전달이 되는 것.

function printHello(){
    console.log('Hello');
}
printHello();

function log(message){
    console.log(message)
}

log("hi");
log("Hey");

2.Parameters

• premitive parameters : passed by value (value가 전달이 된다.)
• object parameters: passed by reference(object에 reference가 저장되어 있기 때문에 reference가 전달됌)

function changeName(obj){
    obj.name = 'coder';
}
const ellie = {name : 'ellie'};
changeName(ellie);
console.log(ellie);

{name : 'coder'} 출력된다.

3.Default parameters (added in ES6)

function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

parameter값이 전달되지 않을 때 기본 값을 지정할 수 있음.
Hi! by unknown 으로 출력된다.

4.Rest parameters (added in ES6)

function printAll(...args){
 for (let i = 0; i < args.length; i++){
     console.log(args[i]);
 }
}

... => rest parameters 배열형태로 전달이 된다.
printAll 3개의 인자가 배열 형태로 전달 되어 dream coding ellie 가 차례로 출력이 된다.

function printAll2(...args){
for (const arg of args){
    console.log(arg)
}}

for 이용 가능. arg에 있는 모든 값들이 차례차례 arg로 지정되어 출력이 된다.

function printAll3(...args){
args.forEach(arg => console.log(arg));}

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

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 childMesssage = 'hello';
    }
}
printMessage();

밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다.
중첩된 함수의 경우 자식함수는 부모함수에서 정의된 변수에 접근할 수 있다. (반대는 불가)

6. Return a value

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 별로 좋지 않은 코드 예시

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

• good 좋은 예시 , 조건에 해당하지 않는 경우 빨리 return하여 함수를 종료하고 조건이 맞을 때만 필요한 로직들 실행.

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 funcitons
-can be returned by another function

1.function expression

(위의 first-class function을 가능하게 한 것이 function expression)
a function declaration can be called earlier than it is defiend. (hoisted)
a function expression is created when the execution reaches it.

아래의 함수는 함수를 선언함과 동시에 변수를 할당한다. (function expression)

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

function expression 과 function declaration의 가장 큰 차이)
function declaration은 hoisting이 가능하다. (함수 선언 전에 함수 시행 가능 why? JS가 선언된 함수를 제일 위로 올려줌)

2. Callback function using function expression

printYes, printNo 와 같은 함수를 전달해서 전달된 함수를 부르는 것을 callback function이라고 한다.

printYes, printNo라는 callback 함수가 parameter로 전달되어 조건에 부합하면 호출되는 것! 
function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you'){
        printYes();
    }else {
        printNo();
    }
}

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

named function
function expression에서 named function을 사용하는 경우
1.better debugging in debugger's stack traces
2.recursions (함수 안에서 자신 스스로 또다른 함수를 호출할 때)

const printNo = function print(){
    console.log('no!');
    
};

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

3. Arrow function

always anonymous

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

위 function expression 을 arrow function으로 더욱 간단하게 표현할 수 있다.

const simplePrint1 = () => console.log('simplePrint');
const add = (a,b)=> a+b;

console.log(add(2,3));

한줄인 경우는 블럭 생략 가능. 더 복잡한 경우는 블럭 넣을 수 있다. 대신 이때는 return 적어주기

const simpleMultiplay = (a,b) => {
    // do something more
    return a * b;
}

4. IIFE : Immediately Invoked Function Expression

함수를 선언함과 동시에 호출한다.

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

퀴즈
function calculate(command, a, b) 형태의 함수 만들기!
command : add, substact, divide, multiply, remainder

function calculate(command, a, b){
    switch(command){
        case "add" : 
            return a + b;
        case "substract" : 
            return a - b;
        case "divide" : 
            return a / b;
        case "multiply" : 
            return a * b;
        case "remainder" : 
            return a % b;
        default : throw Error('unknown command');
    
        
    } 
}