티스토리 뷰

화살표 함수란?

화살표 함수는 함수표현식보다 단순하고 간결한 문법으로 함수를 만드는 것입니다.

화살표 함수는 아래 함수처럼 문법의 생김새를 차용하여 지어졌습니다.

let func = (arg1,arg2, ...argN) => expression

위 함수를 좀더 알아보기 쉽게 하자면 

let add = (a, b) => a + b;

이렇게 할수가 있습니다.

말로 풀어 설명하면 add를 호출하면 a와 b의 인자 값을 받아와서 더한뒤 그값을 리턴한다입니다.

 

즉, 위 화살표 함수는 아래의 

let add = function(a, b){
	return a + b;
}

이 함수의 축약형이라고 볼수가 있습니다. 훨씬 간단하고 알아보기 쉽게 함수를 만든 것입니다.

 

화살표 함수의 선언방법

1. 매개 변수가 한 개인 경우에는, 소괄호를 생략 할 수 있습니다.

let add = a => a + 10;

2. 매개 변수가 여러 개인 경우와 매개 변수가 없는 경우는, 소괄호를 생략할 수 없습니다.

// 매개변수가 없는 경우
let add = () => 5 + 10;

// 매개 변수가 여러개 있는 경우
let add = (a, b) => a + b;

3. 함수의 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있고, 암묵적으로 return이 됩니다.

let add = (a, b) =>{ return a + b}; // 이부분의 return과 {}생략 가능
let add = (a, b) => a + b;

4. 객체를 반환할 때에는 소괄호를 사용해야합니다.

let func = (a, b) => ({a:a,b:b});

 

5. 표현식, 또는 구문이 여러개인 함수일때는 중괄호와 return지시자를 사용해서 명시적으로 결괏값을 반환 해야합니다.

let add = (a, b) =>{ // 중괄호는 본분이 여러줄로 구성되어 있다는 것을 알려줌.
	let result = a + b;
	return result; // 중괄호를 사용하면 return지시자로 반환.
}

 

 

화살표 함수의 호출

1. 화살표 함수는 익명함수로만 사용할수 있기 때문에 함수 표현식을 사용합니다.

let add = function(a, b){
return a + b;
}
console.log(add(5,10)) //15

위 방법을

let add = (a, b) => a + b;
console.log(add(5,10))//15

이렇게 간단하게 표현할수 있습니다.

 

콜백함수로도 사용할수 있습니다.

let nums = [5, 10, 15];
let add = nums.map(function(num){
	return num + num;
})
console.log(add); //10, 20, 30

이 방식을 화살표 함수를 사용하여

let nums = [5, 10, 15];
let add = nums.map(num => num + num);
console.log(add); //10, 20, 30

이렇게 간단하게 표현할수 있습니다.

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊

'프로그래밍 기초 > JavaScript' 카테고리의 다른 글

JavaScript에서의 this란?  (0) 2024.01.02
구조 분해 할당이란?  (1) 2024.01.02
TIL 6일차 + JavaScript 기초  (2) 2023.12.29
자바 스크립트로 CRUD구현하기  (4) 2023.12.26
fetch란?  (1) 2023.12.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함