<Java Script> es6문법, 함수정리하기

Java Script es6 정리하기!

1.백틱( ` ) 사용

<script>
    var name='홍길동';
    var greet = '안녕하세요';

    var message2 = `${name}님 ${greet}`;
    console.log(message2);
</script>

2. 전개연산자

• 나열형 자료를 연결하거나 추출할 때 사용.
• 배열이나 객체, 변수명 앞에 마침표 세개 (…)
• 배열, 객체, 함수인자 [], {}, () 안에서만 사용

<script>
    var arr1 = ['a','b'];
    var arr2 = [...arr1, 'c','d'];
    console.log(arr2);

    var arr1_1 = [...arr1]; //새로운 객체 
    console.log(arr1_1);
    console.log(arr1 == arr1_1); //false -> why? 새로운 객체이기 때문에 주소값이 달라서

		var arr3 = [...arr1, ...arr2]; //배열 합치기 
    console.log(arr3)
</script>

3. 기존 문법은 클래스가 존재하지 않아 prototype 사용

• 함수사용
• 인터페이스, 다중상속 사용불가

<script>
    //일반함수
    function plus(x,y){
        return x+y;
    }
    console.log(plus(1,2));
    console.log(typeof(plus));

    //익명함수
    var minus = function (x,y){
        return  x-y;
    }
    console.log(minus(2,1));
    console.log(minus); //익명함수
    console.log(plus);   //일반함수

		//익명함수를 쓰는 이유는? -> 일회용 
    setTimeout(function(){
        console.log('안뇽');
    }, 3000)

</script>

<script>
    //var, let, const
 
    //상수 constant variable 
    const a = 1;
    console.log(a);
    // a=2; 에러남, 상수값에 대입 불가

    const arr = [1,2];
    arr[0] =3;          //상수를 바꾼 것이 아닌 대입되는 값을 바꾼 것이라 가능 
    console.log(arr);

    //var (hoisting 가능) : let (hoisting 불가능)
    // hoising : 실행 시 선언코드가 상단으로 이동 
    console.log(name);
    var name;

    console.log(email);
    let email;
</script>

4. 화살표 함수

• 화살표 기호 (⇒)를 사용해서 함수 선언 (익명함수) function 키워드 삭제, 매개변수와 변수사이 ⇒ 사용

• 매개변수가 하나인 경우 괄호 생략 가능. 리턴값만 있는 경우 중괄호 생략 가능

 //화살표 함수 
 <script>
   setTimeout(()=> {
      console.log('안냥');
    }, 3000)
</script>

5. 계단형 함수

//함수를 리턴
<script>
    function plus(x){
        return function(y){
            return (x+y);
        }
    }
    var p = plus(1);
    console.log(p(2));
</script>

//var plus = x => y => x+y ;

6. 객체 확장 표현식

<script>
    var a= 1;
    var b= 2;
    var propName = 'name';
    var obj = {a:a, b:b, propName:'홍길동'}; //그냥 있는 그대로 출력 
    console.log(obj);

    var obj = {a:a, b:b, [propName]:'홍길동'}; //괄호를 넣어야 속성값이 들어감
    console.log(obj);


    var obj2 = {a,b};
    console.log(obj2);
</script>

7. 구조분해할당

<script>
    //배열
    var list =[1,2];
    var i0 = list[0];
    var i1 = list[1];
    console.log(i0, i1);

    var [n0, n1] = list;
    console.log(n0, n1);

    var [m0] = list;
    console.log(m0);
    var [o0, o1,o2]=list;
    console.log(o1,o2,o3); //값을 넣을 곳이 없음 o2 undefined 

    //객체 
    var obj = {k1 : 'a', k2 : 'b'};
    var k1 = obj['k1'];
    var k2 = obj['k2'];
    console.log(k1,k2);

    //구조분해에서는 키이름이 똑같아야 함
    var {o1,o2} = obj; //undefined
    console.log(o1,o2);
    var {k1,k2} = obj;
    console.log(k1,k2);
</script>

8. 비동기

//비동기 함수 실행 
<script>
    function ajax (url){
        console.log(url + '호출');
        var result = '';
        setTimeout(function(){
            result = '응답결과';
        },2000);
        return result;
    }

    console.log('시작');
    var result = ajax('naver.com');
    console.log(result);
    console.log('끝');
</script>



//promise 사용
<script>
    function test(callback){
        return new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve('응답결과');
            }, 2000);
        });
    }

    console.log('시작');
    test().then(function(data){
        console.log(data);
    });
    console.log('끝');
</script>


//비동기 함수를 동기적으로 처리하고 싶을때 
<script>
    function test(callback){
        return new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve('응답결과');
            }, 2000);
        });
    }

    async function call(){
        var result = await test(function(data){
            return data;
        })
        console.log('result: ' + result);
    }

    console.log('시작');
    test().then(function(data){
        console.log(data);
    });
    console.log('끝');
</script>

//async ~ await 비동기를 동기적으로 하기 위한 

<script>
    var req = new XMLHttpRequest();
    // req.open('get','https://jsonplaceholder.typicode.com/posts');
    // req.send();
    // console.log(req.response); //실행하는 시점에는 값이 안넘어가서 콘솔창에는 안뜸. 하지만 그 후 다시 입력하면 잘 뜸. 
    // req.onreadystatechange = function(){    //값이 넘어오면 출력
    //     if(this.readyState ==4 && this.status == 200){ 
    //         console.log(req.response);
    //     }
    // };

        function ajax (callback){
            req.open('get', 'https://jsonplaceholder.typicode.com/posts');
            req.send();
            callback(req.response);
        }
        function test (callback){
            return new Promise (function(resolve, reject){
                ajax(function(res){
                    resolve(res);
                })
            })
        }
        test().then(function(res){
            req.onreadystatechange = function(){
                if(this.readyState ==4 && this.status == 200){ 
                    //console.log(req.response);
                }
            }
        });

        async function ajax2(){
            req.open('get', 'https://jsonplaceholder.typicode.com/posts');
            req.send();
            req.onreadystatechange = await function(){
                if(this.readyState ==4 && this.status == 200){ 
                    //console.log(req.response);
                }
            }
        }
        ajax2();
</script>