01. 선언적 함수

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

02. 익명 함수

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

03. 매개변수 함수

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

04. 리턴값 함수

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

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

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

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

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

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

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

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("함수가 실행되었습니다.12"));
결과보기
함수가 실행되었습니다.

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

function func(num, str1, str2){
    document.write(num + ". " +str1 + "가 "+ str2 +"되었습니다.
"); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("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. 함수 유형 : 객체 생성자 함수

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. 함수 유형 : 객체 생성자 함수

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();
}
결과보기
함수가 실행되었습니다. 함수가 실행되었습니다......

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...

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

{
    //01
    function funcA(){
        document.write("funcA가 실행되었습니다.
"); } function funcB(){ document.write("funcB가 실행되었습니다.
"); } funcA(); funcB(); // a // b //02 function funcA(){ setTimeout(() => { console.log("funcA가 실행되었습니다.
"); },1000); } function funcB(){ console.log("funcB가 실행되었습니다.
"); } funcA(); funcB(); // b // a //03 function funcA(callback){ setTimeout(() => { console.log("funcA가 실행되었습니다.
"); callback(); }, 1000); } function funcB(){ console.log("funcB가 실행되었습니다.
"); } funcA(function(){ funcB(); }); // a // b //04 콜백지옥 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(){ setTimeout(() => { console.log("funcD가 실행되었습니다.
"); }, 1000); } funcA(function(){ funcB(function(){ funcC(function(){ funcD() }) }); }); }
결과보기

27. promise

{
    
결과보기

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

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