자바스크립트 데이터 실행하기

01. 선언적 함수
02. 익명 함수
03. 매개변수 함수
04. 리턴값 함수
05. 화살표 함수 : 선언적 함수
06. 화살표 함수 : 익명 함수
07. 화살표 함수 : 매개변수 함수
08. 화살표 함수 : 리턴값 함수
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
21. 함수 유형 : 함수와 매개변수를 이용한 형태
22. 함수 유형 : 함수와 변수를 이용한 형태
23. 함수 유형 : 함수와 배열,객체를 이용한 형태
24. 함수 유형 : 객체 안에 변수와 함수를 이용한 형태
25. 함수 유형 : 객체 생성자 함수
26. 함수 유형 : 프로토타입 함수
27. 함수 유형 : 객체 리터럴 함수
14. 즉시 실행 함수
15. 파라미터 함수
16. 아규먼트 함수
17. 재귀함수
18. 콜백함수 : 다른함수에 인수로 넘겨지는 함수
19. 콜백함수 : 반복문
20. 콜백함수 : 동기/비동기
13. 내부 함수
13. 클로저
28. 클래스
29. 클래스 상속

01.선언적 함수

변수(데이터 저장), 배열(데이터 저장), 객체(데이터 저장) --> 함수(실행문)(제어문)
선언적 함수-사용자 정의 함수,프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용

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

결과보기

함수가 실행되었습니다.1

02. 익명 함수 (변수 안에 함수가 들어가 이름이 없음)

익명 함수-사용자 정의 함수,프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용
변수에 함수 데이터를 저장하여 변수를 함수처럼 사용할 수 있게 만듬

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

결과보기

함수가 실행되었습니다.2

03. 매개변수 함수 (매개변수 : 매개변수 함수 안에 있는 변수, 함수를 호출할 때 전달하는 변수 )

매개변수 함수는 여러개의 데이터를 저장할 수 있다.
변수 : 지역변수 + 전역변수 + 매개변수
함수 : 지역함수 + 전역함수

{
    function func(str1, str2, str3){    //매개변수 함수는 여러개의 데이터를 저장할 수 있다.
        document.write(str1);
    }
    func("함수가 실행되었습니다.3
");
}

결과보기

함수가 실행되었습니다.3

04. 리턴값 함수 (리엑트에서 많이 씀)

{
    function func(){
        const str = "함수가 실행되었습니다.4
";
        return str; //결과값 출력, 종료를 의미
    }
    document.write(func()); //리턴값이 있기 때문에 실행문 안에 func()를 넣어도 출력이 된다.
}

결과보기

함수가 실행되었습니다.4

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.5

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.6

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.7

08. 화살표 함수(리턴값 함수)

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.8

09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 (위의 3개 합친 응용)

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.9

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.10

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

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

결과보기

함수가 실행되었습니다.11

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

ECMAscript6(es6)에서 나온 대표적인 것들 : 화살표 함수, let, const
'=>'을 이용하여 함수를 간결하게 표현할 때 사용

{
    func = str => str;  //익명 함수에서 const까지 생략해버림
    
    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. 제이쿼리가 실행되었습니다.

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("함수가 실행되었습니다.", "함수가 실행되었습니다.")

결과보기

함수가 실행되었습니다. 함수가 실행되었습니다.

재귀함수

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

결과보기

함수가 실행되었습니다. 10
함수가 실행되었습니다. 9
함수가 실행되었습니다. 8
함수가 실행되었습니다. 7
함수가 실행되었습니다. 6
함수가 실행되었습니다. 5
함수가 실행되었습니다. 4
함수가 실행되었습니다. 3
함수가 실행되었습니다. 2
함수가 실행되었습니다. 1

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

결과보기

24.콜백함수

//-재귀함수는 동시에 여러개 실행, //콜백함수는 첫번째 함수가 실행되고 두번째 함수실행

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

결과보기

함수가 실행되었습니다.2
함수가 실행되었습니다.1

25.콜백함수 : 반복문

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

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

callback(func);

결과보기

함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

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

function funcA(callback) {
            setTimeout(()=>{  
              console.log("funcA가 실행되었습니다.");
              callback();
            }, 1000);
          
        }
        function funcB() {
            setTimeout(()=>{  
              console.log("funcB가 실행되었습니다.");
              callback();
            }, 1000);
        }
        function funcC() {
            setTimeout(()=>{  
              console.log("funC가 실행되었습니다.");
              callback();
            }, 1000);
        }
        funcA( function(){
            funcB( function(){
                funcC(function(){
                    funcD();
                });
            });
        });
        //a
        //b
        //c
        //d

결과보기

결과보기

28.내부함수: 스코프=클로저

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

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

결과보기

함수가 실행되었습니다.1
함수가 실행되었습니다.2

29.클래스: 함수의 집합체

class study {
            constructor(num){
                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){
                this.num = num;
                this.name = name;
                this.job = job;
            }
            result(){
                document.write(this.num + ".내이름은" +  this.name + "이며, 직업은" + this.job + "입니다.")
            }
        }

            class stuy2 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","웹스토리보이", "프론트앤드개발자");
  
            info1.result();
            info2.result2();

결과보기

결과보기

결과보기

결과보기