[JavaScript] 함수 - 화살표 함수 (Arrow function)

화살표 함수 (Arrow function)

 

// 화살표 함수 (Arrow function)

function sum() {}
const sum = function () {};
const sum = () => {}; // 화살표 함수

➡️
화살표 함수는 ES6 2015년도 버전에서 새롭게 나온 문법,
기존에 function 키워드를 사용하는 함수보다 훨씬 더 단순하고 간결하게
함수 문법을 작성할 수 있기 때문에 굉장히 자주 사용하게 될 것임.

 

function sum(a, b) {
  return a + b;
}

// 화살표 함수
const sum = (a, b) => {
  return a + b;
};

// return 키워드와 중괄호 부분도 생략할 수 있다.
const sum = (a, b) => a + b;

console.log(sum(1, 2)); // 3
console.log(sum(10, 20)); // 30

---

const a = () => {};

const b = (x) => {};

화살표 함수는 당연하게 '함수'니까 매개변수 가질 수 있다.

const b = x => {};

매개변수 x가 단 '하나'만 있다고 한다면,
매개변수를 감싸고 있는 소괄호()를 생략해서 작성하는 것도 가능하다. 생략해도 되고, 생략안해도 상관없다.
그런데 왠만하면 매개변수가 하나인 경우에는 '소괄호를 생략하는 것'이 더 효율적인 방법.

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

이렇게 매개변수가 2개 있으면 소괄호() 생략 불가하다.

const d = (x) => {
  return x * x;
};
const e = (x) => x * x;

return 키워드가 함수 로직에 제일 처음에 시작이 된다면
return 키워드를 중괄호 {} 기호랑 같이 생략할 수 있다.

const f = (x) => {
  console.log(x * x); // 첫번째 로직
  return x * x;
};

x는 x의 제곱을 반환하는데, 만약에 중간에 return 키워드로 시작하지 않고,
다른 로직이 들어있다면 그때는 중괄호{} 와 return 키워드를 생략할 수 없다.
왜냐하면 함수의 첫번째 로직은 return 키워드로 시작하지 않기 때문이다.

const g = () => {
  return { a: 1 }; // 객체 데이터 하나 반환해보자.
};

❌ const h = () => { a: 1 };

{}중괄호와 return 키워드를 생략하면 객체 데이터만 남으니까 {a: 1;} 작성할 수 있겠는데
그런데 이 문법은 잘못 됐다. 화살표 함수에서 코드 범위를 나타내는 {}중괄호와
객체 데이터에서 사용하는 리터럴 방식의 {}중괄호 기호가 같은 것이 사용된다.

h 함수 입장에서는 객체 데이터의 {}중괄호로 사용된 부분이 마치 함수의 블럭으로 보이게 될 것이고,
그렇게 봤을 때는 함수 블럭 내부에 a 콜론: 1 이라는 자바스크립트 문법적으로는 이해할 수 없는 코드가 적혀있기 때문에 잘못 되었다.

▼ 이럴 때는 중괄호로 감싸진 부분이 하나의 데이터 라는 것을 정확히 해주기 위해서
아주 단순하게 소괄호()로 묶어주면 된다. ({ a: 1 }) 소괄호로 묶여진 데이터는 '객체 데이터'고,
이것이 하나의 데이터로 취급이 되기 때문에 {}와 return 키워드가 생략이 되서 하나의 객체 데이터로 함수 밖으로 반환이 될 수 있다.

const h = () => ({ a: 1 });

return 키워드로 시작을 하니까 {} 와 return 키워드 생략이 가능하다.
이때는 ()소괄호로 []대괄호를 묶어줄 필요 없다. 

const i = () => {
  return [1, 2, 3];
};

const j = () => [1, 2, 3];

 

👉🏻

 

1. 화살표 함수는 어떤 변수에다가 할당을 해서 항상 만들어야 한다.

그러면 이 화살표 함수는 당연하게도 함수 선언이 아니고, 함수 표현이 된다. 할당 연산자를 사용하니까!

2. 화살표 함수는 매개변수가 하나만 있는 경우에는 소괄호를 생략할 수 있는데,

매개변수가 아예 없거나, 2개 이상인 경우에는 소괄호를 생략할 수 없다.

3. 화살표 함수는 함수의 범위를 나타내는 { 중괄호 } 다음에 바로 return 키워드가 나온다면,

{ 중괄호 } 와 return 키워드를 생략할 수 있다.

4. 대신에 { 중괄호 } 다음에 return 키워드가 아니고, 다른 특정한 로직이 나온다면 생략할 수 없다.

5. { 중괄호 } 와 return 키워드를 생략할 때, 반환하는 데이터가 만약에 객체 데이터 라면,

객체 데이터에서 사용하는 { 중괄호 } 기호는 함수의 범위를 지정하는 { 중괄호 } 블럭과 같은 기호를 사용하기 때문에

이것이 잘못 해석되는 것을 방지하기 위해서 객체 데이터를 반환할 때는 ( 소괄호 ) 로 묶어서 반환을 해줘야 한다.

6. 그 외에 [ 배열 데이터 ] 는 ( 소괄호 ) 로 묶을 필요 없다.

 

+

this

화살표 함수는 함수 내부에서 사용하는 this 라는 키워드가 있는데,
this 라는 키워드가 화살표 함수에서, 그리고 function 키워드를 사용하는 일반 함수에서
서로 해석하는 방식의 차이가 발생한다.