[Javascript] 화살표 함수(Arrow Function)

💡

화살표 함수(Arrow Function)

ES6부터 도입된 문법. function 키워드를 사용해 함수를 만드는 것보다 간단하게 함수를 표현할 수 있음

 

 

화살표 함수는 함수표현법을 조금 더 간결하게 쓰는 방법에 가깝다.

 

// 함수 표현식
let hello = function() {
     return "안녕하세요";
}
// 화살표 함수
let hello = () => "안녕하세요";

---

화살표 함수의 문법

매개변수

• 매개변수가 한 개 일때는 소괄호 생략이 가능.
• 매개변수가 없거나 여러개일 땐 소괄호 생략 불가능.

// 매개변수가 없을 경우
() => {...}

// 매개변수가 한 개 일때, 소괄호 생략 가능
x => {...}

// 매개변수가 여러 개 일때, 소괄호 생략 불가능
(x,y) => {...}​

 

코드 길이와 Return

• 작성된 코드가 한줄이면서 return문 밖에 없을 때, 중괄호와 return 키워드 생략 가능

// 코드길이 한줄
x => { return x * x }  // x*x 

x => x * x // x*x

• 작성된 코드가 한줄이나, return이 없을 때. 중괄호 생략 불가능

(x,y) => { x + y } ; // undefined

• 작성된 코드가 여러줄 일 때, 중괄호 생략 불가능

(x,y) => {
   let a = x+y;
   let b = x*y;
    
   return a+b;
}

 

객체 반환

• 객체를 반환하려면 소괄호로 감싸야 함.

(x,y,z) => ( { a: x, b: y, c: z } );  // { a: x, b: y, c: z }

 

 

참고 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC