화살표 함수 (feat. in React)

 

사용 이유 

기존 function 표현에 비해 구문이 짧다(and 자신의 this, arguments, super또는 new.target을 바인딩 하지 않는다).

 

특징

항상 익명함수로 사용되며, 생성자로 사용될 수 없다.

const Family = [
'dad',
'mom',
'brother',
'sister'
]

console.log(Family.map(member => member));

 

위의 화살표 함수의 코드를 해설하자면 🔽

Family.map(member => {
	return member
    });
    
// 아래 코드는, 
// 1. member에 괄호를 쓰지 않았다 => parameter가 하나 뿐이기에 괄호 사용은 선택사항
// 2. return과 그것을 감싸는 중괄호{}를 없앴다 => 화살표함수의 유일한 문장이 'return'일 때 가능

 Family.map(member => member);

 

하지만 리액트에서는,

JSX문법을 따르기 때문에 중괄호를 선언해줘야 한다.

 Family.map(member => {
 	member
    });

 

추가

매개변수가 없는 함수를 화살표 함수로 표현할 땐,  아래 코드처럼 빈 괄호를 사용한다.

// function 표현식
function add() {
	...
}

// 화살표 함수 표현식
add = () => {
	...
}

 

출처: developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98