함수에 대해 알아봅시다!

자바스크립트는 함수형 프로그래밍 언어로, 함수가 중요한 역할을 합니다.

함수는 function 키워드를 사용하여 정의할 수 있습니다.

 

01. 선언적 함수

선언적 함수(declarative function)는 function 키워드를 사용하여 함수를 선언하는 방식입니다. 함수의 이름과 매개변수를 괄호 안에 넣고, 함수 본문을 중괄호로 감싸서 정의합니다.

function 함수(){
    실행문;
}
출력문;

function func(){
    document.write("실행<br>");
}
func();

기본적인 함수로 출력문(호출)이 함수의 앞또는 뒤에 있어도 호출이 가능합니다. 

 

화살표 함수

또한 각각의 함수들은 화살표로 좀 더 짧게 표현 되기도 합니다.

기존 함수 표현식에서 function키워드를 삭제하고 인자를 받는 매개변수의 '()'와 '{}'사이에 화살표(=>)만 넣어주면 화살표함수입니다.  

{
    func = () => {
        document.write("실행되었습니다.<br>");
    }
    func();
}

 

 

02. 익명 함수

익명 함수(anonymous function)는 이름이 없는 함수입니다. function 키워드를 사용하여 함수를 정의하고, 이를 변수에 할당합니다. 변수에 함수 데이터를 저장하여 변수를 마치 함수 처럼 사용 할 수 있도록 만들어 줍니다.

 {
    const 함수 = function (){
        실행문;
    }
    출력문;
}

 {
    const func = function (){
        document.write("실행<br>");
    }
    func();
}

익명함수는 변수 선언 이후에 호출해야 합니다.

 

화살표 함수

익명함수도 화살표로 좀 더 짧게 표현이 가능합니다.

{
    const func = () => {
        document.write("실행되었습니다.<br>");
    }
    func();
}

 

호이스팅?

변수나 함수를 선언하지 않고 호푸 하였으르 때는 에러가 살생해야 하는 것이 맞지만, var로 선언하면 변수와 선언적 함수는 변수, 함수 선언 이전에 호출 하여도 에러를 발생 시키지 않습니다. 이것을 호이스팅이라고 합니다.

 

 

03. 매개 변수 함수

매개변수 함수는 함수 내부에서 다른 함수를 호출할 때, 인자로서 함수 자체를 전달하는 방식입니다. 이러한 방식을 활용하면 코드의 가독성을 높일 수 있습니다.

함수를 선언할 때 소괄호 내부에 매개 변수 이름을 작성한다음, 본문 실행문에 매개변수를 활용하여 작성한 후 호출할 때 함수 이름뒤에 출력문을 호출하는 방식입니다.

{
    function 함수(매개변수){
        실행문;
    }
    출력문;
}

{
    function func(str){
        document.write(str)
    }
    func("실행<br>");
}

 

화살표 함수

{
    func = (str) => {
        document.write(str)
    }
    func("실행되었습니다.<br>"); 
}

 

 

 

04. 리턴값 함수

return 키워드를 사용하여 값을 호출한 곳으로 반환할 수 있습니다. 이러한 함수를 리턴값을 가지는 함수라고 합니다.

함수 중단에 return값이 사용되기도 합니다.

{
    function 함수명(){
        변수선언;
        return 변수;
    }
    출력문;
}

{
    function func(){
        const str = "실행<br>";
        return str;
    }
    document.write(func());
}

 

화살표 함수

 {
    func = () => {
        const str = "실행되었습니다.<br>";
        return str;
    }
    document.write(func());
}

단일 명령문일 경우에는 return과 {}중괄호를 생략할 수 있습니다.