[JS/ES6] 화살표 함수

[화살표 함수]

Javascript 화살표 함수에 대해 알아보자. 

화살표함수란 ES6부터 쓸 수 있는 함수이다. 

 

화살표 함수의 특징

1. function 키워드를 생략한다.

2. 익명함수이다.

3. this, arguments, super, new.targer을 바인딩하지 않는다.

 

[화살표 함수의 구조]

const plusNum = function(num1, num2){
	return num1 + num2;
}
// function 함수

일단 기존의 `funtion` 함수이다.

const plusNum = (num1, num2) => {
	return num1 + num2;
}
// 화살표 함수

그리고 이것이 화살표 함수이다.

한 눈에 알 수 있듯이 화살표 함수는 function 키워드를 생략함으로써 function 함수에 비해 구문이 짧아진다. 

또한 function 함수와 다르게 여러가지 특징을 가진다. 그 특징은 아래와 같다.

// return 키워드 생략, 중괄호 생략 가능
const plusNum2 = (num1, num2) => num1 + num2;

// 매개변수가 1개일때 소괄호도 생략 가능
const plusNum3 = num => num+1;

// 단, 매개변수가 없을시엔 소괄호 사용
const plustNum4 = () => '소괄호 꼭 입력!';

1. return 키워드의 생략이 가능하므로 자동으로 결과 값이 반환된다. 중괄호 또한 생략이 가능하다.

2. 매개변수가 1개 라면, 소괄호를 생략해도 괜찮다.

3. 단, 매개변수가 없을 시엔 소괄호() 를 반드시 적어주어야 한다. 

 

[화살표 함수는 익명 함수]

익명함수란 말 그대로 이름이 없는 함수로, 즉시 실행이 필요할 경우 사용한다. 

함수의 이름이 없어도 호출이 가능하지만 익명함수는 선언 이후에만 호출이 가능하다. 익명함수에 대해선 MDN 링크를 참조하겠다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Function.name - JavaScript | MDN

[this 바인딩 ❌]

우선 바인딩이란,

함수 호출과 실제 함수를 연결하는 방법이다. 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다. 바인딩은 정적바인딩(static binding)과 동적 바인딩(dynamic binding) 으로 구분할 수 있다. 

정적바인딩(static binding) : 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지됨

동적 바인딩(dynamic binding) : 실행 시간에 이루어지거나 실행 시간에 변경됨.

자료 출처 : TCP SCHOOL

 

기존 함수에선 함수를 호출하는 방법에 따라 this가 결정이 되었다.

호출한 함수의 객체인 this를 가져왔기 때문에, 내가 원하는 this를 가져오기 위해선 bind 함수를 사용하여 this를 지정해주어야 했다. (혹은 변수에 할당하여 사용)

 

그러나 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정이된다. bind 함수를 사용하지 않아도, 언제나 상위 스코프의 this를 가르키게 된다. 

 

[new 사용 못함]

화살표 함수는 생성자로 사용될 수가 없으므로 new와 함께 사용하면 오류가 발생한다. 

따라서 new.target 바인딩도 사용할 수 없는 것이다. 

 

[argument 바인딩 ❌]

화살표 함수에는 argument가 존재하지 않기 때문에 일반 함수대로 인수를 주면 작동하지 않는다. 

 

const number = () => {
	console.log(argument[0]);
}

number(1,2,3);

코드를 작성하면 에러메세지도 argument is not defined 로, 인수가 정의되지 않았다고 뜬다.

그래서 ES6에서 새롭게 등장한 키워드가 있다.

바로 매개변수 안에 ...을 입력해주는 것이다.

const number = (...args) => {
	console.log(args[0]);
}
number(1,2,3);

`...` 은 정의된 함수의 선언시 매개변수 목록을 배열로 받겠다는 의미이다.

 

[super 바인딩 ❌]

super 키워드는 부모 Object의 함수를 호출할때 사용이 된다. 그러나 화살표 함수는 class를 선언하지 않기 때문에 필요가 없다.

 

---

<화살표 함수에서 사용하면 안되는 목록>
1. 메소드 사용
2. new 연산자 사용
3. prototype 속성 사용
4. yield 키워드 사용