[JavaScript] 사용자 정의 함수(function) - 함수 선언과 함수 호출

728x90

SMALL

1. 사용자 정의 함수(function)

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음
코드를 재활용하기 위해 사용

1-1. 함수 표현 방법

1) 함수 선언문

 function 함수명(매개변수1, 매개변수2...){
        함수가 호출되었을 때 실행할 문장;
        ...
        return 값;
    }

    함수명(값1, 값2...)

2) 함수 표현식

📍 함수표현식으로 사용하는 것을 권장함!

let 또는 const 변수명 = function(매개변수1, 매개변수2 ...){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

변수명(값1, 값2...)

1-2. 디폴트 매개변수

매개변수의 값을 설정하는 것
매개변수의 값을 정하지 않으면 기본값을 변수에 저장

function 함수명(매개변수1=값1, 매개변수2=값2, ...){
    함수가 호출되었을 때 실행할 문장;
    ...

    return값
}

함수명();
함수명(값1, 값2..)

1-3. 나머지 매개변수

생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있음

function 함수명(매개변수1, ...매개변수2){
    함수가 호출되었을 때 실행할 문장;
    ...

    return값
}

함수명(값1, 값2, 값3, 값4, 값5); 
//값1은 매개변수1에, 나머지는 다 매개변수2에 저장

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수</title>
</head>
<body>
    <h2>함수</h2>
    <script>
        function func1(){
            console.log(`func1() 호출!`)
        }

        func1()
        func1()
        console.log('----------------')

        function func2(num){
            console.log(`전달받은 매개변수의 값: ${num} `)
        }

        func2(3)
        func2()  // undefined
        func2('apple')
        func2(true)
        console.log('----------------')

        function func3(start, end){
            let sum = 0
            for (let i=start; i<=end; i++){
                sum += i;
            }
            console.log(`${start}부터 ${end}까지의 총합: ${sum}`)
        }

        func3(1,100)
        func3(10)  // start= 10, end=undefined, sum변수의 초기값인 0이 나옴
        console.log('----------------')

        function func4(){
            return '🍰'
        }

        func4()
        console.log(func4())
        const cake = func4()
        console.log(cake)
        console.log('----------------')

        // 디폴트 매개변수
        function func5(num1= 1, num2=5){
            console.log(`num1의 값:${num1}, num2의 값 ${num2}`)
            console.log(`${num1} * ${num2} = ${num1 * num2}`)
        }
        func5()
        func5(10,3)
        console.log('----------------')

        //나머지 매개변수
        function func6(...x){
            console.log(`x의 값: ${x}`)
            console.log(`x의 타입: ${typeof(x)}`)
            for (i in x){
                console.log(`i의 값: ${i}, x[${i}]: ${x[i]}`)
            }
        }
        func6(30, 40, 70)  // 배열 객체로 생성

        function func7(x1,...x2){
            console.log(`x1의 값: ${x1}`)
            console.log(`x2의 값: ${x2}`)  
        }
        func7(30, 40, 70);  // 30을 제외한 나머지는 다 x2에 배열 객체로 생성

        // 보너스!!
        (function(){
            console.log(`함수를 만들고 바로 호출합니다`)
        })();

    </script>
</body>
</html>

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 화살표 함수(arrow function expression) (0)	2023.04.11
[JavaScript] 호이스팅(Hoisting)이란? & 함수 선언문과 함수 표현식에서의 호이스팅 (0)	2023.04.11
[JavaScript] 배열(Array)이란? & 자바스크립트 배열의 특징, 배열 객체 메소드, 배열 객체와 for문 (0)	2023.04.11
[JavaScript] 제어문 - 2️⃣ 반복문 (while문, for문, break, continue) (0)	2023.04.10
[JavaScript] 제어문 - 1️⃣ 조건문 (if문, swith문) (0)	2023.04.07