function(함수)

함수

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다.
함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.

---

선언적 함수

선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 됩니다.
함수이름()

function 함수이름() {
    실행문;
}

    function func() {
        document.write("함수가 실행되었습니다.");
    }
    func();

결과 확인하기

---

익명 함수

익명함수는 말그대로 이름이 없는 함수입니다.
따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 합니다.

const 변수이름 function() {
    실행문;
}
변수이름()

    const func = function() {
        document.write("함수가 실행되었습니다.");
    }
    func();

결과 확인하기

매개변수 함수

함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다.
또한, 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.

function 함수이름(매개변수) {
    실행문;
}
함수이름(매개변수);

    function func(str) { //변수, 배열, 객체도 가능
        document.write(str);
    }
    func("함수가 실행되었습니다."); //변수, 배열, 객체도 가능

결과 확인하기

리턴값 함수

리턴값이란 함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 말합니다.

function 함수이름() {
    실행문;
    return 돌려줄값;
}
함수이름();

    function func() {
        const str = "함수가 실행되었습니다."
        return str;
    }
    document.write(func());

결과 확인하기

화살표 함수

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다.
하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
new.target키워드가 없습니다.
일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
생성자(Constructor)로 사용할 수 없습니다.
yield를 화살표 함수 내부에서 사용할 수 없습니다.

함수이름 = () => { document.write("함수가 실행되었습니다."); }
함수이름();

    // 선언적 함수
    // function func() {
    //     document.write("함수가 실행되었습니다.");
    // }

    // 화살표함수
    // func = () => { document.write("함수가 실행되었습니다."); }

    // 화살표함수(중괄호 생략)
    func = () => document.write("함수가 실행되었습니다.");
    func();

결과 확인하기

화살표 함수 (익명 함수)

화살표 함수는 익명 함수로 사용할 수 있습니다.

함수이름 = () => { document.write("함수가 실행되었습니다."); }
함수이름();

    // 익명 함수
    // const func = function() {
    //     document.write("함수가 실행되었습니다.");
    // }

    // 화살표 익명함수
    // const func = () => { document.write("함수가 실행되었습니다."); }

    // 화살표 익명함수(중괄호 생략)
    const func = () => document.write("함수가 실행되었습니다.");
    func();
    func();

결과 확인하기

화살표 함수 (매개변수 함수)

화살표 함수는 매개변수 함수로 사용할 수 있습니다.

함수이름 = (매개변수) => { document.write(매개변수);
함수이름();

    let result = "함수가 실행되었습니다"
    // 화살표 매개변수 함수
    // func = (str) => { document.write(str); } 

    // 화살표 매개변수 함수(중괄호 생략)
    // func = (str) => document.write(str);

    // 화살표 매개변수 함수(매개변수 괄호 생략)
    // func = str => document.write(str);

    // 익명 화살표 매개변수 함수
    // const func = (str) => { document.write(str); }

    // 익명 화살표 매개변수 함수(중괄호 생략)
    // const func = (str) => document.write(str);

    // 익명 화살표 매개변수 함수(매개변수 괄호 생략)
    const func = str => document.write(str); // 매개변수가 두개 이상이면 생략안됨.
    func(result);

결과 확인하기

화살표 함수 (리턴값 함수)

화살표 함수는 리턴값 함수로 사용할 수 있습니다.

함수이름 = () => { // 실행문이 두줄이상이 되면 중괄호를 써야한다.
let str = "함수가 실행되었습니다."; return str; }; 함수이름();

    // 화살표 리턴값 함수
    // func = () => { 
    //    let str = "함수가 실행되었습니다."; 
    //    return str; 
    // }

    // 익명 화살표 리턴값 함수
    const func = () => {  // 실행문이 두줄이상이 되면 중괄호를 써야한다.
        let str = "함수가 실행되었습니다.";
        return str;
    };  
    document.write(func());

결과 확인하기

함수 응용

위에서 배운 아래와같이 함수방식들 응용할수있습니다.

    //화살표 함수 : 익명 함수 + 매개변수 + 리턴값
    // const func = (str) => { 
    //     return str;
    // }
    // document.write(func("함수가 실행되었습니다.")); // 변수를 대신 직접 넣어도 된다.
    
    //화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
    // const func = str => { 
    //     return str; 
    // }
    // document.write(func("함수가 실행되었습니다."));
    
    //화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 리턴 생략
    // const func = str => str ;
    // document.write(func("함수가 실행되었습니다."));

    //화살표 함수 :선언적 함수 + 매개변수 + 리턴값 + 리턴 생략
    func = str => str;
    document.write(func("함수가 실행되었습니다."));

결과 확인하기