JavaScript 화살표 함수 괄호 사용법 정리(+익명 함수)

어떤건 () => {} 이렇게 쓰고 어떤건 () => ({}) 이렇게 쓰고 어떤건 ({}) 이렇게 쓰니 뭐를 어떤 상황에서 써야 하는지 헷갈려서 정리한다.

 

1. (입력) => {명령문} — 블록형 화살표 함수

화살표 함수는 익명 함수의 형태 중 하나로, 익명함수에 대해서도 알아야 한다. 익명 함수에 대한 설명은 여기를 참고할 것.

기본적으로 화살표 함수는 다음과 같이 생겼다.

(매개변수(= 입력)) => {실행문, 명령문}

소괄호()에는 전달되는 매개변수를 입력하고, 중괄호{}에는 실행할 여러줄의 코드를 작성할 수 있다.

 

1️⃣ 중괄호{} 안의 내용이 1줄로 끝난다면 중괄호를 생략할 수 있다.

const addOne = x => x + 1

⚠️ 주의! 중괄호를 쓴다면 반드시 return을 작성해야 한다.

 

2️⃣ 만약 매개변수가 1개면 괄호()를 생략할 수 있다.

const function = x => {
  console.log(x)
  return x + 1
}

 

3️⃣ 매개변수가 아예 없거나 2개 이상이라면 괄호를 반드시 붙여야 한다.

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

 

4️⃣ {} 안에는 명시적으로 return문을 작성해야하며, 작성하지 않으면 undefined를 반환한다.

 

2. (입력) => (표현식) — 값 바로 반환

이 경우 기본 식은 아래와 같다.

(입력) => (단일 표현식)

괄호 안의 표현식을 자동으로 반환하는 화살표 함수.

 

1️⃣ return을 작성하지 않아도 된다 = 한줄 짜리 계산 혹은 값을 바로 반환할 때 사용

const function = x => ( x + 1 )

// 괄호는 생략할 수도 있다.
const function = x => x + 1

return은 암묵적 반환이다.

 

2️⃣ 다음 예시와 같이 여러 줄을 작성하는건 오류이다.

const f = x => (
  console.log(x)  // ❌
  x + 1           // ❌
)

여러 줄을 표현식에서 작성하는 것은 오류. 반드시 여러 줄은 중괄호{}에서 작성해야 한다.

 

3️⃣ 괄호는 생략할 수 있다. 단 가독성을 위해서 작성하는 편이 좋다

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

 

3. (입력) => ({객체}) — 객체 반환

(입력) => ({객체})

화살표 함수에서 객체를 반환할 때 사용한다. JS에서 {}는 블록문으로 해석할 수 있기 때문에, 객체{}를 반환하고 싶다면 ()로 감싸서 객체임을 명시해야 한다.

 

1️⃣ {}을 ()로 감싼다 - 객체임을 명시

const createUser = (n, a) => ({
  name: n,
  age: a,
  createAt: new Date()
})

createUser("사스케", 20) 
// {name: "사스케", age: 20, createAt: ....}

 

2️⃣ 소괄호()를 생략하면 실행문으로 인식하기 때문에 오류가 발생한다.

// ❌ 잘못된 방법 - 블록으로 해석됨
const wrong = () => {
  name: '사스케', age: 20 ...
}

// 블록과 객체의 차이
() => { x: 1 }     // 블록문 (레이블 x), undefined 반환
() => ({ x: 1 })   // 객체 { x: 1 } 반환

 

4. (() => {})() — 즉시 실행 함수 (IIFE)

함수의 정의와 동시에 즉시 실행 

괄호로 함수 전체를 감싸서 JS가 표현식으로 인식하도록 한다. 마지막 ()가 실제 실행 호출

// 간단 버전
const result = (() => 3 + 4)()
console.log(result) // 7

// 복잡 버전
(() => {
  console.log("⭐");
  const temp = "❤️";
  return temp;
})();  // "⭐" 출력, "❤️" 반환

경험상 그렇게까지 많이 쓰지 않았던거 같다...

이런 느낌이다...

전역 오염 방지를 위해 변수 스코프를 격리하거나 초기화 코드를 실행할 때 사용한다고 한다. 전통적인 JS패턴에서 많이 사용된다는데... 사실 한번도 본 적 없는 형태긴 하다

 

5. ({}) — 빈 객체 표현식

그냥 {}만 쓰면 블록문으로 해석될 수 있기 때문에 값을 쓸 때 괄호로 감쌈

{}       // 그냥 블록문, 값 없음
({})     // 객체 표현식, 값은 {}