작성한 질문수 2

0

안녕하세요 gogomini님 이정환입니다.

해당 내용은 자바스크립트 화살표 함수 문법으로 우리 강의의 1.12) 함수 표현식과 화살표 함수의 4분 경에 이미 설명드리고 있습니다. 본 내용은 도서에도 동일하게 기재되어 있으니 자바스크립트 기초 문법 부분을 다시 복습하시는걸 권장드립니다.

화살표 함수는 => 옆에 값을 적어주면 해당 값을 바로 반환하는 특징을 가지고 있습니다. 예를 들면 다음과 같습니다.

const arrayFunction = (a, b) => a + b;
// a + b의 값을 바로 반환함

그런데 만약 이런 화살표함수에서 함수 내부에 여러줄의 코드를 사용하고 싶다면 다음과 같이 중괄호를 사용합니다. 이때 반환하려는 값이 있다면 일반 함수 선언과 같이 return을 이용해야 합니다.

const arrayFunction = (a, b) => {
  const resValue = a + b;
  return resValue;
}
// a + b의 값을 resValue에 저장해두었다가 반환함

그런데 만약 객체값을 바로 반환하려고 하는 경우 다음과 같이 중괄호만 사용하면 함수 본문으로 이해됩니다.

const arrayFunction = (a, b) => { a:a, b:b }
// ??? 문법 오류

이럴 때에는 소괄호로 중괄호를 묶어주면 이 중괄호 내부를 객체로 인지하여 객체 값을 바로 반환하는 화살표 함수를 만들 수 있습니다.

const arrayFunction = (a, b) => ({ a:a, b:b });
// {a:a, b:b}를 반환함

0

안녕하세요, 인프런 AI 인턴입니다. gogomini님.

JavaScript에서 화살표 함수의 {} (중괄호)와 () (소괄호)는 반환 방식에 큰 차이를 줍니다. 여기에 대한 요점을 간단히 설명드리겠습니다.

1. 화살표 함수와 중괄호:

   • 화살표 함수에서 중괄호를 사용하면 함수 본문을 명확히 나눌 수 있어 여러 줄의 코드를 포함할 수 있지만, 이 경우 명시적으로 return 키워드를 써야 값을 반환합니다. 그렇지 않으면 반환 값이 undefined가 됩니다.
     
   • 예시:
     

     
     const filteredTodos = todos.filter((todo) => {
     // 여러 줄의 코드
     return todo.id !== targetId;
     });
     

     
     

2. 화살표 함수와 소괄호 또는 표현식:

   • 소괄호 없이 연산식을 사용할 때는 직접 반환이 가능합니다. 이러한 경우에는 return을 사용할 필요가 없습니다.
     
   • 예시:
     

     
     const filteredTodos = todos.filter((todo) => todo.id !== targetId);
     

     
     

3. 문제가 발생한 이유:

   • gogomini님께서 중괄호를 사용했는데 아무런 return 문을 명시하지 않으셨다면, 모든 결과가 이전 상태로 돌아가지 않고 undefined가 되어 엉뚱한 동작을 유발했을 것입니다.
     
   • 또한, jsx 요소를 반환할 때는 { }로 감싸면 표현식을 외부로 감싸고 있어도 문제없이 사용할 수 있습니다.
     
   • map, return 등 사용할때 문의 사항입니다에서 이에 대한 자세한 설명을 찾아보실 수 있습니다.
     

강의에서 언급되지 않았다고 해서 문제가 발생하시니 조금 난감하셨을 것 같습니다. 이러한 기초적인 개념들은 자주 사용되니 이해를 더욱 견고히 하시는 게 좋겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.