Javascript

01. 선언적 함수

변수(데이터 저장), 배열(데이터 저장), 객체(데이터 저장, 내장 객체(three.js 등등 자바스크립트 안에서 작동되는 것)) -> 함수(실행문) (제어문) 를 이용한다.

{
    function func(){
        document.write("함수가 실행되었습니다.1
")
        //write도 객체이자 메소드이다 → 브라우저 객체
    }
    func();
}

02. 익명 함수

<자료형 데이터 타입>
const x = 100;
const x1 = "100";
const x2 = [];
const x3 = {};
const x4 = null, undefined;
const x5 = function(){}; -> 함수
const x6 = true, false;

{
    const func = function(){      //함수 안에 이름이 없어서 익명함수 이다.
        document.write("함수가 실행되었습니다.2
");
    }
    func();
}

03. 매개변수 함수

함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.

{
    function func(str){     //str = 변수 = 인자 = 매개변수
        document.write(str);
    }
    func("함수가 실행되었습니다.3
"); // func안에 변수명을 지정할 수 있다.
}

04. 리턴 값 함수

함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 리턴값이라고 한다.
또한 출력 명령어를 사용하지 않고 출력하기 위해서는 리턴값 함수를 사용해주면 된다.

{
    function func(){
        const str = "함수가 실행되었습니다.4
"
        return str;
    }
    document.write(func());
    //객체로 데이터를 저장하는 방법 중 객체 속에 함수로 표현하는 방법과 같은 맥락이다.
    //다른 식에서도 리턴은 거의 생략한다. 리액트에서는 보통 리턴까지 사용하여 입력한다.
}

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

ECMAscript6(es6)에 추가된 내용으로 " =>"를 이용하여 함수를 간결하게 표현할 때 사용한다.
function 키워드를 생략할 수 있으며 항상 익명 함수 형식으로 표현해야 한다. 이때 단일 명령문이라면 함수의 중괄호 {}와 return의 생략이 가능하다.

{
    //화살표 함수(선언적 함수) 기본표현
    func = () => {
        document.write("함수가 실행되었습니다.5
");
    }
    func();

    //화살표 함수(선언적 함수) 한줄 표현
    func = () => document.write("함수가 실행되었습니다.5
"); //{}가 생략되어도 읽는다.

    func();
}

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

화살표 함수에서 익명 함수는 const를 사용하여 표현해야 한다.

{
    //화살표 함수 익명함수 기본 표현
    const func = () => {
        document.write("함수가 실행되었습니다.6
");
    }
    
    //화살표 함수 익명함수 단일 표현
    const func = () =>  document.write("함수가 실행되었습니다.6
");

    func();
}

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

화살표 함수에서 변수 선언을 해주어야 하지만 생략이 가능하다.

{
    //화살표 함수 익명함수 기본 표현
    const func = () => {
        document.write("함수가 실행되었습니다.6
");
    }
    
    //화살표 함수 익명함수 단일 표현
    const func = () =>  document.write("함수가 실행되었습니다.6
");

    func();
}

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

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

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

const를 앞에 입력해주어야 익명 함수가 된다.

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

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

()를 없앤 화살표 함수

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

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

() 과 {} 를 모두 생략한 화살표 함수 - 익명

{
    const func = str => str;

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

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

() 과 {} 를 모두 생략한 화살표 함수 - 선언적함수 (const를 생략해주면 된다.)

{
    func = str => str;

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

13. 함수와 매개변수를 이용한 형태 : 매개변수를 통해 데이터 전달

매개변수를 통해 데이터를 전달시킨다.

함수의 특징
1. 함수는 실행문의 집합체이다.
2. 함수를 재활용하는 것이 목적이다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.13");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행"); //재활용 : 함수를 두 번 쓸 필요가 없다. 
func("3", "제이쿼리", "실행");

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

변수를 통해 데이터를 전달시킨다.

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

15. 함수 유형 : 함수와 배열 , 객체를 이용한 형태

객체를 사용하여 데이터를 전달시킨다.

function func(num, str1, str2){
    document.write(num + ". " + str1 + "가 " + str2 + "되었습니다.15");
}

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

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

객체가 하나가 있을 땐 info 뒤에 []를 사용하지 않는다.
16번 유형은 재사용이 불가하기 때문에 아래의 17번 식이 만들어지게 되었다.

const info = {
    num1 : 1,
    name1 : "함수",
    word1 : "실행",
    num2 : 2,
    name2 : "자바스크립트",
    word2 : "실행",
    num3 : 3,
    name3 : "제이쿼리",
    word3 : "실행",

    result1 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num1 + ". " + info.name1 + "가 " + info.word1 + "되었습니다.16");
    },
    result2 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num2 + ". " + info.name2 + "가 " + info.word2 + "되었습니다.16");
    },
    result3 : function(){    
        //객체 안에 함수를 넣은 상태 
        document.write(info.num3 + ". " + info.name3 + "가 " + info.word3 + "되었습니다.16");
    }
}
info.result1(); 
info.result2(); 
info.result3(); 

17. 함수 유형 : 객체 생성자 함수

16번의 단점인 재사용을 위해 새로 만들어진 객체 생성자 함수이다.

객체 생성자 함수의 특징
1.this. : 이것을 저장하시오. 라는 의미로 재사용을 가능하게 해준다. 2,객체 생성자를 출력하려면 꼭 인스턴트를 생성 한뒤 실행문을 써주어야 한다.

function func(num, name, word){ //저장한 데이터를 변수에게 데이터 전달
    this.num = num; //재사용울 위해 const를 생략하고 this.를 붙인다.
    this.name = name;
    this.word = word;

    this.result = function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.17
");
    }
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

//실행

info1.result();
info2.result();
info3.result();

18. 함수 유형 : 프로토타입 함수

데이터에 이어 메모리까지 재사용을 하기 위해 나온 함수 - 쓸데없는 데이터 사용하지 않도록!

 function func(num, name, word){ //저장한 데이터를 변수에게 데이터 전달
    this.num = num; //재사용울 위해 const를 생략하고 this.를 붙인다.
    this.name = name;
    this.word = word;
}
func.prototype.result = function(){
    document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.18
");
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

//실행
info1.result();
info2.result();
info3.result();

19. 함수 유형 : 객체 리터럴 함수

함수를 리터럴 객체 안에 넣기 : 원하는 값만 추출하기 용이함!.

function func(num, name, word){ //저장한 데이터를 변수에게 데이터 전달
    this.num = num; //재사용을 위해 const를 생략하고 this.를 붙인다.
    this.name = name;
    this.word = word;
}
func.prototype = {
    result1 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    },
    result2 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    },
    result3 : function(){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다.19
");
    }
}

//인스턴트 생성 - 데이터 저장
const info1 = new func("1", "함수", "실행"); //데이터 저장  : this. : 이것을 저장하시오. 라는 의미!
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "제이쿼리", "실행");

//실행
info1.result1();
info2.result2();
info3.result3();

20. 함수 유형 : 즉시 실행 함수

함수를 더 간편하게 만든 식으로 func();(실행문)을 생략합니다.

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

//즉시실행 함수 화살표 함수
(() => {
    document.write("2. 함수가 실행되었습니다.20")
})();
}

21. 함수 유형 : 파라미터 함수

{
//매개변수 함수
function fun(str){
    document.write(str);
}
func("1. 함수가 실행되었습니다.21");

//파라미터 함수 : 매개변수 함수를 파라미터 함수로 바꾸기.
function func(str = "2. 함수가 실행되었습니다.21"){
    document.write(str);
}
func();
}

22. 함수 유형 : 아규먼트 함수

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

23. 함수 유형 : 재귀 함수 : 자기 자신을 호출시킨다.

동시에 여러개 실행 즉 한번에 여러개의 함수를 동시에 실행

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

    }

    func(10);
}

//애니메이션을 사용할 경우 1초에 60번실행이라는 기본 조건이 있기 때문에 무한대로 빠지지 않는다.
{
    function animation(){
        document.write("함수가 실행되었습니다.");

        requestAnimationFrame(animation)
    }
    animation();
}

24. 함수 유형 : 콜백 함수 : 다른 함수에 인수로 넘겨지는 함수 : 정석 버젼~! 📌

로딩 소스가 실행이 된 후 그 다음에 함수를 실행시키고 싶을 때 콜백함수를 사용한다.
2번(로딩소스)가 끝나고 1번 실행 : 즉 첫번째 함수가 실행 -> 두번째 함수가 실행 : 즉 순서대로 실행

{
    function func() {
        document.write("함수가 실행되었습니다.1");
    }
    //매개변수(인자값) 사용하여 마치 함수처럼 사용
    function callback(str) {
        document.write("함수가 실행되었습니다.2");
        str();
    }

    callback(func);

    //콜백이 실행되고 그 뒤 func가 실행된다. 즉 인자값을 이용하여 마치 함수처럼 사용하였기 때문이다. 실무에서 많이 사용
}

25. 함수 유형 : 콜백 함수 : 반복문 📌

콜백함수로 반복문을 실행 시키기

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

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

    callback(func);
}

26. 함수 유형 : 콜백 함수 : 동기/비동기 📌

콜백함수 사용 시 : 원래 b가 먼저 실행된 후 a가 실행되어야 하지만 매개변수로 콜백을 사용하여서 실행문인 것 처럼 사용한다.
그러면 a가 먼저 실행된 후 b가 실행된다. 즉 b도 3초 뒤에 a가 끝나고 b가 실행되는 것
콜백함수의 용도는 순차적으로 코드를 실행시키기 위함. 콜백함수에 사용할 수 있는 함수는 대표적으로 이벤트 리스너와 셋타임아웃 등이 있다.
콜백함수의 원리 : funcA 실행 해라. 그러나 실행 후 파리미터로 콜백을 넣어서 : 굳이 콜백 함수를 사용해서 순차적으로 사용하는 이유는 협업을 했을 때 각각 출력하고자 하는 값이 다를 때 콜백함수를 이용해서 원하는대로 순서를 바꿀 수 있기 때문.

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

funcA();
funcB();

//b
//a

//비동기
function funcA(callback){
    setTimeout(() => {
       console.log("funcA가 실행되었습니다.");
       callback(); //실행문인 것처럼 훼이크
    }, 1000); //1초 후에 실행됨.
}
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가 실행되었습니다.");
           callback();
        }, 1000);
    }
    function funcE(){
        console.log("funcE가 실행되었습니다.");
    }
    funcA(function(){
        funcB(function(){
            funcC(function(){
                funcD(function(){
                    funcE();
                });
            });
        });
    });

    //a
    //b
    //c
    //d
    //e
}

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;
        } //class함수을 사용할 때 무조건 실행됨

        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 study2("2","영양만점 토매토","프론트엔드 희망 백수",587);
    info1.result();
    info2.result();
    info2.result2();
}