자바스크립트

01. 선언적 함수
02. 익명 함수
03. 매개변수 함수
04. 리턴값 함수
05. 화살표 함수 : 선언적 함수
06. 화살표 함수 : 익명 함수
07. 화살표 함수 : 매개변수 함수
08. 화살표 함수 : 리턴값 함수
09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값
10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략
11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
12. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
13. 내부 함수
14. 즉시 실행 함수
15. 파라미터 함수
16. 아규먼트 함수
17. 재귀 함수
18. 콜백 함수
19. 객체생성자 함수
20. 프로토타입 함수
21. 객체 리터럴 함수
22. 클래스 함수

함수

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

결과보기

함수가 실행되었습니다.

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

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

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

결과보기

함수가 실행되었습니다.

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

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

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

결과보기

함수가 실행되었습니다.

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

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

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

결과보기

함수가 실행되었습니다.

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

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

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

결과보기

함수가 실행되었습니다.

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

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

결과보기

함수가 실행되었습니다.

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

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

결과보기

함수가 실행되었습니다.

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

{
    const func = str => str;

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

결과보기

함수가 실행되었습니다.

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

{
    func = str => str;

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

결과보기

함수가 실행되었습니다.

13. 내부 함수

{
    func = str => str;

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

결과보기

함수가 실행되었습니다.

14. 즉시 실행 함수

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

    (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("함수가 실행되었습니다.", "함수가 실행되었습니다.")
}

결과보기

함수가 실행되었습니다.

17. 재귀 함수

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

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

결과보기

함수가 실행되었습니다.

18. 콜백 함수

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

    // 콜백 함수 : 반복문
    function func() {
        document.write("함수가 실행되었습니다.");
    }

    function callback(num){
        for(let i=1; i<=5; i++){
            num(i);
        }
    }
    callback(func);

    // 콜백 함수 : 동기/비동기
        function funcA(){
            console.log("funcA가 실행되었습니다.");
        }
        function funcB(){
            console.log("funcB가 실행되었습니다.");
        }
        funcA();
        funcB();

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

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

결과보기

함수가 실행되었습니다.1
함수가 실행되었습니다.2

함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.

funcA가 실행되었습니다.
funcB가 실행되었습니다.
D
C
E
F

19. 객체 생성자 함수

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

결과보기

1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.

20. 프로토타입 함수

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

결과보기

1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.

21. 객체 리터럴 함수

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

결과보기

1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.

21. 클래스 함수

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


    // 클래스 상속
    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();
}

결과보기

1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.

1.내이름은웹쓰이며, 직업은웹퍼블리셔입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자입니다.
2.내이름은웹스토리보이이며, 직업은포론트엔드개발자이며 나이는100살 입니다.