{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"629527d5-a071-53e9-9e14-8ac8acbd5699","excerpt":"Arrow Function 화살표 함수는 익명 함수로만 사용 가능하다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다. function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다. 일반 함수의 this 일반 함수의 경우는, 해당 함수를 호출하는 패턴에 따라 this에 바인딩되는 객체가 달라진다. 콜백 함수 내부의 this는 전역 객체 window를 가리킨다. 화살표 함수의 this 화살표 함수는 언제나 자신을 포함하는 외부 스코프에서 this…","html":"

Arrow Function

\n
// 매개변수에 따라 차이\n() => { ... } // 매개 변수 없을 경우\nx  => {...} // 한 개인 경우에, 소괄호 생략 가능\n(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.\n\n// 함수 몸체 지정 방법\nx = { return x * x} // single line block\nx = > x * x // 함수 몸체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return 된다.\n            // 위 표현과 동일하다.\n\n() => { return { a: 1}; }\n() ==> ({ a: 1 })  // 위와 동일. 객체 반환시에 소괄호를 사용한다.\n\n\n() => { // multi line block\n  const x = 10;\n  return x * x;\n}
\n\n

일반 함수의 경우는, 해당 함수를 호출하는 패턴에 따라 this에 바인딩되는 객체가 달라진다. 콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

\n\n

화살표 함수는 언제나 자신을 포함하는 외부 스코프에서 this를 계승받는다. 다시 말해 화살표 함수는 자신만의 this를 생성하지 않고 자신을 포함하고 있는 상위 컨텍스트로부터 this를 계승 받는다. 이를 Lexical this라 한다.

\n\n
// Good\nconst person = {\n  name: 'Kim',\n  sayHi() {\n    // === sayHi : function() {\n    console.log(`Hi ${this.name}`)\n  },\n}\n\nperson.sayHi() // Hi Kim
\n\n

addEventListener 함수의 콜백 함수

\n

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다. (앞의 설명처럼 화살표 함수는 자신만의 this를 생성하지 않고 상위 컨텍스트에서 this를 계승받기 때문.)

\n
// Bad\nvar button = document.getElementById('myButton')\n\nbutton.addEventListener('click', () => {\n  console.log(this === window) // => true\n  this.innerHTML = 'Clicked button'\n})
\n

따라서 addEventListener 함수의 콜백 함수에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 한다. 일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다. 아래의 경우는 이벤트 리스너의 타겟인 button을 가리킴.

\n
// Good\nvar button = document.getElementById('myButton')\n\nbutton.addEventListener('click', function() {\n  console.log(this === button) // => true\n  this.innerHTML = 'Clicked button'\n})
\n

학습 : http://poiemaweb.com

","frontmatter":{"title":"ES6 Arrow Function","date":"September 11, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180911 ES6 Arrow Function/","previous":{"fields":{"slug":"/til/20180910 ES6 let, const, Template literal/"},"frontmatter":{"title":"ES6 let, const, Template literal","category":"TIL"}},"next":{"fields":{"slug":"/til/20180912 ES6 Rest parameter, Spread Operator (배열, 객체 다루기)/"},"frontmatter":{"title":"ES6 Rest parameter, Spread Operator (배열, 객체 다루기)","category":"TIL"}}}}