함수를 정의하는 방법 - 4. 화살표 함수(Arrow Function)

/* 화살표 함수 예제1 */
const sum = (a,b) => {
	return a + b
}// with block body, explicit "return" needed 

const add = (a,b) => a + b //expression body syntax, implied "return"

sum(10, 10) // 20
add(10, 10) // 20

- ES6(ES2015)에서 새롭게 추가된 함수 생성 방식. fuction 이라는 키워드 대신 => 활용해서 만듬. 

- 앞에서의 함수 생성 방식과 몇가지 차이점이 존재.

 

/* 화살표 함수 예제2 */
const Dog = (name) => {
	this.name = name
}

const myDog = new Dog('강아지') // Uncaught TypeError: Dog is not a constructor

- 화살표 함수에서는 constructor를 사용할 수 없음. 생성자 함수로 화살표 함수를 사용하는 것은 불가능.

- new.target 키워드에 대한 액세스 권한도 없음.

 

/* 화살표 함수 예제3 */
function world() {
	console.log(arguments)
}

world(1, 2, 3) // Arguments (3) [1, 2, 3, callee: f, Symbol(Symbol.iterator): f]

const world = () => {
	console.log(arguments)
}

world(1, 2, 3) // Uncaught ReferenceError: arguments is not defined

- 화살표 함수에서는 arguments가 존재하지 않음.

- 일반함수와 화살표 함수의 가장 큰 차이점은 this 바인딩으로, 이벤트에 바인딩할 메서드 선언 시 화살표 함수와 일반함수가 다르게 작동.

- this: 자신이 속한 객체나 자신이 생성할 인스턴스를 가린키는 값으로, 화살표 함수 이전까지는 함수를 정의할 때 결정되는 것이 아닌 함수가 어떻게 호출되느냐에 따라 동적으로 결정. 함수가 일반 함수로서 호출된다면 내부의 this는 전역 객체를 가리킴. 화살표 함수에서는 함수 자체의 바인딩을 갖지 않음. 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 가리킴

 

- 클래스 컴포넌트에서 일반 함수와 화살표 함수로 state를 갱신하는 예제:

2024.04.21 - [Front-End/React] - 클래스 컴포넌트에서 일반 함수와 화살표 함수의 차이점