[SeSAC DT 과정] JS this 개념, 화살표 함수, template literals, spread operator

1️⃣ this

1. 전역에서 쓰인 this는 window 객체를 반환

   function fnc1(){
               console.log(this);//일반함수 안의 this는 window를 가르킴
           }

2. 객체의 메서드(function)에서 사용된 this는 메서드를 담고 있는 객체를 반환

   const item ={
               name:'luna',
               hi:function(){
               console.log('Hi, ' + this.name)//Hi, luna
               }
           }
           item.hi();//메서드 호출

3. 생성자 함수에서 this는 새로 생성되는 객체(인스턴스)를 반환

   function people(name,age){
               this.name='tammy',
               this.age=30
   }//people 생성자 , this는 새로 생기는 object(instance)를 가르킴
           const p1 = new people();
           console.log(p1);//age: 30 name: "tammy"

4. 이벤트 리스너 안에서 this는 현재 동작하는 곳(이벤트 객체의 속성 : currentTarget)

   const btn = document.getElementById('btn')
   btn.addEventListener('click', function(e){
               console.log(e.currentTarget);
               console.log(this);//위와 같은 결과(btn)
           })

5. forEach 안에서 this는 일반함수로 취급, window 객체 반환

• forEach() -> j쿼리의 each
  Array 객체 메서드
  forEach(function(a,b,c){})

  const btn = document.getElementById('btn')
  btn.addEventListener('click', function(e){
              var arr1=['2020', '2021', '2022'];
              console.log(this);//btn 출력
              arr1.forEach(function(a){
                  console.log(this);//일반함수로 취급 -> window 출력
              })
          })

6. 화살표 함수 안에서 this는 상위 this 값을 그대로 적용. 새롭게 정의되지 않음

   btn.addEventListener('click',(e)=>{
               const arr1=['2020', '2021', '2022'];
               console.log(this);//window(새롭게 정의되지 않고 상위 요소로 this 가져옴)
               console.log(e.currentTarget);//화살표 함수로 쓰려면 currentTarget으로 출력
               arr1.forEach((a)=>{
                   console.log(this);//window, 여기만 화살표 함수로 바꾸면 button 출력
               })
           })

2️⃣ 화살표 함수

• function(){} 의 형식이 ()=>{} 이렇게 바뀜; (매개변수) => {실행될 코드}

  • 파라미터가 한 개이면 소괄호 생략 가능,중괄호 블럭 안이 return 한 줄 일때 중괄호와 return 생략 가능
    • const fnc1= (num) => {return num 2};
      (생략 ->) const fnc1= num => num 2;
  • Arrow function 내부의 this는 밖에 있는 상위요소의 this를 그대로 상속받는다.

// function fnc1(num1){
//     return num * 2;
// }
   const fnc1= (num)=> num * 2;//화살표 함수
        console.log(fnc1(5));//10

3️⃣ template literals

• 백틱 Backtick ``를 사용해서 문자를 적는다.
  • 엔터키로 줄바꿈 가능
  • 문자 중간에 변수 삽입 ${변수명}

    const dayList = `월요일`
    const txt = `오늘은 ${dayList} 입니다.`
    console.log(txt)

  • Tagged Literals(문자와 변수들을 자유롭게 조합)
    첫번째 파라미터로 모든 문자를 받아 배열로 만들어줌
    두번째 파라미터부터는 변수를 받아 원하는 곳에 삽입할 수 있음

    const txt2 ='Ellen';
    function txtBox(a,b){
        console.log(a[0]);//Hi,
        console.log(b)
    }
    txtBox `Hi, ${txt2} nice to meet you.`;//백틱 내용이 txtBox 함수의 매개변수로 들어감(a는 배열로 문자열을 받고 b는 변수를 받음, 변수가 여러 개라면 그 만큼 인자 추가해야함)

4️⃣ spread operator

• function 소괄호, Object 중괄호, Array 대괄호 안에서 사용
• 연산기호 : … (마침표 3개)
• 괄호가 제거되는 연산자
• 문자에서는 철자 하나하나씩 펼쳐짐

    const arr1=['월요일','화요일','수요일','목요일','금요일'];
          console.log(arr1[0])//월요일
          console.log(...arr1)// 월요일 화요일 수요일 목요일 금요일, 배열을 펼쳐서 호출(배열 요소 단위로)
          var txt1 = '오늘은 월요일 입니다.'
          console.log(...txt1[1])//늘, 문자열 펼쳐서 호출(철자 단위로)

  const arr1=[1,2,3,4,5]
    //var arr2=arr1; //값이 독립적이지 않고 공유됨
   const arr2=[...arr1] // 공유 x, 값을 복사할 때 유용
    arr1[5]=6;
    arr1[6]=7;
    console.log(arr1)//[1, 2, 3, 4, 5, 6, 7]
    console.log(arr2)//[1, 2, 3, 4, 5]