[VUE, JS, ES6] Arrow Function 화살표 함수 사용법
2023. 2. 10. 11:29ㆍ会社 회사/Frontend
- 화살표 함수(Arrow Function)는 무엇인가?
- 화살표 함수(Arrow Function)가 필요한 이유는?
- 화살표 함수(Arrow Function)를 어떻게 사용하는가?
- 화살표 함수(Arrow Function)의 사용 예시!
1. 화살표 함수(Arrow Function)는 무엇인가?
화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.
- this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
- new.target키워드가 없습니다.
- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
- 생성자(Constructor)로 사용할 수 없습니다.
- yield를 화살표 함수 내부에서 사용할 수 없습니다.
2. 화살표 함수(Arrow Function)가 필요한 이유는?
- 선언된 변수에 function(){return value} 를 담아야 할 때 주로 사용한다.
즉, 기존 변수따로 함수 따로 작성해 길게 늘어진 코드가 짧으면 한 줄로 사용이 가능하다.
3. 화살표 함수(Arrow Function)를 어떻게 사용하는가?
변경 전 기존 함수 문법
let func = function(arg1, arg2, ...argN) {
return expression;
};
변경 후 Arrow Function 형태의 문법
let func = (arg1, arg2, ...argN) => expression
4. 화살표 함수(Arrow Function)의 사용 예시!
/* 변경 전 함수 문법
let sum = function(a, b) {
return a + b;
};
*/
/* 변경 후 함수 문법 */
let sum = (a, b) => a + b;
/* 결과 생성된 함수 사용법 */
alert( sum(1, 2) ); // 결과 : 3
'会社 회사 > Frontend' 카테고리의 다른 글
[VUE, JS] Vue.js에서 Vuex와 함께 동적 컴포넌트(다이나믹 컴포넌트) 사용하기 (0) | 2023.02.13 |
---|---|
vue JS - 프로젝트 생성후 브라우저에 띄워보자. (0) | 2021.11.25 |
vsCode vue.js - 시작 & 준비 & 꿀팁 (0) | 2021.11.24 |