[강의노트][드림코딩] 함수

드림코딩 자바스크립트 함수 강의 노트

[Function]

함수는 프로그램 내 프로그램이라 여겨짐

input(parameter)를 받아서 output을 return

API를 사용할 때 함수의 이름을 보고 기능을 추정 - 이름 잘 짓는 것 중요

- Fundamental building block in the program

- Also called subprogram, and can be used multiple times

- Performs a task or calculate a value

1. Function declaration

 * function name(param1, param2){body...return;}

 * one function === one thing - 하나의 함수는 한가지 기능만 하도록

 * naming : doSomething, command, verb ex) createCardAndPoint > createCard, creatPoint

 * function is object in JS - 따라서 변수 할당, 파라미터 전달, 함수 리턴 가능

function printHello(x) {

    console.log(`${x}`)

};

printHello; // 무시

printHello(); // 파라미터 전달하지 않아 undefined

printHello('Hello'); // Hello

* 파라미터 타입이 전해지지 않는 부분이 불확실성 유발 - TypeScript 활용 권장

2. Parameters(인자)

 * primitive parameters : passed by value

 * object parameters : passed by reference

function changeName(obj) {

    obj.name = 'coder';

}

const ellie = { name: 'ellie' };

changeName(ellie);

console.log(ellie);

3. Default parameters(ES6~)

function showName(messege, from = 'unknown') {

    console.log(`${messege} from ${from}`);

}

showName("철수");

4. Rest parameters(ES6~) ...배열 형태로 전달

function printAll(...args) {

    for (let i = 0; i < args.length; i++) {

        console.log(args[i])

    }

 * for~of - args의 모든 값이 차례로 arg로 지정

    for (const arg of args) {

        console.log(arg);

    }

 * 더 심플하게

    args.forEach((arg) => console.log(arg));

}

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

5. Local scope - 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다

 * {}안에 선언한 것은 지역 변수로 밖에서 활용 불가

 

 

 

6. Return a value

 * return 내용이 없는 것은 return undefined; 와 동일하며, 생략 가능

 

 

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

       }

}

8. Function expression

const print = function print(msg){

    console.log(msg);

}; // named function

const print2 = function(msg){

    console.log('msg');

};

print2();

function minus(x,y){

    return x-y

}

console.log(minus(3,1));

9. Callback function - 함수를 파라미터로 전달하여 조건에 맞을 경우 실행하는 함수

function randomQuiz(answer, printYes, printNo){

    if(answer === 'you'){

        printYes();

    } else {

        printNo();

    }

};

* anonymous function

const printYes = function (){

    console.log('YESS!!!')

}

* named function

const printNo = function print(){

    console.log('Nooo!!!')

}

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

randomQuiz('you', printYes, printNo)

10. Arrow function - always annonymous function

const simplePrint = () => console.log('simple print');

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

const block = (a, b)=>{

    console.log('do something')

    return a+b

}

simplePrint();

add(1,3);

block(5,5);

11. IIFE ： Imediately Invoked Function Expression - 함수의 선언을 ()로 묶고 () 붙일 경우 선언과 동시에 함수 선언

(function hello(){

    console.log('IIFE');

})();

<Quiz>

function calculate(command, a = 1, b = 2){

    switch(command){

        case 'add':

            return (a+b);

        break        

        case 'subtract':

            return (a-b);

        break      

        case 'divide':

            return (a/b);

        break        

        case 'multiply':

            return (a*b);

        break

        default :

            throw Error('unknown command')

    }

}

console.log(calculate('subtract'));