Javascript_.textContent += 과 .textContent =의 차이

jhson·2023년 12월 29일
0

javascript

목록 보기
15/19

타이머 만들기로,
setInterval()함수를 이용하여 textContent로 화면에 현재 시간과 목표시간과 현재 시간의 차를 실시간으로 1초간 찍어내는 걸 하고 있었다...
분명 맞게 한 것 같은데 이렇게 반복해서 텍스트가 출력되는 문제점을 도저히 찾을 수 없었다.

분명 출력하는 내용은 문제가 없는데....???
p 태그에 텍스트가 지워지지 않고 계속 뒤에 붙어서 출력되는 건
textContent 하는 부분에 문제가 있을 것이라고 판단했고
코드를 유심히 보는 순간!
=가 아니라 +=로 사용하고 있다는 것을 발견했다.

이전에는 일회성 출력으로 사용하고 있었기 때문에 +=나 =나 결과값에는 문제가 없었다.

그렇지만 지금 처럼 setInterval()함수를 사용하여 일정한 간격으로 출력하는 상황에서는 차이점이 명확히 드러나는 순간이었다.

+=를 =로 바꾸어서 실행하니 원하는대로 잘 출력이 되었다.

이걸 찾아내는데 1시간 가량 쓴 것 같다...!
1시간 동안 나는 프로그래밍에 재능이 없나 등등등의 오만가지 생각도 들었고 좌절감도 맛봤다ㅎㅎ
덕분에 절대로 같은 실수는 반복하지 않을 것 같다는 생각이 들었다.

profile
게임회사 주니어 개발pm에서 프론트엔드 개발자로 전향하는 과정

0개의 댓글