[자바스크립트] 전위, 후위 연산자를 사용한 반복문(while)

2025. 5. 11. 00:57·frontend/JavaScript

모던 자바스크립트 튜토리얼의 반복문 예제 문제를 풀다보니 전위, 후위 연산자를 사용한 반복문에서 막혔다.

그래서 이 글을 작성하게 되었다.

 

전위, 후위 연산자

전위 연산자는 ++a 와 같은 형태이다.

이 경우 증가, 감소한 새로운 값을 반환한다.

후위 연산자는 a++와 같은 형태이다.

이 경우 증가, 감소 전의 기존의 값을 반환다.

 

다음은 모던 자바스크립트 튜토리얼의 예제 문제이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

여기서 주의할 점은 alert 문이 조건문과 별개의 문이라는 것이다.

1. 전위형 증가 연산자를 사용한 경우에는 증가된 새로운 값이 반환되는 것이다. 

차례로 진행해보자.

i=0 일때, ++i는 1이 반환된다. 그래서 1<5이기 때문에 1이 출력되고 변수 i에 1이 저장된다.

저장된 값 i =1일때, ++i는 2가 반환된다. 그래서 2<5이기 때문에 2가 출력되고 i에 2가 저장된다.

이런식으로 진행하고 마지막의 ++i가 5일 때, alert는 실행되지 않기 때문에

최종 출력 값은 1,2,3,4이다.

2. 후위형 증가 연산자를 사용한 경우에는 증가되기 전의 값이 반환되고 증가된 값은 변수에 저장된다.

차례로 진행해보자.

i=0 일때, i++은 0이 반환되고 변수i 에 1이 저장된다. 

그리고 위에 작성한 주의할 점을 살펴보면 alert 문이 조건문과 별개의 문이기 때문에 alert(i)는 저장된 값을 출력하게 된다.

그렇기 때문에 i=0일때 alert(i)의 결과는 1이 된다.

i=1 일때, i++은 1이 반환되고 i에 2가 저장된다.

그래서 alert(i)는 2로 출력된다.

이런식으로 진행하고 마지막으로 i++가 4인 경우 변수 i에는 5가 저장되어있기 때문에

최종 출력 값은 1,2,3,4,5가 되는 것이다.

 

 

 

'frontend > JavaScript' 카테고리의 다른 글

[자바스크립트] - 객체  (0) 2025.05.11
[자바스크립트] 콜백함수  (0) 2025.05.11
[자바스크립트] 논리 연산자 (||, &&, !) ⭐  (1) 2025.05.10
[자바스크립트] 조건부 연산자 '?'  (0) 2025.05.10
[자바스크립트] 비교 연산자  (0) 2025.05.10
'frontend/JavaScript' 카테고리의 다른 글
  • [자바스크립트] - 객체
  • [자바스크립트] 콜백함수
  • [자바스크립트] 논리 연산자 (||, &&, !) ⭐
  • [자바스크립트] 조건부 연산자 '?'
eun_log
eun_log
  • eun_log
    개발은
    eun_log
  • 전체
    오늘
    어제
    • 분류 전체보기 (75)
      • 코테 (17)
      • CS (6)
        • 자료구조, 알고리즘 (3)
        • 네트워크 (0)
        • 데이터베이스 (2)
        • 운영체제 (0)
      • frontend (32)
        • JavaScript (29)
        • html&css (1)
        • project_study (2)
      • backend (15)
        • Java (15)
      • project (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
    • 관리
  • 링크

  • 공지사항

  • 인기 글

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
eun_log
[자바스크립트] 전위, 후위 연산자를 사용한 반복문(while)
상단으로

티스토리툴바