[JavaScript] 기본 개념 정리2

참고 ⇒ https://poiemaweb.com/

 

매개변수(parameter)

<script>
    function sum(a, b) {
        return a + b;
    }
 
    //  매개변수 기본값 설정
    function printLog(msg = 'No Message') {
        console.log(msg);
        console.log({ msg });
    }
    printLog();                 // No Message
                                // { msg: 'No Message' }
    printLog('Some Message');   // Some Message
                                // { msg: 'Some Message' }
 
 
    //  매개변수 기본값으로 함수를 호출
    function getDefault() {
        return 1;
    }
    function printLog2(a = getDefault()) {
        console.log(a);
    }
    printLog2();                // 1
    printLog2(2);               // 2
 
 
    function required() {
        throw new Error('필수 입력입니다.');
    }
    function printLog3(a = required()) {
        console.log(a);
    }
    printLog3(3);               // 3
    printLog3();                // Uncaught Error: 필수 입력입니다.
 
</script>

 

나머지 매개변수 (rest parameter)

<script>
    //  나머지 매개변수를 사용하는 코드
    {
        function printLog(a, ...rest) {
            console.log(a, ...rest);
            console.log({ a, rest });
        }    
        printLog(1, 2);         //  1 2
                                //  { a: 1, rest: [2] }
        printLog(1, 2, 3);      //  1 2 3
                                //  { a: 1, rest: [2,3] }
        printLog(1, 2, 3, 4);   //  1 2 3 4
                                //  { a: 1, rest: [2,3,4] }
    }
 
    //  arguments 키워드를 이용해서 구현
    {
        function printLog() {
            let a = Array.from(arguments).slice(0, 1);
            let rest = Array.from(arguments).slice(1);
            console.log(a, rest);
        }
        printLog(1, 2);
        printLog(1, 2, 3);
        printLog(1, 2, 3, 4);
    }
</script>

 

명명된 매개변수 (named parameter)

<script>
    //  greaterThan 보다 크고, lessThan 보다 작은 numbers를 반환
    function getValues(numbers, greaterThan, lessThan) {
        //          ...
    } 
 
    const numbers = [ 10, 20, 30, 40, 50 ];
    getValues(numbers, 20, 40);         // 30
    
    //  파라미터에 이름을 명시해서 전달 ==> 가독성이 향성
    getValues({ numbers, greaterThan: 20, lessThan: 40 });  
</script>

 

화살표 함수 (arrow function)

<script>
 
    //  함수 표현식을 이용한 함수 정의 (익명 함수)
    const add1 = function(a, b) { return a + b; };
    console.log(add1(1, 2));        // 3
 
    //  화살표 함수
    const add2 = (a, b) => { return a + b; };
    console.log(add2(3, 4));        // 7
 
    //  화살표 함수에서 중괄호를 감싸지 않으면 화살표 오른쪽의 계산 결과를 반환
    const add3 = (a, b) => a + b;
    console.log(add3(5, 6));        // 11
 
    //  매개 변수가 하나이면 매개 변수를 감싸고 있는 소괄호도 생략이 가능
    const add5 = a => a + 5;
    console.log(add5(5));           // 10
 
    //  객체를 반환하는 경우에는 소괄호로 감싸야 함
    const addAndReturnObject = (a, b) => ({ result: a + b });
    console.log(addAndReturnObject(7, 8));              // { result: 15 }
    console.log(addAndReturnObject(7, 8).result);       // 15
    console.log(addAndReturnObject(7, 8)["result"]);    // 15
</script>