this & arrow function 퀴즈

해당 퀴즈의 중점은 function의 사용방법으로 인해서 변하게 되는 this의 의미를 잘 구분하는 것이 포인트이다.

해당 개념을 잘 구분할 수 있다면 아래 문제를 풀수 있을 것!

 

Q. 이 this는 출력하면 뭐가 나올까요?

var 오브젝트2 = {
  data : {
    간지함수 : function(){ console.log(this) }
  }
}
오브젝트2.data.간지함수();

 

답은 console창에 쳐보는 걸로.

window

 

 

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

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

답은?

1,2,3

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

답은?

window

 

 

Q. 아래 코드가 주어졌을 때, sayHi()라는 함수를 어디서 어떻게 만들면 될까요? 

var 사람 = {
  name: '손흥민',
}

사람.sayHi(); //안녕 나는 손흥민

  var 사람 = {
    name: "손흥민",
    sayhi: function () {
      console.log("안녕 나는 " + this.name);
    },
  };
  사람.sayhi();

 

 

Q. 아래 코드가 주어졌을 때, 어떻게 코드를 짜면 될까요? 

조건) 위에있는 자료라는 object 중괄호 {} 내에 코드 작성 금지 

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

  var 자료 = {
    data: [1, 2, 3, 4, 5],
  };
  자료.전부더하기 = function () {
    var sum = 0;
    자료.data.forEach(function (a) {
      sum = sum + a;
    });
    console.log(sum);
  };

  자료.전부더하기();

 

Q. 아래 코드가 있을때, setTimeout을 이용해서 1초 후에 this.innerHTML을 콘솔창에 출력하고 싶으면 어떻게 코드를 수정해야할까요?

1초 후에 '버튼이에요'라는 글자가 콘솔창에 등장하면 성공입니다. 

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

<script>

  document.getElementById('버튼').addEventListener('click', function(){
    console.log(this.innerHTML)
  });

</script>

  function 함수() {
    console.log(this.innerHTML);
  }
  document.getElementById("버튼").addEventListener("click", function () {
    setTimeout(() => {
      console.log(this.innerHTML);
    }, 1000);
  });