[JavaScript] arrow function (화살표 함수)

ES5에서 ES6로 버전으로 업데이트 되면서 편리한 함수들이 많이 생겼고 그 중에 하나가 새로운 함수선언방식인 arrow function이다.

arrow function이란?
일반 함수에서 'function' 키워드와 식별자를 지우고 소괄호()와 중활호{} 사이에 '=>'를 추가한 것이다.

//일반 함수
function sum(num1, num2){
	return num1+num2;
}

//화살표 함수
const sum = (num1,num2) => {	//식별자를 추가해서 호출할 수 있게 해야한다.
	return num1+num2;
}

const result = sum(10,20);
console.log(result);	//30

화살표 함수의 함수의 특징을 더 알아보자.

const sum = (num1,num2) => {	//식별자를 추가해서 호출할 수 있게 해야한다.
	return num1+num2;
}

1. 화살표 함수의 내용에서 중괄호 안에 바로 return문이 나올 시, 더 간단하게 줄일 수 있다.

어떻게? 중괄호를 지우고, return 키워드를 지워주면 된다!

const sum = (num1,num2) => num1+num2;

2. 만약 전달하고자 하는 매개변수가 1개라면, 더 간단하게 줄일 수 있다.

어떻게? 소괄호를 지울 수 있다.

const pow = x => x * x;	// 원래는 const pow = (x) => x * x;
const result = pow(10);
console.log(result);

3. 만약 전달하고자 하는 매개변수가 0개라면?

그냥 소괄호만 적어주면 된다.

const; printPie = () => 3.14;
const result = printPie();
console.log(result);

4. 반환하는 값이 객체인데, 1번처럼 중괄호 안에 바로 return문이 나온다면?

const getObject = () => {
	return {
    	name: "철수",
        age: 20
     }
}
const obj = getObject();
console.log(obj.name);

먼저 1번처럼 끝에 있는 중괄호를 빼주고 return 키워드를 제거한다.

const getObject = () => {
    name: "철수",
    age: 20
}

그런데 이렇게 보니까 중괄호가 화살표함수의 가장 겉에 있는 중괄호처럼 보이게 된다.
그래서 소괄호로 한번 더 감싸야한다.

const getObject = () => ({
    name: "철수",
    age: 20
});