# Arrow function

Doozuu·2022년 11월 2일
0

Javascript

목록 보기
10/99

⭐️ Arrow function은 function을 대체하는 문법이 아니다.


함수를 만드는 이유

  1. 큰 기능을 만들 떄
  2. 입출력 기계를 만들 때


함수 만드는 방법

1. 기존 방식

function 함수명(){

}

혹은

var 함수명 = function() {

}

2. arrow function

function 키워드 대신 => 사용

function 키워드 대신 => 사용
var 함수명 = () => {

}


arrow function의 장점

1. 입출력 기계를 보다 직관적으로 작성할 수 있음

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

2. parameter가 1개면 소괄호 생략 가능

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

3. 코드가 한 줄이면 중괄호도 생략 가능(+ return도)

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

예제)

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


arrow function의 특징

: 바깥에 있던 this 값을 내부에서 그대로 사용.

  • 함수 내의 this 값을 변경시키지 않음.
  • 잘못 사용하면 의도와 다르게 적용될 수 있음!

예제 1)

document.getElementById('버튼').addEventListener('click', (e) => {
this;
})
  • 일반 함수로 썼다면 this는 event listener에 의해 e.currentTarget(즉, button)이어야 하지만, 화살표 함수로 썼기 때문에 바깥에 있는 this 값이 적용되어 window가 됨.
  • 화살표 함수를 유지하면서 이벤트 적용 대상을 가져오고 싶을 때는 this 대신 e.currentTarget 사용.

예제2)

object 안에 함수를 만들 때 화살표 함수로 만들어도 되는가?

정답 : 된다. 하지만 위와 마찬가지로 화살표 함수를 썼을 때는 바깥에 있는 this 값이 적용되므로, this가 해당 함수의 상위 오브젝트를 나타내게 하고 싶을 때는 일반 함수로 써준다.




출처 : 코딩애플 | 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법

profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글