[구디아카데미] 자바스크립트 ES6 문법

[구디아카데미]

✅ 문자열 템플릿

ES6 이전
-> +연산을 이용하여 연결연산을 진행함

"안녕 "+name+"아!";

ES6 이후
-> 백틱 `` 을 이용해서 문자열을 표시

`안녕 ${name} 아!`;

* ${변수} -> 변수를 사용할때는 왼쪽과같이 표시

• 주의! jsp에서는 문자열 템플릿을 사용할 수 없다. (html 페이지 내부에서..)
• 별도의 js 파일에서는 사용이 가능하다 (외부에서 소스작성)

 <div id="strContainer"></div>
<script>
        let name = "유병승";
        const $strContainer = document.getElementById("strContainer");
        // $strContainer.innerHTML+="<h3>"+name+"</h3>";
        $strContainer.innerHTML+=`<h3>${name}</h3>`; 
        
  		// 변수에 연산도 가능
        let su = 10;
        let su2 = 20;
        $strContainer.innerHTML+=`<h4>${su+su2}</h4>`;

        // 객체, 배열에 값을 접근하기
        let obj = {name:"유병승",age:19};
        let arr = [1,2,3,4,5];
        $strContainer.innerHTML += `<h3>${obj.name} ${obj['age']}</h3>`;
        $strContainer.innerHTML += `<h4>${arr[0]} ${arr[1]} </h4>`;

        // 문자열 템플릿에서 함수 호출하기
        const print = ()=>"함수반환하기";
        $strContainer.innerHTML+=`<h4>${print()}</h4>`;
        $strContainer.innerHTML+=`<h4>${su>5?"크다":"작다"}</h4>`;
    </script>

✅ null, undefined형 처리하는 연산자

• ?? : null, undefiend형에 대해 대체값을 지정하는 연산자
• ? : 객체에 속성에 접근했을 때 속성이 없을 때 undefined로 처리할 수 있는 연산자

    <script>
        let val;
        let val2 = null; // 빈값을 넣고싶을 때 null을 넣음

        console.log(val??"값이 없음!"); // val은 undefiende이므로 값이 없음이 대체로 출력
        console.log(val2??"홍길동!"); // val2는 null이므로 홍길동이 대체로 출력

        val ={
            name : "유병승",
            hobby:["코딩","독서","영화보기"],
            item:{
                name : "책",
                price : "18000"
            },
            toString:function(){
                // alert("실행");
            }
        }
        
        console.log(val.name);
        console.log(val.toString())
        console.log(val.test?.());  // val 객체의 test 속성값은 없기때문에 오류가남 그래서 그 오류대신에 undefined로 처리
        console.log(val.gender??"남");  // val.gender는 현재 값이 없으므로 (남으로 출력)
    </script>

✅ 전개연산자

• 나열혈 자료를 추출하거나 연결할 때 사용하는 연사자 -> 배열, 객체에 활용
• 매개변수에 순차적으로 값을 대입할 때 사용
• 문법 : ....변수명

    <script>
     	 let arr = [1,2,3,4,5];
        console.log(arr);  // [1,2,3,4,5]
        console.log(...arr); // [1,2,3,4,5]

        function testFunc(su,su1,su2){
            console.log(`${su} ${su1} ${su2}`); //${su3} ${su4} ${su5}`);
        }
        testFunc(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5]); // arr0 ~ arr2까지 값이 맞춰서 들어감

        // 전개연산자를 이용하면 편리하게 대입할 수 있다.
        testFunc(...arr,100); // 알아서 개수에 맞춰서 들어가짐 

        // 배열을 복사할 때 사용할 수 있음
        let arrcopy = [];
        arr.forEach(e=>arrcopy.push(e));
        console.log(arrcopy);

        let arrcopy2 = [...arr]; // 위처럼 일일이 값을 push할 필요없이 자동으로 대입이됨
        console.log(arrcopy2);

        // 다수의 배열을 복사해서 한개의 배열로 만들때도 사용이 가능
        let animal = ["강아지","고양이","사자","호랑이"];
        arrcop = [...arr, ...animal];  // 두개의 배열을 동시에 하나의 배열로 복사
        console.log(arrcop); //  [1, 2, 3, 4, 5, '강아지', '고양이', '사자', '호랑이']


        // 객체에서 전개 연산자 활용하기
        let person = {name:"유병승", age:19, gender:"남"};
        let testObj = {title:"데이터", sample:[1,2,3,4], item:{name:"연필",price:100}};

        // 객체에 사본을 생성할때 ... 연산 이용하기
        let copyPerson = {...person};  // 객체 키값들이 알아서 들어감
        console.log(copyPerson); // {name: '유병승', age: 19, gender: '남'}

        // 두개 이상의 객체를 복사할 때도 사용할 수 있다.
        let manyObj={...person, ...testObj};
        console.log(manyObj); 

        // 객체를 복사하고 속성에 원하는 값으로 대입시키기
        let copyPerson2 ={
            ...person,
            gender:"여"   // 키는 중복되면 덮어쓰기 되며, 키가 없으면 추가됨
        };
        console.log(copyPerson2);

        copyPerson3 = {
            ...manyObj,
            sample:[10,20,30], 
            item:function(){console.log("변경한 함수")} // item 객체타입이 함수가됨
        };
        copyPerson3.item();
        console.log(copyPerson3);
    </script>

✅ 구조 분해 할당

• 배열, 객체의 값을 각 변수에 분할해서 저장하는 것

    <script>
        let height = [166.7,172.3,174.5,178.2,180.5,190.2];
        let a = height[0];
        let b = height[1];
        let c = height[2];
        console.log(`${a} ${b} ${c}`);

        // 위처럼 하지 않고 구조분해할당을 이용하면 쉽다!
        let [n1,n2,n3] = height;
        console.log(`${n1} ${n2} ${n3}`); // 166.7 172.3 174.5

        [n1,n2,n3,...other]=height;  // ... 뒤에 변수값은 나머지 값들이 들어간다
        console.log(`${n1} ${n2} ${n3} ${other}`); // 166.7 172.3 174.5 178.2,180.5,190.2
        console.log(other); // [178.2, 180.5, 190.2]

        // 구조분해할당시 default 값 선언하기
        let [first,second,third,fourth="돼지",fifth="도마뱀"] = animal; // 이미있으면 바뀌고 없으면 기본값으로 바뀜
        console.log(`${first} ${second} ${third} ${fourth} ${fifth}`); // 강아지 고양이 사자 호랑이 도마뱀

        function Student(name,grade,classNum,num){
            this.name = name;
            this.grade = grade;
            this.classNum = classNum;
            this.num = num;
        }

        let students=[
            new Student("이동제",3,2,1),
            new Student("홍승우",3,2,2),
            new Student("윤나라",3,2,3),
            new Student("정상준",3,2,4),
            new Student("윤지환",3,2,5),
        ];
        let [lee,hong,yoon,...otherStudent]=students;
        console.log(lee);
        console.log(hong);
        console.log(yoon);
        console.log(otherStudent); // 정상준과 윤지환의 객체가 저장되어 있다


        // 객체도 구조분해할당을 적용할 수 있다
        // key와 동일한 이름에 대입한다.
        let {classNum,num,gender="여"}= lee;   
        console.log(`${classNum} ${num} ${gender}`); // gender라는 키가없기때문에 기본값 여가 출력됨  (2,1,여)출력
    </script>

✅ class 예약어 사용
✅ 클래스를 상속

<script>
        class Shape{
            // 생성자 선언
            constructor(x=0,y=0){ // 생성자 예약어 = constructor 
                                  // x=0, y=0 디폴트값
                // 필드,멤버변수선언 -> 속성
                this.x = x;
                this.y = y;
                console.log("생성자 실행");
            }
            // 속성 설정하기 -> let, const, var 예약어를 사용하지 않는다.
            name = "최주영";
            score=[100,80,70,90];

            test = function(){
                console.log("shape의 test함수");
            }

            // 멤버메소드 선언 -> function 예약어는 사용하지 않는다.
            toString() {
                return `${this.name} ${this.score} ${this.x} ${this.y}`;
            }

            move(x,y){
                this.x = x;
                this.y = y;
            }

            getPosition(){
                return `${this.x} : ${this.y}`;
            }

            // 클래스 내부에 static 선언하기
            static staticVar = "스태틱변수";
            static staticFunc(){
                return "스태틱함수";
            }
        }

        let s = new Shape(50,100); // 객체 s 생성
        console.log(s);

        //선언된 객체의 속성에 접근하기
        console.log(s.x); // 50
        console.log(s['y']); // 100
        console.log(s.name); // 최주영

        // 함수 호출하기
        s.move(100,200);
        console.log(s);  // s객체의 x y 값은 각각 100,200 상태임

        let result = s.getPosition();
        console.log(result); // 100 : 200
        s.test();
        result1 = s.toString();
        console.log(result1); // 최주영 100,80,70,90 100 200``

        // static 필드 메소드 접근하기
  		// 객체를 생성하지 않아도 클래스명으로 접근 가능
        console.log(Shape.staticVar);  // 스태틱변수
        Shape.staticVar = "김찬은";  
        console.log(Shape.staticVar); // 김찬은

        result = Shape.staticFunc();
        console.log(result); // 스태틱함수
  
        Shape.staticFunc = "안녕";  // static 메소드가 static 필드가 됨
        console.log(Shape.staticFunc); // 안녕  
    </script>

	

	<h3>클래스를 상속하기</h3>
    <p>
        extends 부모클래스명
    </p>
    <script>
        class Circle extends Shape{
            constructor(x,y,radius){
                super(x,y);  // super() -> 상속했을경우 부모 생성자 호출이 반드시 필요 (자동으로 만들어지지 x)
                this.radius = radius;
            }
            arear(){
                return this.x * this.y * this.radius;
            }

            toString(){ // 부모클래스인 Shape 함수를 오버라이딩했음 (자식것이 우선순위 먼저임)
                return "자식꺼 실행";
            }
        } 
        let circle = new Circle(10,20,3.2);
        console.log(circle);
        console.log(circle.arear()); // 640
        console.log(circle.toString()); // 자식꺼 실행
    </script>