화살표 함수 Arrow Function () =>

 

Arrow Function  화살표 함수는 ES6문법으로 function을 대신해서 함수를 간략히 정의 할 수 있고 this를 묶는게 가능합니다.

 

Syntax

(매개변수) => {처리내용}

 

function List() { 처리내용 }

이런식으의 function 함수를 화살표 함수로 표현하면

 

const List = () => { 처리내용 }

이렇게 표현할 수 있다.

 

사용예시

//파라미터(매개변수)가 없는 경우 함수 정의
const f1 = () => console.log('hello'); //처리내용이 한줄인 경우 "{}" 생략가능
f1(); //hello


//매개변수가 하나인 경우1
const f1 = a => console.log(a); // "()"생략가능
f1(1); //1


//파라미터가 하나인 경우2
const f1 = (a)=> {
	return a + 2;
}
f1(1); //3


//파라미터가 여러개인 경우
const f1 = (a, b) => { return a + b };
f1(10, 5); //15


//{}를 사용하고 return이 없을 경우
const f1 = (a, b) => {a + b};
f1(10, 5); // undefined


// {}를 생략하고 return을 생략한 경우
const f1 = (a, b) => a + b;
f1(10, 5); // 15


// 처리내용이 여러줄일 경우
const f1 = (a, b) => {
	const result = a + b;
    return result;
}
f1(1, 2); //3


//객체 배열을 반환할 경우
const f1 = () => {
	return {
    	a:1,
        b:2
    }
}
f1();


//객체 배열 반환 간단히 하기
const f1 = () => ({
    a:1,
    b:2
});

f1();

 

• 파라미터가 하나인 경우 () 생략이 가능하다.
• 파라미터가 2개 이상이거나 없는 경우에는 ()를 생략할 수 없다.
• 화살표 함수 정의가 한 줄인 경우에는 {}와 return을 생략할 수 있다.
• {}가 있는 경우 반환할때 return을 생략할 수 없다.
• 함수 정의가 여러줄일 경우에는 {}를 써야 한다.
• 객체 배열의 return과 {}를 생략할 경우 ()로 감싸줘야 한다.

 

 

화살표 함수의 특징

• 화살표 함수는 익명 함수로만 만들 수 있다.
• 화살표 함수는 생성자로 사용할 수 없다.
• 화살표 함수는 함수가 정의된 스코프에 존재하는 this를 가르킨다.
• 화살표 함수는 생성될 때 this가 결정된다.