Default parameters

• 매개변수에 디폴트 값 설정하기

<script>
	function showMessage(message, from){
    if (from === undefined){
        from = 'unknown';
    }
    console.log(`${message} by ${from}`);
    }
    
    showMessage('Hi'); 
    //from 값이 없으니까, Hi by unknown 출력 
</script>

위의 식에서, 어떤 매개변수의 값이 비었을 때 if를 사용하여 어떤 값을 넣어줄지 지정해주었다. 이는 아래와 같이 Default parameters를 사용하여 간단하게 나타낼 수 있다.

<script>
    function showMessage(message, from = 'unknown'){ //default값 미리 지정
        console.log(`${message} by ${from}`);
    }
    
    showMessage('Hi','yura'); 
    //from 값이 있으니까, Hi by yura 출력
</script>

Rest parameters

• 배열형태의 매개변수는 ...을 사용하여 표기한다.

<script>
    function printAll(...args){ 
        for(let i=0; i < args.length; i++){  //배열의 갯수는 3
            console.log(args[i]);  //배열의 i번째를 출력
        }
    }
    
    printAll('dream','coding','ellie');
</script>

위의 식은 다음과 같이 더 간단하게 표기가 가능하다.

<script>
		function printAll(...args){
            for(const arg of args){
                console.log(arg);
            }

            //또는 

            args.forEach((arg) => console.log(arg));
        }
</script>

지역변수와 전역변수

• 전역변수(밖에서 선언된 것)은 지역변수 안에서 쓸 수 있지만, 지역변수에서 선언된 것은 그 안에서만 사용 가능하다.

<script>
    let global = 'global';
    
    function print(){
        let message = 'hello';
        console.log(message);  //hello
        console.log(global);  //global

        function another(){
            console.log(message);  //hello
            let child = 'hi';  
            console.log(child);  //hi
        }
        
        console.log(child); // error : 안에서 선언한 변수는 밖에서 사용 불가
        another();

        //return 타입이 없는 함수들은 본래 생략되어있음 = return undefined;
    }
    
    print();
</script>

Early return, early exit

• 실무팁! 조건을 다 검사한 후 리턴하지 말고, 조건이 맞는것부터 빨리 리턴시키고 나머지 검사는 뒤에서 하자.

<script>
	//나쁜예
    function upgrade(user){
        if(user.point > 10){
            //long upgrade logic...
        }
    }
    
    //좋은예
    function upgrade(user){
        if(user.point <= 10){
            return;
        }
        //long upgrade logic...
	}
</script>

First-class function

1. Function expression

<script>
    const firstClass = function(){  //변수에 이름없는 함수를 선언
        console.log('print');
    };
    firstClass(); //함수처럼 변수 호출 가능

    const printAgain = firstClass;  //변수에 변수값을 할당
    printAgain(); 
    
    const sumAgain = sum;
    console.log(sumAgain(1, 3));  //4
</script>

2. Callback function using function expression

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

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

    randomQuiz('wrong', printYes, printNo);  //no
    randomQuiz('love you', printYes, printNo);  //yes
</script>

Arrow function : always annonymous function

<script>
    const simpleprint = function(){
        console.log('simpleprint!');
    }
    
    // 위 식을 화살표 함수로 
    const simpleprint = () => console.log('simpleprint!');

    const add = (a, b) => a + b;        //한줄 표현
    const simpleMultiply = (a, b)=>{    //여러줄 표현
        // + do something more
        return a * b;
    }
</script>

IIFE: Immediately Invoked Function Expression

• 함수를 선언하는 동시에 호출하는 기능

<script>
    (function hello(){
        console.log('IIFE');
    })(); 
</script>

Quiz.

function calculate(command, a , b)
command: add, substract, divide, multiply, remainder
= calculate 함수를 만들고, 입력받은 command에 따라 a와 b의 값을 연산하라.

<script>
    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 'reminder':
                return a % b;
            default:
                throw Error('unKnown command');
        }
    }
</script>

Elli's DreamCoding 영상을 정리한 내용입니다.🌱 드림코딩 by엘리