(JS) 사용자 정의 함수

사용자 정의 함수(function)

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

함수 선언식

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

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

함수 표현식 (추천)

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

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

디폴트 매개변수

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

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

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

나머지 매개변수

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

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

함수명(값1, 값2, 값3, 값4, 값5)

호이스팅(hoisting)

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
• let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음

함수정의                                    인터프리팅 결과
func1();                                function func1(){}
...                    함수 호이스팅            ...;
function func1(){       ----->          }
    ...;
}                                       func1


func2();                                        let func2;
let func2 = function(){     변수 호이스팅        func1()
    ...;                        ---->           function func2(){
}                                                      ...;
                                                }

화살표 함수

• function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현
• 화살표 함수는 항상 익명

매개변수가 없을 경우
const 함수명 = () => {
    함수가 호출되었을 때 실행될 문장;
    ...
}

const 함수명 = () => 함수가 호출되었을 때 실행될 문장;

매개변수가 있을 경우
const 함수명 = (매개변수1, 매개변수2, ...) => {
    함수가 호출되었을 때 실행될 문장;
    ...
}

const 함수명 = (매개변수1, 매개변수2, ...) => 함수가 호출되었을 때 실행될 문장;

✅ 매개변수가 1개인 경우는 소괄호를 생략할 수 있음
const 함수명 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;