JS es6

1. let / const

• var
  • 재선언 가능, 재할당 가능
  • 범위 = 전역, 지역 ( 함수 )
  •  var은 반복문 안에서 변수가 공유되는 문제가 있음
      -비동기인 setTimeout 함수 콜백이 공유되어 실행 시점이 반복문보다 늦거 변수의 값이 동일하게 처리됨
    
        <script>
           for(var i=0; i<10; i++){
              setTimeout(
                 function(){
                     console.log(i);
                 }
              , 100);
           }
        </script>
• let
  • 재선언 불가능, 재할당 가능
  • 범위 = 전역, 지역 ( 블럭 {} ) 
  • let을 사용하여 처리 0~9 까지 출력
        <script>
           for(let i=0; i<10; i++){
              setTimeout(
                 function(){
                     console.log(i);
                 }
              , 100);
           }
        </script>
• const - 상수
  • 재선언, 재할당 불가능 
  • 범위 = 전역, 지역 ( 블럭 {} )
  • 변수 선언시 초기값 필수
• for..of 문
  
  • for in 문과 다르게 index 번호가 아닌 index 번호에 해당하는 값들을 할당한다

<script>
      var arr = [10,20,30,40,50];
      for(var i in arr){
          console.log(i);  //index값 출력
      }

      let arr2 = [10,20,30,40,50];
      for(let value of arr2){
          console.log(value); //배열원소의 값만 전달
      }

      let str = '홍길동입니다';
      for(let value of str){
          console.log(value); //배열원소의 값만 전달
      }
</script>

• 탬플릿 리터럴
  • `` ( 백팁 )
    • 문자열 안에 표현식을 포함시킬 수 있고, 여러 줄 작성을 허용하여 간편하게 문자열을 만들 수 있다

        const user = [{
            name : '홍길동',
            age : 30,
            job : 'programer'
        },
        {
            name : '이은경',
            age : 50,
            job : '사춘기소년'
        },
        {
            name : '양진성',
            age : 40,
            job : '예비군'
        }
    ];
        console.log(user.length);
        let html = `<table border="1">
                    <thead>
                        <tr>
                            <th>이름</th>
                            <th>나이</th>
                            <th>직업</th>
                        </tr>
                    </thead>
                    <tbody>
                        `;
                        for(let i in user){
                            html+=    `
                            <tr>
                                <td>${user[i].name}</td>
                                <td>${user[i].age}</td>
                                <td>${user[i].job}</td>
                            </tr>
                            `
                        };
                        // i에 객체 한 덩어리씩 i 에 할당된다
                        // for(let i of user){
                        //     html +=`
                        //     <tr>
                        //         <td>${i.name}</td>
                        //         <td>${i.age}</td>
                        //         <td>${i.job}</td>
                        //     </tr>
                        //     `
                        // }
        html +=     `;
                    </tbody>
                    </table>`;
        document.getElementById('user').innerHTML = html;

• 태그드 탬플릿 리터럴

    function big(str,a,b){
        let bigger;
        bigger = (a>b) ? 'A' : 'B'; // 3항 연산자 a가b보다 클 경우 B를 대입
        return str[0] + bigger + '가 더 큽니다';

        console.log(str,a,b)
    }
    
    let a = 100;
    let b = 200;

    let str = big`A와 B둘중 ${a} ${b}`; // 함수 호출문

    console.log(str);

    // function big(str,a,b){
    //     let bigger;
    //     bigger = (a>b) ? 'A' : 'B';
    //     return str[0] + bigger + str[1];
    // }

    // let a = 100;
    // let b = 200;
    // let str = big`A와 B 둘중 ${a}가 더 큽니다 ${b}`;

    // console.log(str)

• Includes function =>  특정 원소가 포함되는지 여부를 쉽게 확인할 수 있다.

        let arr=[10,20,30,40,50];
        let arr2=['바나나','사과','배','참외','수박'];
        let str='good morning';

        // let onoff = false;

        // for(let value of arr2){
        //     if(value == '참외'){
        //         onoff = true;        
        //     }
        // }
        // console.log(onoff);

        console.log(arr.includes(30)); // true -> 배열 원소 중 30이 포함되어 있는가?
        console.log(arr2.includes('참외')); // true -> 배열 원소 중 '참외'가 포함되어 있는가?
        console.log(str.includes('m')); // true -> 문자열에 'm'이 포함되어 있는가?
        
        console.log(arr.includes(30,2)); // true -> index 2 이상에서 30이라는 값이 있는가?
        console.log(arr2.includes('사과',2)); // false  -> index 2 이상에서 '사과'라는 값이 있는가?

• Object.values function => 객체의 속성값을 열거하여 배열의 원소로 만든다

let obj = {1:'바나나',2:'사과',3:'배',4:'참외',5:'수박'};
let arr = Object.values(obj);
console.log(arr);

// let arr = [];
// for(let i=0; i<5; i++){
//     arr[i] = obj['key'+(i+1)];
// }
// console.log(arr);

• padStart, padEnd function

let str = '-morning';
let str2 = 'morning-';

let padString = str.padStart(20, 'good'); // str 문자열 앞에 'good'문자열을 20자가 될때까지 반복하여 채워넣음
console.log(padString);

let padString2 = str2.padEnd(20, 'good'); // str 문자열 뒤에 'good'문자열을 20자가 될때까지 반복하여 채워넣음
console.log(padString2);

• 펼침 연산자
  • 펼침 연산자는 (...)으로 표기한다
  • 객체 속성 전부를 한번에 다른 객체 속성에 포함시킬 수 있다
  • 함수 인수에 활용하여 한꺼번에 인자를 전달 받을 수 있다
  • 객체 넘길 때에는 새로운 객체 안에 넣어서 파라미터로 넘겨야하고, 받을 때도 새로운 객체 안에서 받는 형태여야만 가능
  • 그게 아닐 시 TypeError: Found non-callable @@iterator 에러남!!

       //배열 원소 전부를 한 번에 다른 리터럴 배열 원소에 포함
       let arr = [1,2,3];
       let arr2 = [0,arr[0],arr[1],arr[2],4,5];
       console.log(arr2);

       let arr3 = [1,2,3];
       let arr4 = [0,...arr3,4,5]; //펼침 연산자 사용
       console.log(arr4);

        //배열 원소 전부를 한 번에 함수 인수에 전달
       let arr5 = [10,20,30];
       function foo(p1,p2,p3){
        console.log(p1,p2,p3);
       }
       foo(arr5[0],arr5[1],arr5[2]);

       let arr6 = [10,20,30];
       function foo(p1,p2,p3){
        console.log(p1,p2,p3)
       }
       foo(...arr6); //펼침 연산자 사용

       let obj = {p1:10, p2:20};
       let obj2 = {p3:30, p4:40};
       obj2.p1 = obj.p1;
       obj2.p2 = obj.p2;
       console.log(obj2);
       
       let obj3 = {p1:10 , p2:20};
        let obj4 = {...obj3, p3:30 , p4:40}; //펼침 연산자 사용
        console.log(obj4);

        //객체 속성 전부를 한 번에 함수 인수에 전달
        let obj5 = {p1:10 , p2:20}; 
        function foo2({p1, p2}){ // 파라미터를 객체화
            console.log(p1, p2);
        }
        foo2({...obj5}); //펼침 연산자 사용 // 파라미터에 전달하는 인자를 객체화

    
    //TypeError: Found non-callable @@iterator 에러남
    // let obj5 = {p1:10 , p2:20};
    // function foo2(p1, p2){
    //     console.log(p1, p2);
    // }
    // foo2(...obj5);

• arguments 객체 펼침 연산자

let arr = [2,3,4];

function myFunction(){
    let arr2 = [0,1, ...arguments, 5,6];
    console.log(arr2)
}
myFunction(...arr);

function aaa(){
    console.log(arguments[0],arguments[1],arguments[2]);
}
aaa(100,200,300)