Top

01. 선언적 함수

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

02. 익명 함수

배열을 사용

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

03. 매개 변수 함수

변수의 한 종류인 함수, 선언 생략 가능

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

04. 리턴값 함수

실행값 대신 결과값으로 출력

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

05. 화살표 함수 (선언적 함수)

선언적 함수 축약형 func 약식으로 씀 

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

06. 화살표 함수 (익명 함수)

익명 함수 축약형 func 약식으로 씀 

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

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

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

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

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

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

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

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

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

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

    const func = (str) => str; //const 입력

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

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

    func = (str) => str; //const 삭제

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

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

    function func(num, str1, str2) {
    document.write(num + ". " + str1 + str2);
    }
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("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.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. 제이쿼리실행

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

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

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

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

    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 func() {
        document.write("함수 실행")
    }());

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

21. 파라미터 함수

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

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

22. 아규먼트 함수

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

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

동시에 여러개 실행 

    function func(num) {
        if(num <= 1) {
            document.write("함수 실행" + num);
        } else {
            document.write("함수 실행" + num);
            func(num-1)
        }
    }
    func(10);

    // 애니메이션 표현
    function animation() {
        document.write("함수 실행")

        requestAnimationFrame(animation);
    }
    animation();
결과보기
함수 실행10함수 실행9함수 실행8함수 실행7함수 실행6함수 실행5함수 실행4함수 실행3함수 실행2함수 실행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함수 실행4함수 실행5함수 실행6함수 실행7함수 실행8함수 실행9함수 실행10

26. 콜백 함수 : 동기 / 비동기
결과보기

27. promise 함수
결과보기

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

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

        function funcB() {
            document.write("함수 실행");
        };
        funcB();
    }
    func();
결과보기
함수 실행함수 실행

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", "k", "a")
    const info2 = new study2("2", "k", "b", 100)

    info1.result();
    info2.result();
    info2.result2();
결과보기
1.내이름은k이며, 직업은a입니다.
2.내이름은k이며, 직업은b입니다.
2.내이름은k이며, 직업은b이며100살입니다.