티스토리 뷰
화살표 함수란?
화살표 함수는 함수표현식보다 단순하고 간결한 문법으로 함수를 만드는 것입니다.
화살표 함수는 아래 함수처럼 문법의 생김새를 차용하여 지어졌습니다.
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 |