Javascript

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

//데이터 타입(자료형) --> 타입스크립트
// const x = 100
// const x1 = "100"
// const x2 = []
// const x3 = {}
// const x4 = null, undefiend
// const x5 = function(){}
// const x6 = true, false
    
const func = function(){       //함수 이름이 없고 변수만 있어서 익명함수
    document.write("함수가 실행되었습니다.2");               
} 
func();     

function func(str){         //func(인자 = 매개변수)를 넣어줘서 출력
    document.write(str);
}
func("함수가 실행되었습니다.3");
 

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

func = () => {          //function을 없애주고 사용
    document.write("함수가 실행되었습니다.5");
}
func();
    
func = () => document.write("함수가 실행되었습니다.5");
func();         //중괄호 생략 가능

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

func = (str) => {
    document.write(str);
}
func("함수가 실행되었습니다.7");
    
func = (str) => document.write(str);        //const가 앞에 있어도 상관없음
func("함수가 실행되었습니다.7");
    
func = str => document.write(str);      //변수가 하나일때 ()도 없앨 수 있음
func("함수가 실행되었습니다.7");

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 +"되었습니다.");
}
func("1","함수", "실행");
func("2","자바스크립트", "실행");
func("3","제이쿼리", "실행");       //재활용 가능

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

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

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

function func(num, name, word){
    this.num = num;
    this.name = name;
    this.word = word;           //this를 사용하면 재활용이 가능
            
    this.result = function(){
        document.write(this.num  + ". " + this.name + "가 " + this.word + "되었습니다.");
    }
}
//인스턴스 생성(this 실행)
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(this.num  + ". " + this.name + "가 " + this.word + "되었습니다.");
}
    
//인스턴스 생성(this 실행)
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 + "되었습니다.");
    }
}
    
//인스턴스 생성(this 실행)
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");
    
//실행
info1.result1();
info2.result2();
info3.result3();

(function(){
    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(){
    document.write("함수가 실행되었습니다.");
    
    //func() -> 잘못하면 무한에 빠짐
}
func();

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

//애니메이션 사용
function func(){
    document.write("함수가 실행되었습니다.");
    
    requestAnimationFrame(animation);
}
animation();

function func(){
    document.write("함수가 실행되었습니다.2");
}
function callback(str){
    document.write("함수가 실행되었습니다.1");  //callback이 먼저 실행이 된 뒤에 나머지 실행
    str();
}
callback(func);

//반복문
function func(index){
    document.write("함수가 실행되었습니다." + index);
}
function callback(num){
    for(let i=1; i<=10; i++){
        num(i);
    }
}
callback(func);

//01. A -> B
function funcA(){
    document.write("funcA가 실행되었습니다.");
}
function funcB(){
    document.write("funcB가 실행되었습니다.");
}
funcA();
funcB();    //funcA 실행 후 -> funcB 실행

//02. B -> A
function funcA(){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
    },1000)  //-> setTimeout때문에 b먼저 실행
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();    //funcB 실행 후 -> funcA 실행

//03. A -> B
function funcA(callback){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
        callback();
    },1000);
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA(function(){
    funcB();
});   //funcA 실행 후 -> funcB 실행


//04. A -> B -> C -> D
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()
        })
    });
});  // funcA -> funcB -> funcC -> funcD

function func(){
    function funcA(){
        document.write("함수가 실행되었습니다.A");
    };
    funcA();
    function funcB(){
        document.write("함수가 실행되었습니다.B");
    };
    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 + "입니다.");
    } 
}
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", "눈누난나", "프론트앤드 개발자", 24);

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