Function(함수 선언)

// -fundamental building block in the program
// - subprogram can be used mulitple times
// - performs a task or calculates a value

• function은 작은 프로그램이라고도 불린다.

1. Function declaration

1. 함수 선언 방식
function name(param1, param2) { body... return; }
2. one function === one thing

• 하나의 함수는 하나의 기능만 가질 수 있게 하는 것이 좋다.
  ex) e.g. createCardAndPoint -> createCard, CreatePoint -> Card를 만드는 함수와 Point를 만드는 함수 두개로 나눌 수는 없는지 고려하자!

3. naming: doSomething, command, verb

• 함수의 이름은 동사형으로 하는것이 관례이다.

4. function is object in JS

• javascript에서 function은 object로 간주된다. 그래서 function을 변수에 할당할 수도 있고 , 파라미터에 전달이 되고, 파라미터에 리턴할 수도 있음

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

// ^ 위에 식보다는 아래처럼 파라미터를 이용해서 출력하는 것이 더 좋음

function log(message) {
    console.log(message);
}
log('Hello@');

💗 Typescript

JS는 타입이 지정되어 있지 않기 때문에 그래서 타입이 중요한 코드 경우에는 타입스크립트로 진행!

타입스크립트는 함수 인터페이스에 함수의 이름/전달돼야하는 파라미터/데이터 타입/리턴값이 정확하게 명시돼있는 반면, 자바스크립트는 타입이 지정되어 있지 않아 협업에서는 타입스크립트를 주로 활용

2. Parameters

// premitive parameters: passed by value
// object parameters: passed by reference
// premitive type은 메모리에 그대로 전달이 되고, object는 메모리의 reference가 전달이 됨
function changeName(obj) {
    obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);

❓ "obj가 const로 정의되어 있다 할지라도, 변경은 obj.name이기 때문에 변경 가능하다."라는데 뭔 소린지..근데 뭔 소린지 몰라도 계속 언급되는 부분들때문에 차차 알아가는 건 있어서 너무 많은 시간은 할애하지 않아야겠다!

3. Default Parameters (added in ES6)

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

// (message, from = 'unknown')와 같이 파라미터의 default값을 지정할 수 있다.

4. 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', 'ellie');

5. Local scope

let globalMessage = 'global'; //global variable
function printMessage() {
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
}
printMessage();

• javascript에서 scope란 틴트가 씌워진 유리창이랑 똑같다.
  밖에서는 안을 호출할 수 없고, 안에서는 밖을 호출할 수 있다.

6. Return a value: 계산된 값을 리턴할 수 있다.

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

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


// 모든 함수에는 return, undifined이거나 값을 리턴할 수가 있다.(?)

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...
}

• 조건에 맞는지 확인하기 위해 조건식이 길어지는 경우에는 if,else를 번갈아 쓰기보다는 조건에 충족하지 못하는 부분만 빨리 return시키는게 좋은 코드!

Function expression(함수 표현)

// First-class function
// functions are trated 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

✍ 다른 변수와 마찬가지로 변수에 할당이 되고 펑션의 파라미터로 전달이 되고 리턴값으로도 리턴이 된다. 그것이 가능하게 하는 것이 function expression이다.

1. Function expression

// a function declaration can be called earler than it is defined. (hoisted)
// a function expression is created when the excution reaches it. 
const print = function () {
    console.log('print');
} // 선언과 동시에 할당
print();
const printAgain = print;
printAgain();
const sumAgain = sum;
console.log(sumAgain(1, 3));

1. function declaration과 function expression의 가장 큰 차이점

• expression은 할당된 다음부터 호출이 가능한 반면에 declaration은 호이스팅이 가능하다.
  즉, 함수가 호출되기 이전에도 사용할 수 있음

2. Callback function using function expression

2-1. anonymous function과 named function

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 debugger's starck traces: 디버깅을 할 때 사용
// ㄴrecursions: 함수 안에서 또 다른 함수를 호출할때 사용
const printNo = function print () {
    console.log('no!');
};

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

2-2. Arrow function

• always annoymous(항상 이름이 없는 함수)

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

// 위에 식을 밑에처럼 화살표를 이용하여 간단하게!
const simplePrint = () => console.log('simplePrint!');

// 간단하게 쓰이게 되는 예시들
// 1. 
const add = (a, b) => a + b;

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

2-3. IIFE: Immediately Invoked Function Expression: 선언함과 동시에 호출이 가능하게 하는 것

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