데이터 실행하기

  1. 선언적 함수
  2. 익명 함수
  3. 매개변수 함수
  4. 리턴값 함수
  5. 화살표 함수 : 선언적 함수
  6. 화살표 함수 : 익명 함수
  7. 화살표 함수 : 리턴값 함수
  8. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
  9. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
  10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
  11. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
  12. 내부 함수
  13. 즉시실행 함수
  14. 파라미터 함수
  15. 아규먼트 함수
  16. 재귀 함수
  17. 콜백 함수
  18. 콜백 함수 : 반복문
  19. 콜백 함수 : 동기/비동기
  20. 콜백 함수 : 콜백 지옥
  21. 함수 유형 : 함수와 매개변수를 이용한 형태
  22. 함수 유형 : 함수와 변수를 이용한 형태
  23. 함수 유형 : 함수와 배열을 이용한 형태
  24. 함수 유형 : 함수와 객체를 이용한 형태
  25. 함수 유형 : 함수와 객체(함수)를 이용한 형태
  26. 함수 유형 : 객체 생성자 함수
  27. 함수 유형 : 프로토타입 함수
  28. 함수 유형 : 객체 리터럴 함수
  29. 함수 유형 : 클래스
  30. 함수 유형 : 클래스 상속
  1. setInterval()
  2. clearInterval()
  3. setTimeout()
  4. clearTimeout()

01. 선언적 함수

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

결과보기

02. 익명 함수

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

결과보기

03. 매개변수 함수

{
    function func(str){
        document.write("*** 03. 매개변수 함수 ***");
        document.write(str);
    }
    func("함수가 실행되었습니다.");
    
    function func1(str1, str2) {
        document.write(str1, str2);
    }
    func1("함수가", "실행되었습니다.");
}

결과보기

04. 리턴값 함수 

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

    document.write("*** 04. 리턴값 함수 ***");
    document.write(func());
}

결과보기

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

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

    func = () => {
        document.write("*** 05. 화살표 함수 : 선언적 함수 ***");
        document.write("함수가 실행되었습니다.");
    }

    func();
}

결과보기

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

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

    // func();

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

    func();
}

결과보기

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

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

    // document.write("*** 07. 화살표 함수 : 리턴값 함수 ***");
    // document.write(func()");

    //const str = "함수가 실행되었습니다.";   //전역 변수

    func = () => {
        const str = "함수가 실행되었습니다.";   //지역 변수
        return str;
    }

    document.write("*** 07. 화살표 함수 : 리턴값 함수 ***");
    document.write(func()");
}

결과보기

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

{
    const func = (str) => {
        return str;
    }

    document.write("*** 08. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 ***");
    document.write(func("함수가 실행되었습니다."));
}

결과보기

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

{
    document.write("*** 09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 ***");

    const func = str => {
        return str;
    }

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

결과보기

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

{
    document.write("*** 10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 매개변수 괄호 생략 + 리턴값 생략 ***");

    const func = str => str;

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

결과보기

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

{
    document.write("***  11. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략 ***");

    func = str => str; 

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

결과보기

12. 내부 함수

{
    document.write("*** 12. 내부 함수 ***");

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

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

결과보기

13. 즉시실행 함수

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

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

결과보기

14. 파라미터 함수

{
    document.write("*** 14. 파라미터 함수 ***");

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

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

결과보기

15. 아큐먼트 함수

{
    document.write("*** 15. 아규먼트 함수 ***");

    function func(strA, strB){
        // document.write(strA)
        // document.write(strB)
        document.write(arguments[0])
        document.write(arguments[1])
    }
    func("함수A가 실행되었습니다.", "함수B가 실행되었습니다."); 
}

결과보기

16. 재귀 함수

{
    document.write("*** 16. 재귀 함수 ***");

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

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

결과보기

17. 콜백 함수

{
    document.write("*** 17. 콜백 함수 ***");

    function funA(){
        document.write("함수A가 실행되었습니다.");
    }
    function funB(str){
        document.write("함수B가 실행되었습니다.");
        str(); //funA();
    }
    funB(funA);
}

결과보기

18. 콜백 함수 : 반복문

{
    document.write("*** 18. 콜백 함수 : 반복문 ***");

    function func(){
        document.write("함수가 실행되었습니다.");
    }
    function callback(str){
        for(let i = 1; i<=5; i++){
            str();
        }
    }
    callback(func);
}

결과보기

19. 콜백 함수 : 동기/비동기

{
    //01
    document.write("*** 19. 콜백 함수 : 동기/비동기 ***");
    
    function funA(){
        console.log("funA가 실행되었습니다.");
    }
    function funB(){
        console.log("funB가 실행되었습니다.");
    }
    funB();
    funA();

    //02
    // function funC(){
    //     setTimeout(function(){
    //         console.log("funC가 실행되었습니다.");
    //     },1000);
    // }
    function funC(){
        setTimeout(()= > {
            console.log("funC가 실행되었습니다.");
        },1000);
    }
    function funD(){
        console.log("funD가 실행되었습니다.");
    }
    funC();
    funD();

    //03
    function funE(callback){
        setTimeout(() = > {
            console.log("funE가 실행되었습니다.");
            callback();
        }, 1000);
    }
    function funF(){
        console.log("funF가 실행되었습니다.");
    }
    funE(funF);
}

결과보기

20. 콜백 함수 :콜백 지옥 

{
    
}

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

{
    document.write("*** 21. 함수 유형 : 함수와 매개변수를 이용한 형태 ***");

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

    func("1", "윤여찬", "웹 퍼블리셔");
    func("2", "윤여찬", "프론트엔드 개발자");    
}

결과보기

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

{
    document.write("*** 22. 함수 유형 : 함수와 변수를 이용한 형태 ***");

    function func(num, name, job) {
        document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + "입니다.");
    }
    const youNum1 = "1";
    const youName1 = "윤여찬";
    const youJob1 = "웹 퍼블리셔";
    const youNum2 = "2";
    const youName2 = "윤여찬";
    const youJob2 = "프론트엔드 개발자";

    func(youNum1, youName1, youJob1);
    func(youNum2, youName2, youJob2);
}

결과보기

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

{
    document.write("*** 23. 함수 유형 : 함수와 배열을 이용한 형태 ***");

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

    const info = [{
            num1: 1,
            name1: "윤여찬",
            job1: "웹 퍼블리셔"
        },
        {
            num2: 2,
            name2: "윤여찬",
            job2: "프론트엔드 개발자"
        }
    ]

    func(info[0].num1, info[0].name1, info[0].job1);
    func(info[1].num2, info[1].name2, info[1].job2);
}

결과보기

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

{
    document.write("*** 24. 함수 유형 : 함수와 객체를 이용한 형태 ***");

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

    const info = {
        num1: 1,
        name1: "윤여찬1",
        job1: "웹 퍼블리셔",
        num2: 2,
        name2: "윤여찬2",
        job2: "프론트엔드 개발자"
    }

    func(info.num1, info.name1, info.job1);
    func(info.num2, info.name2, info.job2);
}

결과보기

25. 함수 유형 : 함수와 객체(함수)를 이용한 형태

{
    document.write("*** 25. 함수 유형 : 함수와 객체(함수)를 이용한 형태 ***");

    const info = {
        num1: 1,
        name1: "윤여찬1",
        job1: "웹 퍼블리셔",
        num2: 2,
        name2: "윤여찬2",
        job2: "프론트엔드 개발자",

        result1: function () {
            document.write(info.num1 + ". 내 이름은 " + info.name1 + "이며, 직업은 " + info.job1 + "입니다.");
        },
        result2: function () {
            document.write(info.num2 + ". 내 이름은 " + info.name2 + "이며, 직업은 " + info.job2 + "입니다.");
        }
    }

    info.result1();
    info.result2();
}

결과보기

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

{
    document.write("*** 26. 함수 유형 : 객체 생성자 함수 ***");

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

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

    const info1 = new func("1", "윤여찬", "웹퍼블리셔"); //인스턴스 생성
    const info2 = new func("2", "윤여찬", "프론트엔드 개발자"); //인스턴스 생성

    info1.result();
    info2.result();
}

결과보기

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

{
    document.write("*** 27. 함수 유형 : 프로토타입 함수 ***");

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

    const info1 = new func("1", "윤여찬", "웹퍼블리셔"); //인스턴스 생성
    const info2 = new func("2", "윤여찬", "프론트엔드 개발자"); //인스턴스 생성

    info1.result();
    info2.result();    
}

결과보기

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

{
    document.write("*** 28. 함수 유형 : 객체 리터럴 함수 ***");

    function func(num, name, job) {
        this.num = num;
        this.name = name;
        this.job = job;
    }
    func.prototype = {
        result1 :function(){
            document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");                  
        },
        result2 :function(){
            document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.");                  
        }

    const info1 = new func("1", "윤여찬1", "웹퍼블리셔"); //인스턴스 생성
        const info2 = new func("2", "윤여찬2", "프론트엔드 개발자"); //인스턴스 생성

        info1.result1();
        info2.result2();
}

결과보기

29. 함수 유형 : 클래스

{
    document.write("*** 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();
}

결과보기

30. 함수 유형 : 클래스 상속

{

}