JavaScript에서 function vs 화살표 함수(() => {}) 차이

 

 

 

[ 상황 ]

 

jsp + jquery 프로젝트 중 function() 으로 선언되어있는 함수와 화살표 함수가 섞여있다.

체계적으로 의미를 가지고 분리해둔건가 아닌가 해서 개인적으로 정리해두려한다.

 

---

[ 개념 ]

 

fuction 함수 

 

- 전통적인 함수 선언 방식

- 호출 주체에 따라 this 가 바뀌고, 이벤트 처리에 적합

 

특징 

- this 가 호출한 대상을 가리킴

- 이벤트 핸들러에서 많이 사용

- 선언 전에 호출 가능(호이스팅)

 

 

사용 예시 ) 버튼 클릭한 경우 

function saveFunction(e) {
  // this === 클릭된 버튼
}

 

 

 

화살표 함수 ( () => {} ) 

 

- 간결한 문법의 함수

- 자기 자신의 this를 가지지 않음

 

특징

- this가 상위 스코프 기준으로 고정

- 콜백 함수에 적합

- 짧고 가독성 좋음 

 

사용 예시 1) 

// 배열 처리, ajax 성공 콜백
success: (res) => {
  console.log(res);
}

 

사용 예시 2)

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

 

 

---

 

[ 정리 ]

 

jsp 에서 버튼 클릭이벤트에는 어떤 함수를 써야하는가 ? 

-> function 함수 

 

this 가 필요없다면? 

-> 화살표 함수 가능 

 

이유 

- jQuery 를 사용하는 경우 jQurey 이벤트 핸들러에서 this 는 이벤트를 발생시킨 실제 DOM 요소로 자동 세팅되는데, 

화살표 함수의 경우에 this가 이벤트를 발생 객체를 가져오지 못하므로 function 을 쓰는 것이 적합하다.

 

 

추가 설명 ) 
탭을 클릭한 효과 처럼 클릭한 버튼에 특정 클래스를 주는 경우 예시 

<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>

 

$('button').on('click', function () {
  console.log(this);
});

 

이때는 어떤 버튼을 눌러도 클릭한 버튼만 active 처리된다. 

 

하지만 화살표 함수는 jQuery가 세팅해주는 this를 무시하기 때문에 클릭한 버튼의 정보를 가져올 수 없다. 

$('button').on('click', () => {
  console.log(this); // 버튼 못가져옴 
});

 

 

결국 function 을 써야  jQuery  가 주입한  this를 받을 수 있다. 

 

 

최최최종 정리 

 

jQuery 이벤트 핸들러 → function
그냥 실행하는 로직 함수 → 화살표 함수

 

이벤트 핸들러에서도 이벤트 객체(e)랑 this 안쓰면 화살표 함수 써도 상관없음 ! 

 

this vs e.target 차이

this
- jQuery 가 정해주는 값
- 이벤트를 건 요소
- function 일 때만 정상 동작

e.target
- 실제로 클릭한 요소 
- 화살표 함수여도 사용 가능
- 이벤트 버블링 영향 받음 

// jQuery 정석
$('.btn').on('click', function (e) {
  $(this).addClass('active');
});

// 화살표 써야 할 때
$('.btn').on('click', (e) => {
  $(e.target).addClass('active');
});​

 

---

 

 

요새 AI 로 전부다 뚝딱뚝딱 고쳐서 쓰다보니 막막 쓰다가 오랜만에 정리하는 개념 공부,,,,,,,,,

쓸때 쓰더라도 알고 쓰면 다르겠지,,,,,,,,,,,,,,, 살아남자,,,,,,,,,,,,,,,,,,,,,,파잇ㅇ팅