다음 코드 스니펫의 결과는?

About JS, 심심풀이
2023/10/20

트위터 @heyImMapleLeaf 트윗에서 따온 퀴즈입니다. 링크 하단 첨부

10?

정답을 맞추셨나요? 결과가 10인 이유는 연산자의 결합 순서와 평가 시점의 i값 때문입니다.

i += x()i = i + x()로도 나타낼 수 있습니다.

해당 라인이 평가되는 시점의 i는 0 입니다. 따라서 i = 0 + x()가 됩니다.

순서대로 적어보면 i += x() -> i = i + x() -> i = 0 + x() -> i = 0 + 10

이렇게 됩니다.

x()return 전에 콘솔을 찍어보면 이해하기 쉬운데요,

function x() {
  i++;
  console.log(i);
  return 10;
}
i += x();
console.log(i);
// 1
// 10

i++가 실행되어 i1이 되었다가 10이 됩니다.

이런 헷갈리는 코드를 작성하지 않는 게 중요하겠죠?

번외

재미있는 건 연산의 순서를 변경하면 결과도 달라진다는 것. i = x() + i 의 결과는 11입니다.

동일하게 순서대로 생각해보면

i = x() + i -> i = 10 + i (이때 i = 1) -> i = 10 + 1

이래서 11이 됩니다.

역시 이렇게 헷갈리는 코드를 작성하지 않는게 중요하겠죠? ~_~