JavaScript의 콤마 연산자와 화살표 함수의 동작 방식을 이해

Intro

프로그래머스에서 코딩 테스트 문제로 짝수와 홀수 개수를 풀고 있을 때였다.
문제는 매우 쉽게 풀었다.
다른 사람의 코드를 보던 중 아래의 코드를 보게되었다.

function solution(list) {
  return list.reduce(
    (acc, cur) => (cur & 1 ? acc[1]++ : acc[0]++, acc), // 최종적으로 acc를 return
    [0, 0] // 초기값
  );
}

이 간단한 코드에 몇가지 의문이 생겼다.

Problems

, acc가 왜 필요한거지?
내가 하는 .reduce()메소드에서는 (cur & 1 ? acc[1]++ : acc[0]++) 코드 연산이 자동으로 acc(누적 값)에 return되는 줄 알았다.
따라서 아래와 같은 코드가 가능할 줄 알았다.

function solution(list) {
  return list.reduce(
    (acc, cur) => (cur & 1 ? acc[1]++ : acc[0]++), // 최종적으로 acc를 return
    [0, 0] // 초기값
  );
}

하지만 몇가지 문제가 있었다.

problem 1: 후위증가 연산자

• (cur & 1 ? acc[1]++ : acc[0]++) 이 코드는 증가 연산이 적용되기 전에 acc에 값이 누적되기 때문에 결국에는 연산이 적용되지 않은채로 값이 return 된다.
• 증가되기 전의 값을 반환하면 return값은 undefined가 되고 undefined는 다음 단계의 누적값으로 사용되어 오류를 일으킨다.

problem 2: 콜백함수(화살표 함수)의 반환값에 대한 이해 부족

problem 1을 해결하여 전위연산자를 사용한 아래와 같은 코드가 가능할 줄 알았다.

function solution(list) {
  return list.reduce(
    (acc, cur) => (cur & 1 ? ++acc[1] : ++acc[0]), // 최종적으로 acc를 return
    [0, 0] // 초기값
  );
}

결론적으로, 위 코드는 잘못되었다. 화살표 함수에 대한 이해도 부족이였다.
위 코드에서 return하는건 증가된 연산 값뿐이다. 결코 acc 누적값이 return되지 않는다.

problem 3: ,(콤마) 연산자에 대한 이해 부족

• 여기서 제일 중요한 부분으로서 , 연산자를 사용하여 두 개의 표현식을 연결할 수 있다는 사실을 몰랐던 것!
• , 연산자를 활용하여 2개의 표현식을 연결, 두 번째 표현식인 acc를 return 값으로 사용할 수 있다.