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

사용자 정의 함수(function)

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

함수 선언식

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

// 함수 사용
함수명(값1, 값2, ...);

함수 선언식 예제

function func1() {
    console.log('func1() 호출!');
}

func1(); // func1() 호출!

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

func2(); // undefined
func2(10); // 전달받은 매개변수의 값: 10
func2('apple'); // 전달받은 매개변수의 값: apple
func2(true); // 전달받은 매개변수의 값: true

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

func3(1,100); // 1부터 100까지의 총합: 5050
func3(10); // 10부터 undefined까지의 총합: 0

function func4() {
    return '🎁';
}

func4(); // 함수를 실행만 했으므로 출력값이 없음
console.log(func4()); // 🎁
const presents = func4(); // 상수에 리턴값 담기
console.log(presents); // 🎁

함수 표현식

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

// 함수 사용
변수명(값1, 값2, ...);

함수 표현식 예제

const func1 = function func_1() {
    console.log('func1() 호출!');
}

func1(); // func1() 호출!

디폴트 매개변수

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

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

// 함수 사용
함수명();
함수명(값1, 값2, ...);

디폴트 매개변수 예제

function func5(num1 = 1, num2 = 1) {
    console.log(`num1의 값: ${num1}, num2의 값: ${num2}`);
    console.log(`${num1} * ${num2} = ${num1*num2}`);
}

func5();
// num1의 값: 1, num2의 값: 1
// 1 * 1 = 1
func5(10, 3);
// num1의 값: 10, num2의 값: 3
// 10 * 3 = 30

나머지 매개변수

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

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

// 함수 사용
함수명(값1, 값2, 값3, 값4, 값5);

나머지 매개변수 예제

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);
// x1의 값: 30
// x2의 값: 40,70

 

함수 만들고 바로 호출하기

(function(){
    console.log('함수를 만들고 바로 호출합니다.');
})();
// 함수를 만들고 바로 호출합니다.