13.Arrow function - ES6

---

1.기본적인 함수

• 기본적으로 코드들을 기능으로 묶고 싶을때 함수를 사용합니다.

• 입출력 기계를 만들고 싶을때 함수를 사용합니다.

function def() {
  
}

const def = function () {
  // 변수에 담아서 함수 실행
}

def(); // 함수 실행

2.Arrow function

장점

• 입출력 기계를 만들때 직관적으로 보기가 쉬움 (parameter 입력 => return 출력)

• parameter 가 1개라면 소괄호를 생략해서 사용가능

• 코드 한줄이면 중괄호와 return 도 생략이 가능합니다.

// a 를 집어 넣으면 a + 10 을 출력해주는 함수 입니다.
const def = (a) => a + 10;

def(5);

3.Arrow function 예시

1.forEach 콜백함수

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

2.EventListener

document.getElementById('btn').addEventListener('click', () => {
  console.log('hi')
})

주의!! callback 함수에서 this 를 사용하게되면 global function 인 window 를 출력 하기 때문에 사용할 때 주의 해야 합니다

3.Object

const obj = {
  def: () => {
    
  }
}

obj.def();

• object 안에서도 arrow function 을 사용할 수 있습니다

4. Question

Q. console 창에 ‘Hi I am Jacob’ 이라고 띄우는데 object 안에 있는 name 이 있는 data 와 this 를 사용해서 코드 만들기

const people = {
  name: 'Jacob',
  msg: function() {
    console.log(`Hi I am ${this.name}`)
  }
}

people.msg()

Q. 아래 DB 라는 data 안에 있는 data 를 더하는 함수를 만들어 보기

const DB = {
  data: [1, 2, 3, 4, 5]
}

DB.sum() function () {
  let sum = 0;
  this.data.forEach(function(a) {
    sum += a;
  })
}

DB.sum() // 함수 실행

Q. 버튼을 누르면 this.innerHTML 이 1초 후에 출력되는 기능 만들기

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

• 위의 code 에서 setTimeout 에는 callback 함수를 사용해서 this 가 함수 내부를 가리기는 것이 아니라 그 위에 있는 document.getElementByID 를 가리키로 addEventLister('click') 부분은 일반 함수를 사용해서 this 가 window 를 가리키지 않게 하려면 여기서는 callback` 함수를 사용하면 안됨니다

Reference

• poiemaweb - https://poiemaweb.com/es6-arrow-function