상세 컨텐츠

본문 제목

[JavaScript] Arrow function 화살표 함수

카테고리 없음

by spring92 2021. 8. 15. 23:02

본문

먼저 일반적인 함수선언식을 사용해서 인사말을 출력하는 함수를 작성했다.

function greet(name) {
  return "Hello, " + name;
}
const result = greet("Ted");
console.log(result); // Hello, Ted

위 함수를 화살표 함수를 사용하면 아래와 같이 작성할 수 있는데, 화살표 함수는 return을 작성하지 않아도 값을 반환한다.

const greet = (name) => "Hello, " + name;
const result = greet("Ted");
console.log(result); // Hello, Ted

하지만 함수 내부 코드가 여러 줄이라 중괄호로 감싸게 되었다면 return을 작성해줘야 한다. 그렇지 않으면 아래와 같이 undefined를 출력한다.  

const greet = (name) => {
  "Hello, " + name;
};
const result = greet("Ted");
console.log(result); // undefined

중괄호로 감싸고 return을 작성해주면 정상적으로 값을 반환한다.

const greet = (name) => {
  return "Hello, " + name;
};
const result = greet("Ted");
console.log(result); // Hello, Ted

또한, Argument가 하나라면 소괄호를 생략해도 되지만,

const greet = name => "Hello, " + name;
const result = greet("Ted");
console.log(result); // Hello, Ted

Argument가 두 개 이상이라면 소괄호로 감싸줘야 한다.

const greet = (name, role) => "Hello, " + name + ", " + role;
const result = greet("Ted", "Author");
console.log(result); // Hello, Ted, Author