[JavaScript] 화살표 함수 이해하기

➡️ 화살표 함수란 ?

function 이라는 키워드 없이, => 기호를 이용하여 함수를 생성하는 것.

const sum = function(x, y) {
  return x + y;
}

위와 같은 일반 함수 표현에서 내부의 첫 줄이 return 으로 시작할 때, function ,{}, return을 생략할 수 있다.

const sum = (x, y) => x + y;

//혹은
const sum = (x, y) => {
  x + y;
}

📚화살표 함수 문법

1. 인수가 하나일 때 인수를 감싸는 괄호를 생략할 수 있다.

const log = function (c) {
  console.log(c)
}

const log = c => console.log(c)

---

2. 인수가 하나도 없을 땐 빈 괄호를 비울 수 있고 이 때 괄호는 생략할 수 없다.

const a = () => {} // 매개변수가 없을 경우
//const a = function (){}

---

3. 매개변수 1개는 소괄호 생략 가능

const b = x => {}
//const b =(x)=>{}
//const b = function(x){}

---

4. 매개변수가 없거나 2개 이상은 소괄호를 생략 불가

const c = (x, y) => {}

---

5. 함수가 return으로 시작하지 않으면 생략 불가

const f = x => { // 
  console.log(x * x)
  return x * x
}
//const f = function(x){
console.log(x*x)
return x*x
}

---

6. 객체 데이터는 {} 기호를 사용하기 때문에 소괄호로 묶어야 함

const g = () => { return { a: 1 } }
const h = () => ({ a: 1 }) // 

---

➡️ 화살표 함수 특징?

익명 함수

함수를 재사용하지 않을 목적으로 함수에 이름을 붙이지 않는 것
기본적으로 화살표 함수는 익명 함수로만 사용할 수 있기 때문에 함수를 호출하기 위해서는 표현식을 써야한다.

//표현식을 이용한 화살표함수 
const sum (x, y) => {
  return x + y; 
}; 

//표현식을 이용하지 않은 화살표함수 
function (x, y) => { 
  return x + y; 
}; //Uncaught SyntaxError: Function statements require a function name

this

일반 함수와 화살표 함수의 가장 큰 차이점은 this 인데, 추후 다시 정리✨