화살표 함수 () ⇒ {}

화살표 함수 = 익명 함수 = 함수표현 = 호이스팅 X

const hello = () => {}

중괄호 안에 들어가서 일반함수처럼 작성하면 된다.

왜 써야할까?
장점: 간소화

패턴 1

다른 명령 없이, return 키워드로 명령 하나만 시작할 때 return, 중괄호 생략 가능

원시형, 참조형 다 가능

const hello = () => {
	return 'hello~'
}

const hello = () => 'hello~'
console.log(hello())

패턴 2

매개변수를 하나만 사용하는 경우 매개변수 좌우에있는 소괄호를 생략 가능

function hello(message) {
	return `hello ${message}`
}

const hello = (message) => `hello ${message}`


const hello = (message) => `hello ${message}`
// 매개변수를 하나만 사용하는 경우 매개변수 좌우에있는 소괄호를 생략 가능

패턴 3

객체데이터를 return 키워드없이 간소화할 땐 소괄호로 감싸야한다.

객체데이터 리터럴 기호는 중괄호라서, 화살표 함수랑 똑같다. 따라서 객체데이터 반환은 소괄호로 한번 감싼다

const hello = () ⇒ ({})

// 여기서 매개변수 a와 b는 밸류값임 키랑은 완전 관련없음 이름만 같을 뿐.
// key 와 value 값이 같다면 한 번만 표기할 수 있다.
function hello(a, b) {
	return {
	a: a,
	b: b
	}
}

// 일반 함수
function hello(a, b) {
	return {a, b}
}

// 화살표함수
const hello = (a, b) => ({ a, b })

화살표 함수가 왜 나왔을까?

가장 큰 이유는 this 때문이다.
this 제어하는거 아니면 일반함수 쓰나 화살표 함수 쓰나 상관 없다.

const amy = {
	name: 'Amy',
	age: 12,
	email: Amy@naver.com
	getNameAndAge: function () {
	return [this.name, this.age]
	} // this = amy 
}

console.log(amy.getNameAndAge())
// 호출할려면 소괄호 필수, 소괄호 뺴면 걍 함수 전체가나옴 

getNameAndAge라는 메소드는 실행이 되면 이름과 나이를 반환한다. 만약 [amy.name, amy.age]로 접근이 가능하게 만든다면 추후에 amy를 나중에 다른 이름으로 바꿨을 때, 반환 할 수 없게 된다. amy대신 this라고 입력해주면 변수 amy를 다른 이름으로 바꿔도 동작 가능하다.

this ?

this는 자기가 있는 객체를 참조하는 것이 아니라 this는 참조하는애가 언제든지 바뀔수 있다.

현재 getNameAndAge라는 메소드는 function () {} 일반함수로 만들어져있는데 일반함수 안에서 this는 호출되는 위치에서 정의된다. 만약 호출되지않는다면 정의가 안된다.

화살표 함수에서 this는?

화살표 함수에서 this는 자신이 선언된 함수(렉시컬) 범위에서 정의된다.
화살표함수를 감싸고있는 또 다른 범위를 렉시컬이라한다.

콜백에서 this

일반 함수

const userA = {
	isValid: true,
	age: 85,
	getAge: function () {
		setTimeout(function () {
			console.log(this.age)
	}, 1000)
	}
}

userA.getAge() // undefiend

getAge는 일반함수인데 userA에 정의되었는데 왜 undefiend일까?
: 일반함수에서 this는 호출된 곳에서 정의된다. 근데 코드를보면 콜백이 감싸고 있는 형태이다. this본인을 포함하는 가장 가까운 함수는 콜백이기때문에 getAge이랑은 남이된다.
즉, setTimeout라는 함수 어딘가를 콜백이 참조하고있기때문에 그 어디선가가를 정확히 알수 없다

콜백이 함수안에서 this를 쓰면 그 this가 어디서 정의되는지 알 수 없으니 undefiend가 뜬다.

화살표 함수

const userA = {
	isValid: true,
	age: 85,
	getAge: function () {
		setTimeout(() => {
			console.log(this.age)
	}, 1000)
	}
}

console.log(userA.getAge()) // 85

화살표함수로 한다면?

화살표 함수가 정의된, 자신을 감싸고있는 함수 안에서 참조할 수 있다. 그럼 결국 자신을 감싸는 userA의 age를 참조하여 85가 나온다.

결론: 콜백에서 this를 사용하면 화살표 함수를 써라.