01. 선언적 함수

가장 기본적인 함수이다. 

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

02. 익명 함수

익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있게 만듭니다. 

    // // 데이터 타입(자료형) ----> 타입스크립트
    // const x = 100
    // const x1 = "100"
    // const x2 = [] //배열
    // const x3 = {} //객체
    // const x4 = null, undefined
    // const x5 = function(){}
    // const x6 = true, false

    const func = function(){
        document.write("함수가 실행되었습니다.2")
    }
    func()
결과보기
함수가 실행되었습니다.2

03. 매개변수 함수

함수를 통해 처리된 결과를 봔환시켜 실행하는 함수이다. 

   function func(str){           //str은 변수, 인자. 
        document.write(str);
    }
    func("함수가 실행되었습니다.3");
결과보기
함수가 실행되었습니다.3

04. 리턴값 함수

함수를 통해 처리된 결과를 봔환시켜 실행하는 함수이다. 

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

05. 화살표 함수 : 선언적 함수

'=>'을 이용하여 선언적 함수를 간결하게 표현하였다. 

   //첫번째 생략
    func = () => {
            document.write("함수가 실행되었습니다.5_2");
    }
    func();

    //두번째 생략(괄호 생략)
    func = () => document.write("함수가 실행되었습니다.5_3");
    
    func();
결과보기
함수가 실행되었습니다.5_2
함수가 실행되었습니다.5_3

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

'=>'을 이용하여 익명 함수를 간결하게 표현하였다. 

    //첫번째 생략
    const func = () => {
            document.write("함수를 실행되었습니다.6_2");
    } 
    func()
    
    //두번째 생략(괄호 생략)
    const func = () => document.write("함수를 실행되었습니다.6_3");
        
    func()
결과보기
함수가 실행되었습니다.6_2
함수가 실행되었습니다.6_3

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

'=>'을 이용하여 매개변수 함수를 간결하게 표현하였다. 

    //첫번째 생략
    func = (str) => {
            document.write(str);
    }
    func("함수가 실행되었습니다.7_2>");

    //두번째 생략(괄호생략01)
    func = (str) => document.write(str);
    
    func("함수가 실행되었습니다.7_3");

    //두번째 생략(괄호생략02)
    func = str => document.write(str);

    func("함수가 실행되었습니다.7_4");
결과보기
함수가 실행되었습니다.7_2
함수가 실행되었습니다.7_3
함수가 실행되었습니다.7_4

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

'=>'을 이용하여 리턴값 함수를 간결하게 표현하였다. 

    func = () => {
            const str = "함수가 실행되었습니다.8_2";
            return str;
    }
    document.write(func());
결과보기
함수가 실행되었습니다.8_2

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

여러 함수를 화살표 함수로 합치며 생략한다. 

   const func = (str) => {
            return str;
    }
    document.write(func("함수가 실행되었습니다.09"))
결과보기
함수가 실행되었습니다.09

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

여러 함수를 화살표 함수로 합치며 생략하고, 괄호까지 생략한다. 

    const func = str => {
            return str;
    }
    document.write(func("함수가 실행되었습니다.10"));
결과보기
함수가 실행되었습니다.10

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

여러 함수를 화살표 함수로 합치며 괄호와 리턴을 생략한다. 

    const func = str => str;
            
    document.write(func("함수가 실행되었습니다.11 "));
결과보기
함수가 실행되었습니다.11

12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략

여러 함수를 화살표 함수로 합치며 괄호와 리턴을 생략한다. 

    func = str => str;
            
    document.write(func("함수가 실행되었습니다.12 
"));
결과보기
함수가 실행되었습니다.12

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

    function func(num, str1, str2){
            document.write(num + ". " + str1 + "가" + str2 +"되었습니다.
")
    }

    func("1","함수","실행"); 
    func("2","자바스크립트","실행")
    func("3","제이쿼리","실행") //3개의 문장이 다 나온다. 함수를 재활용 하였기 때문.
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
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);
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

   function func(num, str1, str2){
        document.write(num + ". " + str1 + "가" + str2 +"되었습니다.
")
    }

    const info = [
        {
            num : "1",
            name : "함수",
            com : "실행"
        },
        {
            num : "2", 
            name : "자바스크립트",
            com : "실행"
        },
        {
            num : "3",
            name : "제이쿼리",
            com : "실행"
        }
    ]
    
    func(info[0].num,info[0].name,info[0].com);
    func(info[1].num,info[1].name,info[1].com);
    func(info[2].num,info[2].name,info[2].com);
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

    const info = {
        num1 : 1,
        name1 : "함수",
        word1 : "실행",
        num2 : 2,
        name2 : "자바스크립트",
        word2 : "실행",
        num3 : 3,
        name3 : "제이쿼리",
        word3 : "실행",

        result1 : function(){
            document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.
" )
        },
        result2 : function(){
            document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.
" )
        },
        result3 : function(){
            document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.
" )
        }
    }
    
    info.result1();
    info.result2();
    info.result3();
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

    function func(num,name,word){
        this.num = num;
        this.name = name;
        this.word = word; //재활용이 가능한 this

        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","제이쿼리","실행");

    // func("1","함수","실행");
    // func("2","자바스크립트","실행");
    // func("3","제이쿼리","실행");

    //실행
    info1.result();
    info2.result();
    info3.result();
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

    function func(num,name,word){
        this.num = num;
        this.name = name;
        this.word = word; //재활용이 가능한 this

    }

    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();
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

    function func(num,name,word){
        this.num = num;
        this.name = name;
        this.word = word; //재활용이 가능한 this
    
    }

    func.prototype = {
        result1 : function(){
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.
" );
        },
        result2 : function(){
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.
" );
        },
        result3 : 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.result1();
    info2.result2();
    info3.result3();
결과보기
1. 함수가실행되었습니다.
2. 자바스크립트가실행되었습니다.
3. 제이쿼리가실행되었습니다.

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

function에서 실행문을 지우며 화살표 함수를 사용해 정리하는 것 입니다. 

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

    (() => {
        document.write("실행")
    })();
결과보기
실행

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

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

    function func(str = "실행"){
        document.write(str)
    }
    func(str);
결과보기
실행
실행

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

   function func(a, b){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("실행","실행2");
결과보기
실행
실행2

23. 재귀 함수 : 자기 자신을 호출

재귀함수 : 동시에 여러개 실행 

    // 반복적으로
    function func(num){
        if(num <= 1){
            document.write("함수가 실행됩니다." + num)
        }else {
            document.write("함수가 실행됩니다." + num)
            func(num -1)
        }
        // func()
    }
    func(10)


    // 애니메이션
    function animation(){
        document.write("함수가 실행됩니다.")
    
        requestAnimationFrame(animation);
        // func()
    }
    animation()
결과보기
함수가 실행됩니다. 10
함수가 실행됩니다. 9
.
.
.
함수가 실행됩니다. 1

24. 콜백 함수 : 다른 함수에 인수가 넘겨지는 함수

콜백함수 : 첫번째 함수가 실행 -> 두번째 함수가 실행 

    function func(){
        document.write("함수가 실행됩니다. 2");
    }
    function callback(str){
        document.write("함수가 실행됩니다. 1");
        str();
    }
    callback(func);
결과보기
함수가 실행됩니다. 1
함수가 실행됩니다. 2

25. 콜백 함수 : 반복문

콜백함수 : 반복문을 사용해 콜백 함수 출력하기 

    function func(index){
        document.write("함수가 실행됩니다." + index);
    }
    function callback(num){
        for(let i = 1; i <=10; i++){
            num(i);
        }
    }
    callback(func);
결과보기
함수가 실행됩니다.1
함수가 실행됩니다.2
함수가 실행됩니다.3
.
.
.
함수가 실행됩니다.10

26. 콜백 함수 : 동기 / 바동기

    //1번째
    function funcA(){
        document.write("funcA가 실행되었습니다.")
    }
    function funcB(){
        document.write("funcB가 실행되었습니다.")
    }
    funcA();
    funcB();

    //02번째
    function funcA(){
       setTimeout( () => {
            console.log("funcA가 실행되었습니다.")
       }, 1000);
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.")
    }
    funcA();
    funcB();
    // b
    // a

    //03번째
    function funcA(callback){
       setTimeout( () => {
            console.log("funcA가 실행되었습니다.") //로딩소스
            callback();
       }, 1000);
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.")
    }

    funcA(function(){
        funcB();
    })
    //a
    //b

    function funcA(callback){
        setTimeout( () => {
             console.log("funcA가 실행되었습니다. 
") //로딩소스
             callback();
        }, 1000);
     }
     function funcB(callback){
        setTimeout( () => {
             console.log("funcB가 실행되었습니다. 
") //로딩소스
             callback();
        }, 1000);
     }
     function funcC(callback){
        setTimeout( () => {
             console.log("funcC가 실행되었습니다. 
") //로딩소스
             callback();
        }, 1000);
     }
     function funcD(){
        setTimeout( () => {
             console.log("funcD가 실행되었습니다. 
") //로딩소스
        }, 1000);
     }

     funcA(function(){
         funcB(function(){
             funcC(function(){
                 funcD();
             })
         });
     })
     //a
     //b
     //c
     //d
결과보기
b
a

a
b

a
b
c
d

27. promise 함수
결과보기

28. 내부 함수 : 스코프 , 클로져 

    function func(){
        function funcA(){
            document.write("함수가 실행 되었습니다.");
        }
        funcA();
        function funcB(){
            document.write("함수가 실행 되었습니다.");
        }
        funcB();
    }
    func();
결과보기
함수가 실행 되었습니다.
함수가 실행 되었습니다.

29. 클래스 

    class study {
        constructor(num, name, job){
            this.num = num;
            this.name = name;
            this.job = job;
        }

        result(){
            document.write(this.num +  ". 내 이름은 " + this.name +  " 이며, 직업은 " + this.job +  " 입니다." );
        }
    }

    const info1 = new study("1","마뇽","백수");
    const info2 = new study("2","냠냠이","고양이");
    
    info1.result();
    info2.result();
결과보기
1. 내 이름은 마뇽 이며, 직업은 백수 입니다.
2. 내 이름은 냠냠이 이며, 직업은 고양이 입니다.

30. 클래스 상속 

    class study {
        constructor(num, name, job){
            this.num = num;
            this.name = name;
            this.job = job;
        }

        result(){
            document.write(this.num +  ". 내 이름은 " + this.name +  " 이며, 직업은 " + this.job +  " 입니다." );
        }
    }
     class study2 extends study{
        constructor(num, name, job,age){
           super(num, name, job);
           this.age = age;
        }
        result2(){
            document.write(this.num +  ". 내 이름은 " + this.name +  " 이며, 직업은 " + this.job +  " 이며 나이는 " + this.age + "살 입니다.");
        }
    }

    const info1 = new study("1","마뇽","백수");
    const info2 = new study2("2","냠냠이","고양이",587);

    info1.result();
    info2.result();
    info2.result2();
결과보기
1. 내 이름은 마뇽 이며, 직업은 백수 입니다.
2. 내 이름은 냠냠이 이며, 직업은 고양이 입니다.
2. 내 이름은 냠냠이 이며, 직업은 고양이 이며 나이는 587살 입니다.
Top