참고 사이트

드림코딩 엘리 JS수업
엘리 수업을 정리해준 Notion 사이트

Function

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

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

1. Function declaration

// function name(param1, param2) { body... return; }
// one function === one thing
// nameing: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, CreatePoint
// function is obeject in JS

function printHello() {
    console.log("hello");
}
printHello();

function log(message) {
    console.log(message);
}
log('hello');
// JS는 타입이 지정되어 있지 않기 때문에 오류가 날 수 있다.

1. 함수의 선언.
2. 함수의 이름, 파라미터, 리턴값을 가질 수 있다.
3. 하나의 함수는 하나의 기능만 가질 수 있게 하는 것이 좋다.
4. 함수의 이름은 동사형으로 하는것이 관례이다.
5. JS자체에는 파라미터나 리턴에 타입을 지정할 수 있기 때문에 나중에 현업에서 큰 프로젝트를 하게 될 경우 TypeScript를 통해 더 엄격한 형태의 함수를 만드는것이 요구된다.

2. Parameters

// premitive parameters: passed by value
// object parameters: passed by reference
function changeName(obj) {
    obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie) // 'coder'

1. obj가 const로 정의되어 있다 할지라도, 변경은 obj.name이기 때문에 변경 가능하다.

3. Defualt parameters (added in ES6)

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

1. (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');

1. rest parameters라고 해서 ...형태로 파라미터를 받으면 길이에 flexable한 배열을 파라미터로 받을 수 있다.
2. 배열의 모든 값을 출력하는 3가지 방법을 소개했는데 보고 넘어가자

5. Local scope

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

1. 밖에서는 안을 호출 할 수 없고, 안에서는 밖을 호출할 수 있다.

Function Expression

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

1. function을 변수처럼 할 수 있다.
2. 그 이유가 function 표현에 있다..?

1. Function expresssion

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

1. 함수 선언은 var가 마찬가지로 hoisting된다.
2. 하지만 함수를 anontmous로 생성하고 할당하는 방식은 반드시 먼저 생성되고 호출 할 수 있다.

2. Callback function using function

function randomQuiz(answer, printYes, printNo){
    if(answer === 'love you') {
        printYes();
    }else {
        printNo();
    }
} // 함수를 파라미터로 전달하여 필요할 떄 함수를 호출해 -> callback함수라고 한다.

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

// named function
// better debugging in debugger's stack traces
// recursions
const printNo = function print() {
    console.log("no");
}
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

1. 파라미터에 함수를 줘서 함수안에서 다른 함수를 호출하는 함수를 callback function이라고 한다.
2. 함수를 만들 때 anonymous, named 2가지방식으로 할 수 있는데, debugging 할 때 등의 이유로 named방식이 더 좋다.
3. 자기 자신을 반복 호출하게 되는 함수를 recursion function 이라고 하는데, 너무 많이 반복되면 callstack이 꽉 차서 에러가 나도 프로그램이 죽는다.

3. Arrow function

// always anonymous
const simplePrint = function() {
    console.log('simplePrint');
}

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

1. 항상 anonymous function이다.
2. 여러 줄에 표현할 경우 return 을 적어줘야한다(return이 필요하다면,).

4. IIFE: Immediately Incoed Function Expression

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

1. 함수를 선언하자 마자 실행할 수 있다.