Top

01. 선언적 함수

선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말한다. 즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 된다. 

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

02. 익명 함수

익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식이다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입한다. 익명 함수는 호출 시 변수명을 함수명처럼 사용하면 된다. 

// 변수안에 함수가 들어있어서 이름이 없다.
const func = function(){
    document.write("함수가 실행되었습니다.2");
}
func();
결과보기
함수가 실행되었습니다.2

03. 매개변수 함수

함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다. 

// str은 parameter, 매개변수를 이용한 함수
// 매개변수 함수에서 변수선언은 생략가능
// 변수 : 지역변수 + 전역변수 + 매개변수
// 함수 : 지역함수 + 전역함수
function func(str){
    document.write(str);
}
func("함수가 실행되었습니다.3");
결과보기
함수가 실행되었습니다.3

04. 리턴값 함수

리턴값이란 함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 말합니다. return을 사용합니다. 

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

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

선언적 함수를 화살표 함수로 바꾼작업입니다. 주석표시를 아래식처럼 생략해서 작성할수도 있습니다. 

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

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

func();
결과보기
함수가 실행되었습니다.5

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

익명 함수를 화살표 함수로 바꾼작업입니다. 주석표시를 아래식처럼 생략해서 작성할수도 있습니다. 

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

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

func();
결과보기
함수가 실행되었습니다.6

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

매개변수 함수를 화살표 함수로 바꾼작업입니다. 주석표시를 아래식처럼 생략해서 작성할수도 있습니다. 

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

// func = (str) => document.write(str);

func = str => document.write(str);

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

08. 선언적 함수

리턴값 함수를 화살표 함수로 바꾼작업입니다. 주석표시를 아래식처럼 생략해서 작성할수도 있습니다. 

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

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

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

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

화살표함수(익명함수로) 틀을짠뒤 리턴값(결과)을 넣고, 매개변수 출력 

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

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

화살표함수(익명함수로) 틀을짠뒤 리턴값(결과)을 넣고, 매개변수 출력한다. 변수가 하나이므로 괄호 생략 

// 09번과 구조는 똑같지만 변수가 하나일때는 괄호가 생략이 가능하다.
const func = str => {
    return str;
}
document.write(func("함수가 실행되었습니다.10
"));
결과보기
함수가 실행되었습니다.10

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

10번과 같은구조이고 리턴도 생략이 가능하다. 

// 10번과 구조는 똑같지만 리턴을 생략해서 한줄이되어 위로 올라간다.
const func = str => str;

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

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

11번과 같은구조이고 익명함수를 선언적함수로 바꿀수도 있다. 

// 11번과 구조는 똑같고, 익명함수를 선언적함수로 바꿔서 const 생략 가능
func = str => str;

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.제이쿼리가 실행되었습니다.
결과보기
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. 함수 유형 : 객체 생성자 함수

this를 사용해서 공통분모들을 최대한 줄였습니다.

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. 함수 유형 : 프로토타입 함수

함수가 복잡해짐을 방지하기위해 prototype을 집어넣었습니다.

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 ...
함수가 실행되었습니다.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 ...
함수가 실행되었습니다.10

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

// function funcA(){
//     document.write("funcA가 실행되었습니다.");
// }
// function funcB(){
//     document.write("funcB가 실행되었습니다.");
// }
// funcA();
// funcB();
// a -> b

// function funcA(){
//     setTimeout(() => {
//         console.log("funcA가 실행되었습니다.");
//     },3000);
// }
// function funcB(){
//     console.log("funcB가 실행되었습니다.");
// }
// funcA();
// funcB();
// b -> a

// function funcA(callback){
//     setTimeout(() => {
//         console.log("funcA가 실행되었습니다.");
//         callback();   
//     }, 1000);
// }
// function funcB(){
//     console.log("funcB가 실행되었습니다.")
// }
// funcA(function(){
//     funcB();
// })
// a -> b
function funcA(callback){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
        callback();   
    }, 1000);
}
function funcB(callback){
    setTimeout(() => {
        console.log("funcB가 실행되었습니다.");
        callback();
    }, 1000);
}
function funcC(callback){
    setTimeout(() => {
        console.log("funcC가 실행되었습니다.");
        callback(); 
    }, 1000);
}
function funcD(callback){
    setTimeout(() => {
        console.log("funcD가 실행되었습니다.");
    }, 1000);
}
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        })
    });
})
//a -> b -> c -> d
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4

27. promise

function funcA(callback){
결과보기
함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4

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

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

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

const info1 = new study("1", "웹쓰", "웹퍼블리셔");
const info2 = new study("2", "웹보이", "프론트앤드 개발자");

info1.result();
info2.result();
결과보기
1. 내 이름은 웹쓰이며, 직업은 웹퍼블리셔입니다.
2. 내 이름은 웹보이이며, 직업은 프론트앤드 개발자입니다.

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

info1.result2();
결과보기
1. 내 이름은 웹보이이며, 직업은 프론트앤드 개발자이며 나이는 100살 입니다.