23_11_13 JS공부정리

[코딩애플] ES6기초모듈

 

this
1.그냥 쓰거나 일반 함수 안에서 쓰면 {window}
*사실 브라우저가 js파일을 해석할때 가장 큰 객체인 window를 생성하고 그안에서 함수와 변수를 담음.

따라서 객체에 담겨있지 않는 this들은 가장 큰 객체인 window를 가리키게 됨.

'use strict'; : 엄격모드
=> x = 300 이 안됨. var,let,const써야함
=> 일반함수안에서 this는 undefined가 됨

2. 오브젝트 내의 함수안에서 쓰면 그 함수를 가지고 있는 오브젝트를 가리킴.

    const obj = {

        data : "kim",

        함수 : function() {

            console.log('안녕')

        }

    }

    console.log(obj.함수()); // { data : "kim", 함수 : function() {console.log('안녕')} }

* () => {} 를 사용하면 어느 오브젝트에 담던 간에 this는 window를 가리킴

 

생성자함수 (constructor)

-비슷한 객체를 여러개 만들고 싶을때 사용

3.생성자함수 안에서의 this는 instance라고 부름.

    function 기계() {

        this.이름 = "kim"

    }

    var 오브젝트 = new 기계(); // 기계 {이름: "kim"}

 

4.addEventListener 안에서 this는 e.currentTarget과 같음

    document.querySelector('input').addEventListener("click", function(e) {

        console.log(this.value) //e.currentTarget.value

    })

 

 

case 1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는? 

 

이런 코드를 쓴다고 가정해봅시다. 

 

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

이벤트리스너 안에서 forEach() 라는 반복문을 사용했습니다. 

forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 집어넣어서 사용하게 되어있습니다. 그래서 넣었습니다. 

(* 콜백함수는 그냥 함수 안에 파라미터역할로 들어가는 함수를 뜻합니다. 그게 다임)

하지만 솔직히 forEach가 무슨 역할을 하는지는 모르셔도 이건 알 수 있습니다. 

 

Q. 위의 코드에서 this를 출력하면 무엇이 나올까요? 

뭐가 나오냐면

바로 답보지말고 한참동안 생각을 해보도록 합시다.  

생각이 안나시면 지금까지 배웠던 this의 1,2,3,4번 뜻을 각각 대입해보세요. 

그럼 뭡니까.

 

4번뜻에 의하면.. eventlistener 안에서 쓴 건 아닙니다.

eventlistener내부는 맞지만 그 안에서 function을 하나 더 만났기 때문에 의미가 변합니다. 

3번뜻에 의하면.. constructor는 아닌 것 같습니다. 

실은 this의 1번이나 2번뜻이 맞습니다. 

저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력됩니다. 

 

this의 값은 this가 어떤 함수안에 들어있는지만 잘 체크하시면 바로 아실 수 있습니다. 

[collapse]

 

 

 

 

 

 

case 2. 오브젝트 안에서 콜백함수를 쓴다면 this는? 

 

이번엔 이런 코드를 쓴다고 가정해봅시다. 

 

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(function(){
        console.log(this)
      });
  }
}

오브젝트라는 오브젝트 안에 이름들, 함수라는 자료를 각각 저장했습니다 .

함수라는 자료 안에 forEach 반복문을 돌렸는데,

 

Q .그럼 여기 안에서의 this값을 출력하면 뭐가나올까요? 

 

뭐가 나오

역시 잘 대입을 해보시면 되겠습니다. 

this값을 판단하실 땐 가장 가까이 있는 함수를 살펴보시면 됩니다. 

 

forEach() 안에 있는 함수에 this가 들어있죠?

근데 이 함수는 무슨 뭐 특별한 역할을 하는 함수인가요?

아닙니다. 그냥 일반 함수일 뿐입니다. 

그래서 이것도 window입니다. 

 

*콜백함수는 window를 출력

 

그래서 this값은 function을 만날 때마다 바뀔 수 있기 때문에

내가 원하는 this를 쓰기 힘든 경우가 있습니다. 

그럴 땐 함수를 arrow function으로 바꿔보시길 바랍니다. 

 

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(() => {
        console.log(this)
      });
  }
}

자바스크립트 ES6 문법 중,

function () {} 대신 쓸 수 있는 () => {} 이라는 arrow function 문법이 있습니다. 

똑같이 함수 만드는 문법입니다. 

이걸 쓰시면 함수 내부의 this값을 새로 바꿔주지 않기 때문에(arrow function은 바로 위에있는 this를 가져옴)

this를 사용하실 때 유용합니다. 

 

 

arrow function의 장점
1.입출력 기능을 만들때 보기 쉬움

 

var 함수 = (a) => {return a + 10}

 

2.파라미터 1개면 소괄호 생략가능
3.return이 한줄밖에 없으면 중괄호도 생략가능

 

var 함수 = (a) =>  a + 10

 

 

Arrow function 예시

1.forEach 콜백함수

 

[1,2,3,4].forEach( e => console.log(e))

 

2.이벤트리스너

 

<button id="버튼">버튼이에요</button>

 

<script>

document.getElementById('버튼').addEventListener('click', function(){

    setTimeout(() => {console.log(this.innerHTML)},1000)

    //arrow function안에 있기 때문에 상위의 this인 e.currentTarget을 가져옴

  });

 

//위 코드와 동일

document.getElementById('버튼').addEventListener('click', function(){

    const 버튼 = this

    setTimeout(function() {console.log(버튼.innerHTML)},1000)

  });

</script>

 

 

3.Object 안의 함수

var 사람 = {

    name : "손흥민",

    sayHi : () => {

        console.log(`안녕`)

    }

}

사람.sayHi();

 

 

            재선언 재할당         범위
var           O          O       함수스코프
let             X          O      블록스코프
const        X          X       블록스코프

 

Object.freeze(객체); : 객체를 수정불가능하게 만드는 함수. 재할당은 물론 객체내의 수정도 안됨