본문 바로가기
Frontend/JavaScript

[javascript] 문법 - 데이터 실행하기

by joy_95 2021. 8. 12.

1 선언적 함수

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

 

2 익명 함수

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

 

3 매개변수 함수

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

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

 

4 리턴값 함수

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

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

 

5 화살표 함수 : 선언적 함수

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

 

 

6 화살표 함수 : 익명 함수

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

 

7 화살표 함수 : 리턴값 함수

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

    document.write(func());
}

 

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

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

 

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

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

 

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

{
	const func = str => str;

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

 

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

{
     const func = str => str;

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

 

12 내부 함수

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

 

13 즉시실행 함수

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

 

14 파라미터 함수

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

 

15 아규먼트 함수

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

 

16 재귀 함수

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

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

 

17 재귀 함수 : 반복문

{
    //for문
    let sum = 0;
    for(var i = 1; i <= 100; i++ ){
    	sum += i;
    };
    document.write(sum); //5050

    //재귀함수를 이용한 반복문
    function func(num){
        if(num<=1){
        	return 1;
        } else {
        	return num + func(num-1);
        }
    }
    document.write(func(100)); //5050
}

 

18 콜백 함수

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

 

19 콜백 함수 : 반복문

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

 

20 콜백 함수 : 동기/비동기

{
	function funA(){
    	document.write("funA가 실행되었습니다.");
    };
    function funB(){
    	document.write("funB가 실행되었습니다.");
    };
    funA();
    funB();

    //02
    function funC(){
   		setTimeout(() => {
    		console.log("C")
    	}, 1000);
    }
    function funD(){
    	console.log("D")
    }
    funC();
    funD();

    //03
    function funE(callback){
    	setTimeout(() => {
    		console.log("E")
    		callback();
    	}, 1000);
    }
    function funF(){
    	console.log("F");
    }
    funE(function(){
    	funF();
    });
}

21 콜백 함수 : 콜백 지옥

{
    function A(callback){
        setTimeout(function(){
            console.log('A');
            callback();
        },1000);
    }
    function B(callback){
        setTimeout(function(){
            console.log('B');
            callback();
        },1000);
    }
    function C(callback){
        setTimeout(function(){
            console.log('C');
            callback();
        },1000);
    }
    function D(callback){
        setTimeout(function(){
            console.log('D');
        },1000);
    }
    A(function(){
        B(function(){
            C(function(){
                D();
            });
        });
    });
}

 

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

{
    function func(num, name, job){
    document.write(num + ".내 이름은" + name + "이며, 직업은 " + job + "입니다.");
    }

    func("1", "웹쓰", "웹 퍼블리셔");
    func("2", "웹스토리보이", "프론트앤드 개발자");
}

 

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

{
    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);//1. 내 이름은 양이며, 직업은 프론트엔드개발자입니다.
    func(youNum2, youName2, youJob2);//2. 내 이름은 영이이며, 직업은 웹퍼블리셔입니다.
}

 

24 함수 유형 : 함수와 배열을 이용한 형태

{
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);//1.내 이름은 양이며, 직업은 웹퍼블리셔입니다.
func(info[1].num, info[1].name, info[1].job);//2.내 이름은 영이이며, 직업은 프론트엔드 개발자입니다.

 

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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 study("2", "영이", "프론트앤드 개발자", "100");

    info1.result();
    info2.result();
    info2.result2();
}
반응형

'Frontend > JavaScript' 카테고리의 다른 글

[Javascript] 정규 표현식<미완성>  (0) 2021.08.18
[javascript] 문법 정리 - 데이터 제어하기  (0) 2021.08.12
[javascript] 문법정리 - 데이터 불러오기  (0) 2021.08.12
[JAVASCRIPT] 문법 정리 - 데이터 저장하기  (0) 2021.08.11
[JAVASCRIPT] clientX, offsetX, pageX, screenX  (0) 2021.08.11

관련글

티스토리툴바