ES6에서 새롭게 추가된 화살표 함수에대해 정리해보겠습니다.
우선 함수란 무엇일까요?
함수
- 함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭이다.
- 즉,input과 output을 가진 기능의 단위를 함수라고 합니다.
이러한 함수들을 호출하는 방식에 여러가지가 있는데
우선 함수 선언문과 표현식이 있습니다.
함수 표현식
- 변수에 함수를 할당하는 방식을 함수 표현식 이라고 합니다.
const result = function (x, y) {
return x + y;
};함수 선언문
- function 키워드를 사용하여 함수를 선언하는 방식을 함수 선언문이라고 합니다.
function add(x, y) {
return x + y;
}여기서 새롭게 추가된 화살표 함수를 알아보겠습니다.
화살표 함수
- function 키워드 대신 화살표 (=>)를 사용하여 좀 더 간략한 방법으로 함수를 선언할 수 있습니다.
- 화살표 함수는 항상 익명 함수로 정의한다. ( 익명함수란 이름이 없는 함수를 말한다.)
- ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제 때문에 화살표함수를 도입했다.
function add1(x, y) {
return x + y;
}
// add2: add1을 화살표 함수로 나타낼 수 있음
const add2 = (x, y) => {
return x + y;
};
// add3: {}(중괄호) 다음 return이 나오면 retrun과 중괄호 생략 가능
const add3 = (x, y) => x + y;
// add4: return이 생략된 함수의 본문을 소괄호로 감싸줄 수 있음 (헷갈림 방지)
const add4 = (x, y) => x + y;
// add5: 매개변수 1개면 소괄호 생략 가능 (1개일 때만 가능)
const add5 = (x) => x;
// add6: 매개변수가 없는 함수를 만들 수 있음
const add6 = () => x;
⭐ 일반 함수와 화살표 함수의 가장 큰 차이점은《 this binding 》여부이다!!!
➡️ " 화살표 함수는 this를 바인딩 하지 않는다."는 것을 꼭 기억하자!!!
const person = {
name: "damin",
sayHello: () => {
console.log(`Hello, my name is ${this.name}`);
},
};
person.sayHello(); // "Hello, my name is undefined" 출력