본문 바로가기

Language/JS

화살표 함수

0. 화살표 함수는 변수에 익명 함수를 할당하는 형식이므로 함수 선언이 아니라 함수 표현식 취급을 받는다. (호이스팅 불가)

1. 화살표 함수의 패턴

const a = () => {};

// 매개변수가 하나이면 소괄호 생략 가능
const b = x => {}; 
const c = (x, y) => {};

// 만약 함수 동작부분에 다른 로직 없이 return문만 있다면 {}와 return 키워드 생략이 가능하다.
const d = (x) => {return x * x;}; 
const e = (x) => x * x;

// 만약 함수 동작부분 내에 return 말고 다른 로직이 있다면 { return} 형태로 적어줘야 함.
const f = (x) => {
  console.log(x * x);
  return x * x;
};

/*	해당 경우는 return 밖에 없으므로 {} 써줄 수 있으나, 객체를 return 하는 경우, 
	객체를 묶는 {}와 함수 동작부분의 {}를 컴파일러가 구분하지 못하므로 
	()로 객체를 감싸서 하나의 데이터 임을 확인 시켜줘야 함.
*/
const g = () => {return {a : 1}}
const h = () => ({a:1}) 


// 뭐 당연하게도 배열은 ()로 감쌀 필요 없음
const j = () => [1,2,3]

//return 코드가 여러줄인 경우에도 마찬가지로 ()써서 하나의 데이터임을 명시해줘야 한다. 
// 줄이 넘어가버리면, 컴파일러가 해당 코드 전체가 하나의 코드인지 인식을 못한다. 
const i = () => (
	// 코드 1줄
    // 코드 2줄
    // ...
)

2. 스스로 해보기 

'Language > JS' 카테고리의 다른 글

콜백 (Call Back)  (0) 2023.04.20
즉시 실행 함수 (IIFE)  (0) 2023.04.20
매개변수 패턴  (0) 2023.04.19
함수의 반환과 종료  (0) 2023.04.18
함수 선언문과 함수 표현 식의 차이 그리고 호이스팅  (0) 2023.04.18