01. 선언적 함수

함수 선언문으로 정의한 함수로 코드 상에서 함수를 정의한 후, 이후에 언제든지 함수를 호출할 수 있습니다.

{

     function func(){
         document.write("실행되었습니다.");
    }
     func();
}
결과 확인하기
실행되었습니다.

02. 익명 함수

함수의 이름을 정의하지 않고 함수를 생성하는 방법으로 익명함수는 콜백함수로도 많이 사용됩니다.(콜백함수란, 다른 함수의 매개변수로 전달되어 실행되는 함수를 말합니다. 콜백 함수는 익명함수로 작성하여 다른 함수의 인자로 전달할 수 있습니다.)

{

     const func = function(){
         document.write("실행되었습니다.
");
     }
     func();
}
결과 확인하기
실행되었습니다.

03.매개변수 함수

함수의 매개변수로 전달되는 함수입니다.매개변수 함수는 주로 비동기 처리에 많이 사용됩니다. 비동기 처리란, 코드의 실행이 일시 중단되어 결과를 기다리지 않고 다음 코드를 실행하는 방식을 말합니다.

{

    function func(str){
        document.write(str);
    }
    func("실행되었습니다.
");
}
결과 확인하기
실행되었습니다.

04. 리턴값 함수

함수의 실행 결과를 반환하는 함수입니다. 함수는 매개변수를 입력받아 처리한 결과를 반환할 수 있습니다. 이때 반환된 결과값은 함수 외부에서 변수에 저장하거나 다른 함수의 인자로 전달할 수 있습니다.

{

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

06. 화살표 함수 : 익명 함수

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

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

07. 화살표 함수 : 매개변수 함수

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    const func = () => {
        document.write("실행되었습니다.");
    }
    fucn();
 }
결과 확인하기
실행되었습니다.

08. 화살표 함수 : 리턴값 함수

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    func=() => {
        const str =  "실행되었습니다.";
        return str;
    }
    document.write(func())
}
결과 확인하기

09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    const func = (str) => {
        return str;                         //모든함수 기본값으로 return들어가지만 생략하는 것
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기
실행되었습니다.

10.화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    const func = str => {                       //str괄호 생략가능
        return str;
    }
    document.write(func("실행되었습니다."));
}
결과 확인하기

11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    const func = str => str;                    
            
        document.write(func("실행되었습니다."));            //리액트에서 가장많이 사용
    }
결과 확인하기

12. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략

'=>' 왼쪽에는 매개변수가 위치하고, 오른쪽에는 함수 본문이 위치합니다.

{
    func = str => str;

        document.write(func("실행되었습니다."));
}
결과 확인하기

13. 함수 유형 : 함수와 매개변수를 이용한 형태

함수에 매개변수를 이용하여 실행문을 넣어줍니다.

{
    function func(num, str1, str2){
        document.write(num + "." + str1 + "가" + str2 + "되었습니다.
")
    }
    fucnn("1", "함수", "실행");
    fucnn("2", "자바스크립트", "실행");
    fucnn("3", "리액트", "실행");
}
결과 확인하기

14. 함수 유형 : 함수와 변수를 이용한 형태

변수를 여러개 만들어 실행해주는 형태입니다.

{
    function func(num, str1, str2){
        document.write(num + "." + str1 + "가" + str2 + "되었습니다.
")
    }
    const youNum1 = 1;
    const youNum2 = 2;
    const youNum3 = 3;
    const youStr1 = "함수";
    const youStr2 = "자바스크립트";
    const youStr3 = "리액트";
    const youCom1 = "실행";

    func(youNum1, youStr1, youCom1);
    func(youNum2, youStr2, youCom1);
    func(youNum3, youStr3, youCom1);
}
결과 확인하기

15. 함수 유형 : 함수와 배열을 이용한 형태

배열을 사용해 함수를 실행해 줍니다.

{
    function func(num, str1, str2){
        document.write(num + "." + str1 + "가" + str2 + "되었습니다.
")
    } 
    const num = [1,2,3]
    const info = ["함수", "자바스크립트", "리액트","실행"];

    func(num[0], info[0], info[3]);
    func(num[1], info[1], info[3]);
    func(nnm[2], info[2], info[3]);
}
결과 확인하기

16. 함수 유형 : 함수와 객체를 이용한 형태

객체를 이용해 함수를 실행해 줍니다.

{
    function func(num, str1, str2){
        document.write(num + "." + str1 + "가" + str2 + "되었습니다.
")
    }
    const info = {
        num1 : 1,
        name1 : "함수",
        num2 : 2,
        name2 : "자바스크립트",
        num3 : 3,
        name3 : "리액트",
        word : "실행"
    }
    func(info.num1, info.name1, info.word);
    func(info.num2, info.name2, info.word);
    func(info.num3, info.name3, info.word);
}
결과 확인하기

17. 함수 유형 : 함수와 배열, 객체를 이용한 형태

배열과 객체를 이용하여 함수를 실행해줍니다.

{
    function func(num, str1, str2){
        document.write(num + "." + str1 + "가" + str2 + "되었습니다.
");
    }
    const info = [
        {
            num: 1,
            name: "함수",
            wrod: "실행"
        }, {
            num: 2,
            name: "자바스크립트",
            wrod: "실행"
        }, {
            num: 3,
            name: "리액트",
            wrod: "실행"
        }
    ]
    func(info[0].num, info[0].name, info[0].wrod);        
    func(info[1].num, info[1].name, info[1].wrod);        
    func(info[2].num, info[2].name, info[2].wrod);
}
결과 확인하기

18. 함수 유형 : 객체안에 함수를 이용한 형태

객체안에 다수의 함수를 넣어 실행해줍니다.

{
    const info = {
        num1 : 1,
        name1 : "함수",
        num2 : 2,
        name2 : "자바스크립트",
        num3 : 3,
        name3 : "리액트",
        word : "실행",
        result1: function(){
            document.write(info.num1 + "." + info.name1 + "가" + info.word + "되었습니다.
");
        },
        result2: function(){
            document.write(info.num2 + "." + info.name2 + "가" + info.word + "되었습니다.
");
        },
        result3: function(){
            document.write(info.num3 + "." + info.name3 + "가" + info.word + "되었습니다.
");
        },
    }
    info.result1();
    info.result2();
    info.result3();
}
결과 확인하기

19. 함수 유형 : 객체 생성자 함수

객체 생성자 함수를 사용하여 함수를 실행합니다.

{
    function Func(num, name, word){
        this.num = num;
        this.name = name;
        this.word = word;
        
        this.result = function(){
            document.write(this.num + "." + this.name + "가" + this.word + "되었습니다.
")
        }
    }

    //인스턴스 생성
    const info1 = new Func("1", "함수", "실행");
    const info2 = new Func("2", "자바스크립트", "실행");
    const info3 = new Func("3", "리액트", "실행");

    info1.result();
    info2.result();
    info3.result();
}
결과 확인하기

20. 함수 유형 : 프로토타입 함수

프로토타입 함수를 사용하여 실행합니다.

{
    function func(num, name, word){
        this.num = num;
        this.name = name;
        this.word = word;
    }

    func.prototype.result = function(){
        document.write(this.num + "." + this.name + "가" + this.word + "되었습니다.
");
    }

    const info1 = new Func("1", "함수", "실행");
    const info2 = new Func("2", "자바스크립트", "실행");
    const info3 = new Func("3", "리액트", "실행");

    info1.result();
    info2.result();
    info3.result();
}
결과 확인하기

21. 함수 유형 : 객체리터럴 함수

프로토타입함수를 사용하여 함수를 블록 밖으로 빼내었을때 가독성을 위해 나와있는 함수를 객체형식으로 저장해주는 방식입니다.

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    func.prototype = {
        result1: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        },
        result2: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        },
        result3: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        }
    }
    //인스턴스
    const info1 = new func("101","함수","실행");
    const info2 = new func("201","자바스크립트","실행");
    const info3 = new func("301","리액트","실행");

    //실행문
    info1.result1();
    info2.result2();
    info3.result3();
}
결과 확인하기
101. 함수가 실행되었습니다.
201. 함수가 실행되었습니다.
301. 함수가 실행되었습니다.

22. 함수 유형 : 즉시 실행 함수

실행문없이 즉시 함수를 실행시키는 방법입니다.

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

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

        (() => {
            document.write("501.함수가 실행되었습니다.")
        })();
    }
}
결과 확인하기
500.함수가 실행되었습니다.
501.함수가 실행되었습니다.

23. 함수 유형 : 파라미터 함수

매개변수 함수를 이용할 때 함수 실행문에 결과값을 적어주는 것이 아니라 파라미터안에 직접 결과값을 적어주는 형태입니다. 

{
    function func(str = "600. 함수가 실행되었습니다."){
        document.write(str);
    }
    func();
}
결과 확인하기
600.함수가 실행되었습니다.

24. 함수 유형 : 아규먼트 함수

아규먼트 함수를 사용하면 매개변수를 자동으로 배열에 저장하여 사용할 수 있습니다.

{
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("함수실행1", "함수실행2");
}
결과 확인하기
함수실행1
함수실행2

25. 함수 유형 : 재귀함수

재귀함수(자기자신을 호출시키는 함수)를 이용해 실행하는 형태입니다. ex: 함수를 10번(다수) 실행시켜줘야할때/ 과부화가 많이 걸려서(무한에 빠짐) 많이 사용하지 x

{
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    }
    func(10);

    function animation(){
        document.write("애니메이션이 실행되었습니다.")

        requestAnimationFrame(animation);
    }
    animation();
}
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.

26. 함수 유형 : 콜백함수

함수안에 함수가 있어 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)합니다.

{
    // function func(){
    //     document.write("1.함수 실행")
    // }
    // function func(){
    //     document.write("2.함수 실행")
    // }
    // func1();
    // func2();

    function func(){
        document.write("2.함수실행")
    }
    function callback(str){
        document.write("1.함수실행")
        str();
    }
    callback(func);

    //
 }
결과 확인하기
1.함수실행
2.함수실행