Top
함수

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. 화살표 함수 : 선언적 함수

{
    func = ( ) => { //function을 생략하고 화살표로 표시
        document.write("함수가 실행되었습니다.");
    }
    func( );
}

결과보기

함수가 실행되었습니다.

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

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

결과보기

함수가 실행되었습니다.

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

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

결과보기

함수가 실행되었습니다.

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

{
    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. 내부함수

{
    function func(){
        function funcA(){
            document.write("함수가 실행되었습니다.");
        }
        funcA();
        function funcB(){
            document.write("함수가 실행되었습니다.");
        }
        funcB();
    }
    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("함수가 실행되었습니다.", "함수가 실행되었습니다.");
}

결과보기

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

17. 재귀함수

{
    // function func(){
        //     document.write("함수가 실행되었습니다.");
        //     func();
        // }
        // func();  이렇게되면 무한 반복 실행이 됩니다.

        function func(num){
            if(num <=1){
                document.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(){
        document.write("funcA가 실행되었습니다.");
    }
    function funcB(){
        document.write("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();
    })

}

결과보기

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

19. 객체 생성자 함수

{
    함수 유형 : 객체 안에 변수와 함수를 이용한 형태
    const info = {
        num1: 1,
        name1: "gwni",
        job1: "student",
        num2: 2,
        name2: "GWNI",
        job2: "developer",
        result1: function(){
            document.write(this.num1+ ". 내이름은 "+ this.name1 + "이며, 직업은" +this.job1+"입니다.")
        },
        result2: function(){
            document.write(this.num2+ ". 내이름은 "+ this.name2 + "이며, 직업은" +this.job2+"입니다.")
        }
    }
    info.result1();
    info.result2();

    //객체 생성자 함수

    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","gwni","student");
    const info2 = new func("2","GWNI","developer");
    info1.result();
    info2.result();

}

결과보기

1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.

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","gwni","student");
    const info2 = new func("2","GWNI","developer");
    info1.result();
    info2.result();
}

결과보기

1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.

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","gwni","student");
    const info2 = new func("2","GWNI","developer");
    info1.result1();
    info2.result2();
}

결과보기

1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.

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

{
    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","gwni","student");
        const info2 = new study("2","GWNI","developer");
        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","gwni","student");
        const info2 = new study2("2","GWNI","developer",100);
        info1.result();
        info2.result();
        info2.result2();
}

결과보기

1. 내이름은 gwni이며, 직업은student입니다.
2. 내이름은 GWNI이며, 직업은developer입니다.
2. 내이름은 GWNI이며, 직업은developer이며 나이는 100살입니다.