Top
함수

01. 선언적 함수

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

결과보기

02. 익명 함수

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

결과보기

03. 매개변수 함수

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

결과보기

04. 리턴값 함수

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

결과보기

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

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

결과보기

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

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

결과보기

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

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

결과보기

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

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

결과보기

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

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

결과보기

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

{
    const func = str => { // a매개변수가 한개면 괄호 생략가능
        return str;
    }
    document.write(func("함수가 실행되었습니다.10"));
}

결과보기

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

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

결과보기

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

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

결과보기

13. 내부 함수

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

결과보기

14. 즉시 실행 함수

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

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

결과보기

15. 파라미터 함수

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

결과보기

16. 아규먼트 함수

{
    function func(a, b){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("0. 함수가 실행되었습니다.
", "1. 함수가 실행되었습니다.");
}

결과보기

17. 재귀함수 : 자기 자신을 다시 호출하는 함수

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

결과보기

18. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수

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

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

결과보기

19. 콜백 함수 : 반복문

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

    function callback(num){//인자,파라미터
        for(let i=1; i<=5; i++){
            num(i);
        }
    }
    callback(func);//인수
}

결과보기

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

{
    function funcA(){
        document.write("funcA가 실행되었습니다.");
    }
    function funcB(){
        document.write("funcB가 실행되었습니다.");
        document.write("<br>");
    }
    funcA();
    funcB();

    // function funcC(){
    //     setTimeout(()=>{
    //         console.log("C");
    //     },1000)
    // }
    // function funcD(){
    //     console.log("D");
    // }
    // funcC();
    // funcD();

    function funcE(callback){
        setTimeout(()=>{
            document.write("E");
            callback();
        },1000);
    }
    function funcF(){
        document.write("F");
    }
    funcE(function(){
        funcF();
    });
}

결과보기

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

{
    function func(num, name, job){
        document.write(num + ". 내 이름은 " + name + "이며, 직업은 " + job + "입니다.");
    }
    func("1", "웹쓰", "웹 퍼블리셔");
    func("2", "웹스토리보이", "프론트앤드개발자");
}

결과보기

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. 함수 유형 : 함수와 배열, 객체를 이용한 형태

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

    const info = [
        {
            num : "1",
            name : "웹쓰",
            job : "웹퍼블리셔"
        },{
            num : "2",
            name : "웹스토리보이",
            job : "프론트앤드개발자"
        }
    ]

    func(info[0].num, info[0].name, info[0].job);
    func(info[1].num, info[1].name, info[1].job);
}

결과보기

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

{
    const info = {
        num1 : 1,
        name1 : "웹쓰",
        job1 : "웹퍼블리셔",
        num2 : 2,
        name2 : "웹스토리보이",
        job2 : "프론트앤드개발자",

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

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

결과보기

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

{
    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();
}

결과보기

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

{
    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();
}

결과보기

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

{
    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", "웹쓰", "웹퍼블리셔");
    const info2 = new func("2", "웹스토리보이", "프론트앤드개발자");

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

결과보기

28. 클래스 : 함수의 집합체

{
    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();
}

결과보기

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 + "입니다.");
        }
    }

    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", "웹스토리보이", "프론트앤드개발자", 100);

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

결과보기