함수

사용자 정의 함수(function)

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

함수 선언 2가지

1. 함수 선언식

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

// 함수 호출
함수명(값1, 값2, ..);

2. 함수 표현식(권장)

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

// 함수 호출
변수명(값1, 값2, ..);

 

디폴트 매개변수

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

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

// 함수 호출
함수명();
함수명(값1, 값2, ..);

 

나머지 매개변수

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

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

// 함수 호출
함수명(값1, 값2, 값3, 값4, 값5) // 값1=매개변수1, 나머지 값 모두=매개변수2

 

---

호이스팅(hoisting)

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

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


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

 

---

화살표 함수

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

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

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

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

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

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