1. 화살표 함수란?

ES6 이전에는 함수 선언문과 함수 표현식이 있었다.

• 함수 선언식 : function 키워드를 사용하여 함수를 선언하는 방식.
• 함수 표현식 : 이름이 없는 익명함수를 변수에 할당하는 방식.

ES6에서 화살표 함수가 생겼다.
화살표 함수는 function 키워드 대신 화살표 (=>) 를 사용해 보다 간결하게 함수를 선언할 수 있게 되었다.

// 함수 선언문
function sayHi(name) {
	console.log(`Hello! ${name}`);
}

// 화살표 함수
const sayHi = (name) => {
	console.log(`Hello! ${name}`);
}

1-1. 화살표 함수 선언

• 함수의 매개변수가 1개라면 소괄호()를 생략할 수 있다.

• 함수 바디가 한 줄이라면 중괄호와 return 문을 생략할 수 있다. (암묵적으로 return 됨.)

const func1 = num => `입력한 숫자는 ${num}이다.`

1-2. 화살표 함수 호출

화살표 함수는 익명 함수로만 사용할 수 있기 때문에 호출하기 위해서는 함수 표현식을 사용해야한다.

// 함수 표현식
let squareWidth = function (x,y) { return x * y };
console.log(squareWidth(10,20));	// 200

// 화살표 함수
let squareWidth = (x,y) => x * y;
console.log(squareWidth(10,20))		// 200

1-3. 본문이 여러 줄인 화살표 함수

• 표현식이나 구문이 여러 줄인 함수를 화살표 함수 문법을 통해 나타낼 경우
• 중괄호를 사용 해, 본문이 여러 줄로 구성되어 있음을 나타냈을 경우

return 지시자를 사용해 명시적으로 결과값을 반환해줘야한다.

return으로 결과값을 반환해야한다. 그렇지 않을 경우 undefined 출력된다.

// return 사용x
let squareWidth = (x,y) => {x * y};
console.log(squareWidth(10,20));	// undefined

// return 사용
let squareWidth = (x,y) => { return x * y };
console.log(squareWidth(10,20));	// 200

2. 일반 함수와 차이

화살표 함수는 다음과 같은 특징을 가지며 일반 함수와 달리 화살표함수에는 몇 가지 제한점이 있어 모든 상황에 사용할 수는 없다.

• 무조건 익명함수로만 사용가능.
• 메서드나 생성자 함수로 사용불가.
• 스스로의 this, argument를 가지지 않는다.
• 함수가 정의된 스코프에 존재하는 this를 가리킨다.
• 화살표 함수는 생성될 때 this가 결정된다.

// 메서드
const character = {
	name: 'haewon',
    sayHi: () => console.log(this.name);
}
character.sayHi();	// undefined

sayHi() 메서드의 this는 자신을 호출한 객체 character가 아닌 함수 선언 시점의 상위 스코프인 전역 객체를 가리킨다.

// 생성자 함수
const charcter = () => {};
const charcter1 = new charcter();	// Uncaught TypeError: charcter is not a constructor 

화살표 함수는 생성자 함수로 사용하면 에러가 난다.

제약이 있음에도 화살표 함수를 사용하는 이유는 this 때문이다.

화살표 함수의 this

화살표 함수 본문에서 this에 접근하면 외부에서 값을 가져온다.

일반적으로 this에 바인딩 되는 값은 아래와 같다.

• 전역공간의 this : 전역 객체
• 메서드 호출 시, 메서드 내부의 this : 해당 메서드를 호출한 객체
• 함수 호출 시 함수 내부의 this : 저장되지 않음 (=전역 객체)
  (this가 지정되지 않은 경우 자동으로 전역 객체 바인딩)

일반 함수의 this는 바인딩할 객체가 함수를 호출할 때 함수가 어디에 호출 되었는지에 따라 동적으로 결정된다.

하지만 화살표 함수의 this는 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 이를 렉시컬 this (Lexical this) 라 한다.
함수를 어디서 호출하는지가 아니라 함수를 어디에 선언했는지에 따라 결정되는 것.
이렇게 되는 이유는 화살표 함수에는 this가 아예 없기 때문이다.

const school = {
	title : "명진고등학교",
  	students : ["지연","수아","성희"],
    
  	showList() {
    	this.students.forEach(
        	student => alert(`${this.title} : ${student} `)
        );
    }
};
school.showList();

여기서 this.title은 forEach문의 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해진다.
즉, this.title은 school.title과 같다.

const school = {
	title : "명진고등학교",
  	students : ["지연","수아","성희"],
    
  	showList() {
    	this.students.forEach(
        	function(student) {
             alert(`${this.title} : ${student} `)
          }
        );
    }
};
school.showList();

위 예시에서 일반 함수를 사용했다면 this.title은 undefined가 출력된다.
forEach에 전달되는 함수의 this가 undefined 이기 때문디ㅏ.

화살표 함수의 arguments

화살표 함수는 모든 인수에 접근할 수 있게 해주는 유사배열객체 arguments를 지원하지 않는다.

~ 데코레이터 개념 학습 후 작성 예정