[JavaScript / ES6] this & arrow function 연습문제 풀기

💡 실습 포인트!

💜 문제 1

🤍 간단한 메소드 만들기

var person = {
  name: 'Seoyun',
}

person.sayHi();  // Hi! I'm Seoyun.

• person 이라는 object 가 하나 있는데, 이 object 에 sayHi 라는 함수(메소드)를 하나 추가하고자 한다.
• 위의 코드처럼 person.sayHi() 라고 코드를 작성하면 콘솔창에 'Hi! I'm Seoyun.' 이라는 글자가 나와야 한다.
• 'Seoyun' 이라고 이름을 하드코딩하는 게 아니라 실제 object 내에 있는 name 에 해당하는 값이 출력되도록 해보자.

 

Q. sayHi() 라는 함수를 어디서 어떻게 만들면 될까?

  var person = {
    name: 'Seoyun',
    sayHi: function(){
      console.log(`Hi! I'm ${this.name}.`)
    }
  }

  person.sayHi();  // Hi! I'm Seoyun.

---

💜 문제 2

🤍 Object 내의 데이터를 전부 더해주는 메소드 만들기

var obj = { 
  data : [1,2,3,4,5] 
};

• 위와 같이 obj 라는 object 자료형이 하나 있다.
• 이 obj 에 add() 라는 함수를 하나 만들어서 사용하고 싶다.

var obj = { 
  data : [1,2,3,4,5] 
};
obj.add();

• 즉, 위와 같이 obj.add() 라고 코드를 작성하면 obj.data 안의 모든 숫자를 더해서 콘솔창에 출력해주어야 한다.

 

Q. 어떻게 코드를 짜면 될까? (단, obj 라는 object 중괄호 내에 코드의 작성은 금지)

  var obj = {
    data: [1,2,3,4,5]
  }

  obj.add = function(){
    var total = 0;
    this.data.forEach(el => total+= el);
    console.log(total);
  }

  obj.add();

---

💜 문제 3

🤍 setTimeout 개념정리하기

setTimeout(콜백함수, ms단위의 시간)

• JavaScript 에는 특정 코드나 함수를 n 초 후에 실행하고 싶을 때 사용하는 setTimeout 이라는 유용한 함수가 있다.

 

setTimeout(function(){ console.log('Hello, world!') }, 1000)

• 예를 들어, 위와 같이 코드를 작성하면 1000ms 후에 왼쪽에 있는 콜백함수 내의 코드를 실행한다.
• 1초 후에 Hello, world! 가 콘솔창에 출력되는 것을 볼 수 있다.

 

function hello(){
  console.log('Hello, world!')
}

setTimeout(hello, 1000)

• 또는 위와 같이 콜백함수 자리에 직접 미리 만들어둔 함수를 넣어서 사용할 수도 있다.
• 단, 콜백함수 자리에 만들어둔 함수를 넣어 사용할 때에는 소괄호는 빼야 한다.

---

🤍 setTimeout 이용해보기

<button id="btn">버튼</button>

<script>

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

</script>

• 버튼을 클릭하면 지금 누른 버튼에 담긴 글자를 콘솔창에 출력하는 기능을 만들었다.

 

Q. 그럼 setTimeout 을 이용하여 1초 후에 this.innerHTML 을 콘솔창에 출력하고 싶으면 어떻게 코드를 수정하는 것이 좋을까?

<button id="btn">버튼</button>

<script>

  document.getElementById('btn').addEventListener('click', function(){
    setTimeout(()=>console.log(this.innerHTML), 1000)
  })

</script>