[JS] 화살표 함수(arrow function)

yuna·2023년 4월 9일
1

javascript

목록 보기
5/10

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다.

  • 기존 함수 : function name() {}
  • 화살표 함수 : const name = () => {};
// 기존 함수
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수
let sum = (a, b) => a + b;

구체적인 화살표 함수 기본 문법 정리!

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.


// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x  // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.


() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
                  // 왜냐하면 딸랑 { } 쓰면 얘가 함수 블록인지 객체 블록인지 판단할수 없기 때문이다.


() => {           // multi line block.
  const x = 10;
  return x * x;
};

0개의 댓글