[JS] 화살표함수 | 난해하다 난해해

화살표 함수

함수의 정의 방식으로, 함수를 간결하게 표현 할 수 있다. 왜 이런걸 만들어서 사람 피곤하게 하니 라고 생각했었지만 자주 보고 쓰다 보면 어느 새 손에 익더라.. (아마도)

 

예시

const add = (a, b) => a + b;
console.log(add(1, 2)); 	// 3

아주 아주 기초적인 `(a+b)`의 결과를 리턴해주는 함수다. 이런 기초적인 코드 구조가 이해 안된다면 코딩은 일찌감치 포기하지 말고 열심히 하십쇼. 정상입니다. 

 

화살표 함수의 특징

• 매개변수가 하나일 경우 소괄호`()` 생략 가능
• 단일 표현식인 경우 중괄호 `{}`와 `return` 키워드 생략 가능

 

이번에는 함수가 어째서 저렇게 변신했는지 차례대로 살펴보자

 

#1 가장 익숙한 함수 모양

// 가장 익숙한 함수 모양 #1
function add(1, 2){
	return a + b;
}

// 한 행으로 줄여보면 #2
function add(1, 2) { return a + b; }

원래 쓰던 함수를 한 줄로 줄여봤더니 약간 비슷해 보이지만 아직은 부족한 것 같다. 

 

좀 더 비슷하게 만들어보고자 함수를 변수에 할당해보았다.

 

 

const add = function(a, b) { return a + b; }

진짜 비슷해졌다 한 번만 더 진화하면 화살표 함수를 볼 수 있을 것 같다.

 

 

#2 완성

const add = (a, b) => {return a + b};

`function`키워드를 없애고 ' =>' 만 추가해주면 끝! 

.. 이긴 한데 위 예시에서 봤던 모양이랑은 조금 다르다.

 

마지막 진화를 해보도록 하자

 

 

#3 단일 표현식

const add = (a, b) => a + b;

화살표 함수는 단일 표현식일 경우 중괄호`{}`와 `return`을 생략할 수 있다. 함수가 하나의 표현식으로 이루어져 있을 경우 알아서 잘 생략해서 쓰면 되고, 단일 표현식이 아닐 경우 `{}`와 `return`만 추가해주면 되는 것이다.! 

 

 

#4 단일 매개변수

const add = a => a + 3;

함수의 매개변수가 하나일 때 소괄호`()`도 생략이 가능하다. 

 

 

암튼 처음 보면 엄청 기괴하게 생겨서 매우 놀랄수있으나 자주 보다 보면 또 매력이 있는 녀석이니 천천히 친해지길 바랍니다. 

 

 

 

정리

 

1. 단일 표현식

• 함수가 단일 표현식으로 구성되어 있으면 중괄호 `{}`와 `return`을 생략할 수 있다.
• 이 경우 자동으로 결과를 반환한다.

 

2. const를 사용하는 이유

• `const`키워드를 사용하면 변수의 값을 재할당할 수 없다.
• 함수가 할당된 변수를 바꿀일이 보통 없기 때문에 명시적으로 `const`를 사용하여 의도치 않은 변수 재할당을 방지할 수 있다. 
• 국룰이다. 코드의 가독성을 높여주고 함수가 재할당 되지 않는 다는 것을 다른 개발자들도 알 수 있기 때문이다. (for문에 i를 쓰는 느낌인가?)

 

 

 

 

- 끝 -