[JavaScript] Invalid left-hand side expression in prefix operation, Number( ) 함수에 연산자 적용 에러

1. 문제

document.querySelector('.score').textContent = --Number(document.querySelector('.score').textContent);

score 클래스 속성의 값을 Number( ) 함수를 통해 숫자로 변환한 다음에 전위감소연산자(--)를 실행했다. 의도는 score에 있는 값을 불러와서 -1 한다음에 대입하는 것인데 에러가 발생했다.

 

Uncaught ReferenceError: Invalid left-hand side expression in prefix operation

크롬 콘솔에서 해당 에러 메세지를 띄워줬다.

 

2. 문제 원인

--Number(...) 부분이 잘못되었다.

• --(전위 감소 연산자)는 변수 또는 속성에만 적용 가능하다.
• Number(...)는 새로운 숫자를 반환할 뿐, 직접 변경 가능한 변수나 속성이 아니다.
• --Number(...)는 숫자 값(리터럴)에 직접 감소 연산을 적용하려고 시도하므로, 유효하지 않은 왼쪽 표현식으로 간주되어 에러 발생.

즉, Number( )의 결과 값은 literal로 연산자를 적용할 수 있는 대상이 아니다. 

 

3. 문제 해결

let scoreElement = document.querySelector('.score'); 
let score = Number(scoreElement.textContent); // 숫자로 변환
scoreElement.textContent = --score; // 전위 감소 후 다시 저장

.textContent를 먼저 숫자로 변환한 후, 변수에 저장하고 감소한 후 다시 반영하면 된다.