화살표 함수
- 자바의 람다식과 동일
- function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 선언하는 방식
- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
- 이벤트 리스너 처리에 사용
- this 가지지 않음
- 메서드 작성 시 this를 사용해야 한다면 화살표함수는 이용하지 않는 것이 좋음
- 화살표 함수 내부에서 this 사용하면 그 this는 외부에서 값을 가져옴 (윈도우 전역 객체를 가리킴)
매개변수 => { 실행 부분 } // function 키워드 지우고 인수 뒤에 => 붙이기
( ) => { return name; } // 매개변수가 없는 경우. 괄호 생략 불가
x => { … } // 매개변수 1개인 경우. 괄호 생략 가능
(x, y) => { …. } // 매개변수가 여러 개인 경우. 괄호 생략 불가
x => x * x // 수행 문장이 한 줄인경우 중괄호 생략 가능
let add = function(num1, num2) {
return num1 + num2;
}
// 이 함수를 화살표 함수로 바꾸면 아래와 같다.
let add = (num1, num2) => {
return num1 + num2;
}
// 실행문이 한 줄이라면 괄호 생략 가능
let add = (num1, num2) => return num1 + num2;
// 인수가 하나라면 괄호 생략 가능
let sayHello = name => return `Hello, ${name}`;
// 인수가 없는 함수는 괄호 생략 불가능
let showError = () => alert('error!');
//실행문이 return 뿐이라면 { }를 ( )로 변경 가능
const add = (num1, num2) => ( num1 + num2; )
//실행문이 return 뿐이라면 괄호와 return 생략 가능
const add = (num1, num2) => num1 + num2;
예제 1 - 익명 함수에 화살표 함수 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// 화살표 함수
// 익명 함수, 매개변수 2개, 반환값 a+b
let sum = (a, b) => a+b;
// 익명함수 sum에 화살표함수 사용하지 않은 경어
/* let sum = function(a, b) {
return a+b;
} */
alert(sum(10, 20));
</script>
</head>
<body>
</body>
</html>
예제 2 - forEach() 함수를 화살표 함수를 사용해서 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// forEach 함수를 화살표 함수를 사용해서 변경
var fruits = ["사과", "포도", "복숭아"];
// 기존 코드
/* fruits.forEach(function(item, index, fruits){
document.write(index + " " + item + " " + fruits + "<br>");
}) */
fruits.forEach((item, index, fruits) =>
document.write(index + " " + item + " " + fruits + "<br>"));
</script>
</head>
<body>
</body>
</html>
'Frontend > Javascript' 카테고리의 다른 글
| 자바스크립트 객체 (Object) - 내장 객체 (0) | 2021.12.09 |
|---|---|
| 디폴트 매개변수 (0) | 2021.12.09 |
| 콜백 함수 (Callback Function) (0) | 2021.12.09 |
| 익명 함수 (Anonymous Function) (0) | 2021.12.09 |
| 조건문 문자 비교 (0) | 2021.12.09 |