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

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

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

결과보기

함수가 실행되었습니다.

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

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

    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 funA(){
            document.write("함수가 실행되었습니다.")
        }
        funA();
        function funB(){
            document.write("함수가 실행되었습니다.")
        }
        funB();
    }
    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(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    }
    func(5);
             
}

결과보기

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

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

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

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

결과보기

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

19. 콜백 함수 : 반복문

{
    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가 실행되었습니다.");
        document.write("
");
    }
    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가 실행되었습니다.
D
C
E
F

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

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

결과보기

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

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

{
    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);
    document.write("
");
    
    func(youNum2, youName2, youJob2);
    document.write("
");
}

결과보기

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

함수 유형 : 함수와 배열, 객체를 이용한 형태

{
    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);
    document.write("
");
    func(info[1].num, info[1].name, info[1].job);
    document.write("
");
}

결과보기

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

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

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

결과보기

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

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

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

결과보기

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

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

{
    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. 내 이름은 웹스토리보이이며, 직업은 프론트앤드개발자입니다.

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

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

결과보기

리터럴함수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();
}

결과보기

1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 박지선이며, 직업은 웹 개발자입니다.

클래스 상속

{
    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", "박지선", "웹 개발자", 25);

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

결과보기

1. 내 이름은 웹쓰이며, 직업은 웹 퍼블리셔입니다.
2. 내 이름은 박지선이며, 직업은 웹 개발자입니다.
2. 내 이름은 박지선이며, 직업은 웹 개발자이며 나이는25살 입니다.