JavaScript 화살표 함수(Arrow Function)
JavaScript의 화살표 함수(Arrow Function)는 ES6에서 도입된 함수 표현식으로, 기존의 function 키워드를 사용하는 방식보다 더 간결하게 함수를 작성할 수 있습니다. 그중에서도 간결한 표현(Concise Body) 방식은 코드의 가독성을 높이고 불필요한 문법을 줄여주는 장점이 있습니다.
1. 매개변수와 괄호 생략
화살표 함수에서 매개변수가 한 개일 경우, 괄호 ()를 생략할 수 있습니다.
// 일반 화살표 함수
const double = (num) => {
return num * 2;
};
// 간결한 표현 (괄호 생략)
const double = num => num * 2;✅ 매개변수가 여러 개이거나 없을 경우 반드시 괄호를 사용해야 합니다.
// 매개변수가 여러 개일 경우
const add = (a, b) => a + b;
// 매개변수가 없을 경우
const sayHello = () => 'Hello!';2. 중괄호와 return 키워드 생략 (암시적 반환)
함수의 본문이 단일 표현식(single expression)인 경우, {}(중괄호)와 return 키워드를 생략할 수 있습니다. 이를 암시적 반환(Implicit Return)이라고 합니다.
// 일반 화살표 함수
const square = (num) => {
return num * num;
};
// 간결한 표현 (중괄호 및 return 제거)
const square = num => num * num;✅ 중괄호 {}를 사용하면 반드시 return을 명시해야 합니다.
const square = num => {
return num * num; // return 필수
};2-1. if 문에서 return을 한 줄로 작성하기
💡 화살표 함수에서는 if-else 문을 사용할 때도 {}를 생략할 수 있습니다.
이 방법을 사용하면 들여쓰기를 줄이고 코드 가독성을 높일 수 있습니다.
// 일반적인 if-else 구조
const checkAge = age => {
if (age >= 18) {
return 'You are an adult';
} else {
return 'You are a minor';
}
};
// 간결한 표현 (if문에서 바로 return)
const checkAge = age =>
age >= 18 ? 'You are an adult' : 'You are a minor';
console.log(checkAge(20)); // "You are an adult"
console.log(checkAge(16)); // "You are a minor"✅ 위처럼 삼항 연산자(? :)를 사용하면 if-else 없이 더 깔끔한 코드가 됩니다!
✅ 하지만, 삼항 연산자가 아닌 if문도 중괄호 없이 한 줄로 return할 수 있습니다.
const howOld = (age, year) => {
const currentYear = new Date().getFullYear();
const birthYear = currentYear - age;
if (year > currentYear) return `You will be ${age + (year - currentYear)} in the year ${year}`;
if (year < birthYear) return `The year ${year} was ${birthYear - year} years before you were born`;
return `You were ${year - birthYear} in the year ${year}`;
};
console.log(howOld(30, 2001)); // "You were 6 in the year 2001"
console.log(howOld(25, 2050)); // "You will be 50 in the year 2050"
console.log(howOld(40, 1980)); // "The year 1980 was 5 years before you were born"✅ if문이 return만 포함하면, 중괄호 {}를 생략할 수 있습니다!
✅ else도 필요 없습니다. 왜냐하면 return이 실행되면 함수가 종료되기 때문입니다.
✅ 들여쓰기가 줄어들어 가독성이 훨씬 좋아집니다! 🎯
3. 블록이 여러 줄일 경우
함수의 본문이 여러 줄이라면 중괄호 {}를 반드시 사용해야 하며, return이 필요한 경우 명시적으로 작성해야 합니다.
const multiply = (a, b) => {
const result = a * b;
return result; // return 필수
};✅ 보통은 모두 return이 필요하지만, 반환값이 없는 함수(예: console.log(), fetch() 호출 등)는 return 없이도 동작 가능합니다.
4. 객체 리터럴을 반환하는 경우
객체 리터럴 {}을 반환하려면 괄호 ()로 감싸야 합니다.
// Syntax Error 발생
const getUser = name => { name: name, age: 25 };
// 올바른 표현
const getUser = name => ({ name: name, age: 25 });✅ 왜 "객체 리터럴"이라고 따로 표현했을까?
{}는 코드 블록(function body)로 해석될 수도 있고, 객체 리터럴로 해석될 수도 있음.- 객체 리터럴을 반환할 때는 ()로 감싸야 JavaScript가 이를 객체로 인식함.
- 그래서 그냥 "중괄호"라고 하면 헷갈릴 수 있어서, "객체 리터럴"이라고 표현하는 것!
5. 활용 예시
const greet = name => `Hello, ${name}!`;
console.log(greet('Alice')); // "Hello, Alice!"
const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16]결론
- 매개변수가 하나라면 괄호 생략 가능
- 함수 본문이 한 줄이라면 중괄호
{}와return생략 가능 - 객체 리터럴을 반환할 때는 괄호
()로 감싸야 함 - 여러 줄의 함수는 중괄호
{}와return을 사용해야 함
이제 화살표 함수의 간결한 표현을 활용하여 더 깔끔한 코드를 작성해보세요! 🚀
