JS) 화살표 함수

1. 화살표 함수란?

전통적인 함수 선언 방식의 간편한 대안입니다. - MDN

// 기존 익명 함수를 만드는 방법
function (a, b) {
  return a + b;
}


// 기존 기명 함수를 만드는 방법
function sum(a,b) {
  return a + b
}

전통적인 함수 선언 방식은 위처럼 생겼고, 간단한 기능 하나만 만들어도 3줄은 잡는다.

 

// 화살표 함수로 익명 함수 만드는 법
(a, b) => a + b


// 화살표 함수로 기명 함수 만드는 법
const arrowSum = (a,b) => a + b

화살표 함수를 만들면 짧은 코드로 함수를 쉽게 만들 수 있다.

한 줄 처리인 경우 중괄호나 return을 생략 가능하다.

 

// 한 행으로 처리가 안 될 시 중괄호 스코프를 사용할 수 있다.
const arrowSum2 = (a,b) => {
  console.log("added")
  return a + b
}

물론 중괄호 스코프를 만들어 여러줄의 코드를 실행하는 함수도 만들 수 있다.

 

const arrow = item => console.log(item);

변수가 하나인 경우 패러미터의 소괄호()도 해체할 수 있다.

 

 

 

2. 함수 표현식으로만 사용 가능

function 생성자를 활용한 함수 선언은 불가능하고, 변수 이름에 값으로써 할당하는 방식인 표현만 사용 가능하다. 

그러므로 화살표 함수가 선언되기 이전에 화살표 함수를 실행시키면 Reference Error를 겪는다.

 

 

3.  한 줄 반환 시 유의할 점

// 반환할 값을 중괄호{}나 return을 사용하지 않고 이렇게 표현할 수도 있다.
const arrow4 = () => [1, 2, 3];


// 그러나 객체 데이터를 반환할 땐 이게 함수 스코프인지 객체 데이터인지 판별할 수 없으므로 사용할 수 없다.
// *문법이 겹침
const arrow4 = () => { a: 10 };


// 이럴 땐 하던대로 중괄호 스코프와 return을 사용해주거나
const arrow4 = () => {
  return { a: 1 };
};


// 객체 데이터를 소괄호로 감싸면 데이터로 인식하기 때문에 이렇게 하면 된다.
const arrow5 = () => ({ a: 4 });