Return 문과 반환된 객체 사이에 줄 바꿈이 발생할 때 JavaScript 함수가 정의되지 않은 값을 반환하는 이유는 무엇입니까?

Return 문과 객체 사이에 줄 바꿈이 발생하면 JavaScript 함수가 정의되지 않은 값을 반환합니다.

JavaScript에서 함수는 다음과 같은 경우 객체를 반환해야 합니다. 다음 예에서 볼 수 있듯이 return 문 바로 뒤에는 객체 정의가 옵니다.

<code class="javascript">function foo1() {
  return { msg: "hello1" };
}</code>

console.log(JSON.stringify(foo1())); // 출력: { msg: "hello1" }
그러나 줄바꿈으로 return 문과 객체 정의가 분리되면 함수는 아래와 같이 정의되지 않은 값을 반환합니다.

<code class="javascript">function foo2() {
 return
 { msg: "hello2" };
}</code>

console.log (JSON.stringify(foo2())); // 출력: 정의되지 않음

이 동작은 JavaScript의 ASI(자동 세미콜론 삽입) 메커니즘으로 인해 발생합니다. ASI는 코드의 적절한 실행과 해석을 보장하기 위해 특정 상황에서 세미콜론을 가정합니다. foo2()의 경우 줄 바꿈은 세미콜론으로 해석되어 return 문을 종료하고 객체 정의 앞에 빈 문을 도입합니다.

해결책

이 문제를 해결하려면 그룹화 연산자를 사용하여 return 문과 개체 정의가 단일 식으로 평가되도록 할 수 있습니다. 이렇게 하면 ASI가 개입하는 것을 방지할 수 있습니다.

<code class="javascript">function foo2() {
  return ({ msg: "hello2" });
}</code>

미적 고려 사항

ASI 문제를 방지하는 것도 중요하지만 코드를 작성할 때 미적인 요소를 고려할 수도 있습니다. 일부 개발자는 명확성을 위해 표현식을 그룹화하거나 코드 구조를 강조하는 것을 선호합니다. 예:

<code class="javascript">return ([
  "ul",
  ["li",
    ["span", {class: "name"}, this.name],
    ["span", {id: "x"}, "x"]
  ]
]);</code>

또는

<code class="javascript">function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}</code>

이러한 예에서는 표현식을 체계적으로 유지하고 가독성을 높이기 위해 그룹화 연산자를 사용합니다.

위 내용은 Return 문과 반환된 객체 사이에 줄 바꿈이 발생할 때 JavaScript 함수가 정의되지 않은 값을 반환하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!