Javascript

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

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

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

function func(){
    const str = "함수가 실행되었습니다.4";
    return str; //실행문은 아니지만 결과값으로 저장됨.
};
document.write(func());

//function func(){
    //document.write("함수가 실행되었습니다.5");
//}
//func();
    //화살표함수로 ↓
//func = () => {
    //document.write("함수가 실행되었습니다.5");
//}
//func();
    //화살표함수로(중괄호 생략) ↓
func = () => document.write("함수가 실행되었습니다.5");
func();

// const func = function(){
//     document.write("함수가 실행되었습니다.6");
// }
// func();
    // 화살표함수로 ↓
// const func = () => {
//     document.write("함수가 실행되었습니다.6");
// }
// func();
    // 화살표함수로(중괄호 생략) ↓
const func = () => document.write("함수가 실행되었습니다.6");
func();

// let str;   ◀원래는 변수선언을 해야하는게 원칙이지만 생략가능함 
//function func(str){
    //document.write(str);
//}
//func("함수가 실행되었습니다.7");
    // 화살표함수로 ↓
//func = (str) => {
    //document.write(str);
//}
//func("함수가 실행되었습니다.7");
    // 화살표함수로(중괄호 생략) ↓
//func = (str) => document.write(str);
//func("함수가 실행되었습니다.7");
    // 변수 괄호생략가능 ↓
func = str => document.write(str);
func("함수가 실행되었습니다.7");

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

const func = (str) => {  //익명 + 매개변수
    return str;               //리턴값
}
document.write(func("함수가 실행되었습니다.9
"));

const func = str => {                   //변수가 하나라서 괄호()생략 가능
    return str;
}
document.write(func("함수가 실행되었습니다.10
"));

const func = str => str;            //리턴 생략가능 + 중괄호 생략

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

 func = str => str;      //선언적 함수 + 매개변수 + 리턴값

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

function func(num, str1, str2){
    document.write(num+"."+str1+str2+"되었니?<br>");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "제이쿼리", "실행");

function func(num, str1, str2){
    document.write(num + ". "+str1+"가 "+str2+"되었습니다.<br>");
}
const youNun1 = 1;
const youNun2 = 2;
const youNun3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "제이쿼리";
const youCom1 = "실행";

func(youNun1, youStr1, youCom1);
func(youNun2, youStr2, youCom1);
func(youNun3, youStr3, youCom1);

function func(num, str1, str2){
    document.write(num + ". "+str1+"가 "+str2+"되었습니다.<br>");
}
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);

const info = {
    num1 : 1,
    name1 : "함수",
    com : "실행",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "제이쿼리",
    
    result1 : function(){
        document.write(info.num1+". "+info.name1+"가 "+info.com+"되었습니다.");
    },
    result2 : function(){
        document.write(info.num2+". "+info.name2+"가 "+info.com+"되었습니다.");
    },
    result3 : function(){
        document.write(info.num3+". "+info.name3+"가 "+info.com+"되었습니다.");
    }
};

info.result1();
info.result2();
info.result3();

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

function func(num, name, word){
    this.num = num;                 
    this.name = name;
    this.word = word;
};

func.prototype.result = function(){
    document.write("<br>"+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();

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

(function func(){
    document.write("함수가 실행되었습니다.");
}());
// 화살표함수로 변경
(() => {
    document.write("함수가 실행되었습니다.");
})();

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

// 파라미터 = 인자
function func(str = "함수가 실행되었습니다."){
    document.write(str);
}
func();

function func(a,b){
    document.write(arguments[0]);
    document.write(arguments[1]);
}
func("함수가 실행되었습니다", "함수가 실행되었습니다.")

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

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

function callback(str){
    document.write("함수가 실행되었습니다.2");
    str();              //str인자를 마치 함수처럼 해줌
}
callback(func);             //str이란 인자값에 func라는 실행문이름이 들어가니깐 실행문이 작동됨.

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

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

callback(func);

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


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

// b > a

//비동기 a가실행된 뒤 b가 실행됨. 순서확인하려면 b에도 셋타임넣어보기
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();
        })
    });
})

function func(){
    function funcA(){
        document.write("함수가 실행되었습니다.");
    };
    funcA();            //함수안에 함수가 들어감 : 내부함수
    function funcB(){
        document.write("함수가 실행되었습니다.");
    };
    funcB();
}
func();

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

// extends : 상속받겠다 
class study2 extends study {
    constructor(num, name, job, age){
        super(num, name, job);
        this.age = age;
    }
    result(){
        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();
info1.result2();