신기한 연구소

안녕하세요. 신기한 연구소입니다.

저번 달 카드 사용 내역을 받아서 화면에 보여주고 싶은 경우,

우리 반 학생 명단을 화면에 보여주고 싶은 경우,

온라인 쇼핑몰에서 장바구니에 담아 준 목록을 또는 기존 구매 목록을 보여주고 싶은 경우 등

공통점은 여러 건의 데이터를 받아서 화면에 보여주고 싶은 경우인데요.

이렇게 목록을 하나씩 꺼내서 화면에 한 줄씩 추가해 주는 반복적 기능을 구현할 때

루프(반복) 문을 사용하면 된답니다.

반복문으로 사용하는 명령어는 for, for...in, for...of, while, do...while이 있는데

이번 포스팅은 for문에 대해 알아보겠습니다.

for문

위 경우 중 어떤것도 괜찮습니다. 같은 경우니까요.

그럼 온라인 쇼핑몰의 장바구니를 가지고 다시 생각해보겠습니다.

사고 싶은 상품을 장바구니에 담아뒀습니다.

장바구니에 들어가면 해당 상품들을 볼 수 있어야겠지요?

장바구니에 5개의 상품이 있다고 가정해봅니다.

for 반복문의 구조를 보겠습니다.

그럼 장바구니 반복문을 위 구조대로 만들어보면서 각 부분에 대해 설명해볼게요.

먼저 이름을 지정하겠습니다.

장바구니 목록은 bucketList

반복문에 사용할 인덱스는 i로 시작해봅니다.

장바구니에는 5개의 상품이 있다고 했습니다. 조건으로 사용하면 됩니다.

for (초기문; i < 5; 반복문) 또는 for (초기문; i < 6; 반복문)

조건문에 둘 중 하나를 사용하면 됩니다.  그런데~~

장바구니에 상품 5개가 있다고 했습니다.

그럼 bucketList.length로 장바구니 내의 목록 개수를 가져오는 length 프로퍼터를 사용했다면

i < 5 스타일이 더 낫겠네요.

그럼 적용해보겠습니다.

for (초기문; i < bucketList.length; 증감문)  // bucketList.length는 5입니다.

조건문이 완성되었으니 이제 초기문을 만들어보겠습니다.

초기문은 반복문이 시작할 때 초기화 해야 하는 변수 또는 구문으로 구성됩니다.

우리는 인덱스로 i를 사용하기로 했습니다.

멋지네요.

이제 마지막 증감문이 남았네요.

증감문이란 말 그대로 값을 증가하거나 감소하는 기능 말합니다.

반복문의 횟수는 i가 맡고 있기에 i를 증가하거나 감소하면 되겠네요.

만약 i를 증감하지 않으면 i는 0으로 계속 존재할 것이고 조건문의 평가는 0 < 5가 돼서

계속 true가 되므로 무한루프로 빠질 수 있답니다. (무한루프가 되면 for문이 계속 실행됩니다.)

증감문은 보통 i++, i-- 연산자를 사용하기도 하고

i+2, i*3 등의 산술식을 사용해도 된답니다.

우리의 장바구니는 0부터 1씩 증가하면 되기에

i + 1 또는 i++을 사용하면 되겠네요. 일반적으로 사용하는 i++로 하겠습니다.

for반복문이고 i=0으로 초기 할당을 하고 i가 장바구니 물품수보다 작은지 평가하고

i를 1 증가시킨 후 평가가 true면 for문의 명령어를 실행합니다.

for문은 하나 이상의 실행문을 만들 수 있는데 블록문 { }로 묶어주면 된답니다.

초기화문은 생략도 가능합니다.

for문 앞에서 i를 선언 및 할당해서 사용할 수도 있지요.

2. 조건문은 참/거짓으로 평가합니다.

그래서 다른 조건문으로 반복을 진행할지 평가할 수 있습니다.

또는 생략도 가능한데 그럼 평가가 되지 않아 무한루프가 됩니다.

for문의 조건이 아닌 for문 내부 명령에서 로직을 넣어 반복문을 중단할지 판단할 때 사용하면 되는데요.

이런 경우 break문으로 종료하는 로직을 넣을 수 있습니다.

3. 반복문도 역시~생략이 가능합니다.

해당 기능을 명령문에 넣어서 사용해도 된답니다.

단순 증감일 경우는 for문에 넣어주면 가독성이 더 좋겠지요?

세 가지 모두 생략 가능하다고 했기에 다음처럼 사용할 수도 있습니다.

for (;;) 

기본 무한루프를 돌리고 for문의 실행 구문 { ] 안에 해당 조건들과 기능을 넣어 구현할 수도 있답니다.

장바구니 목록을 화면에 뿌리기 샘플입니다.

목록을 받아서 하나씩 꺼내 사용해야 하는 경우 반복문을 사용하면 편리합니다.

다음 포스팅에서는 for...in과 for...of에 대해 알아보겠습니다.

즐 코딩하세요.

안녕하세요. 신기한 연구소입니다.

저번 포스팅에 이어 자바스크립트의 조건문 중 하나인 switch문에 대해 알아봅니다.

if...else문과 함께 switch문도 자바스크립트에서 조건문으로 사용됩니다.

if...else문이 궁금하다면 이전 포스팅을 확인해보세요.

2022.06.12 - [Software/JavaScript] - [자바스크립트]if...else문 사용하기 편. (if 조건문)

사실 switch문은 자바스크립트에만 있는 명령어는 아닙니다.

자바(java), C 심지어 sql에서도 switch문을 사용하고 있습니다.

사용법도 거의 같습니다.

하나만 잘 하면 다른 언어도 쉽게 접근할 수 있다는 말이지요.

그럼 switch문의 구조에 대해 알아볼게요.

두 가지 형식으로 구조를 만들었습니다.

다른 점은 default의 위치입니다.

보통은 처음 구조처럼 default를 마지막에 붙이지만

사실 default는 어디에 위치해도 괜찮습니다.

default는 기본으로 실행하는 구문이거든요.

그래서 break;도 포함되지 않습니다.

그럼 위 구문에 대해 설명해보겠습니다.

switch문 옆 괄호 안 exp는 표현식입니다.

이 표현식(expression)을 자바스크립트는 평가합니다.

평가 후 나온 값을 가지고 case문의 라벨 값과 비교하고

같다면 해당 case의 구문(명령문들)을 실행합니다.

결국 exp는 결괏값을 가지고 있어야 한다는 의미로 보입니다.

그리고 그 결괏값이 가지고 case문을 위에서 하나씩 순서대로 찾아다니며

같은지 확인하고 만약 같다면

그 case가 가지고 있는 구문들을 실행해 주는 구조인 것이지요.

그리고 break문을 만나 switch문을 빠져나가게 됩니다.

이 예제를 보면 swich문의 표현식은 val이고

해당 식의 결과는 'a'다.

그래서 첫 번째 case문이 'a'로 같기에 해당 구문을 실행하고

break문을 통해 빠져나온다.

만약 default문을 선두에 둔다면 break;문을 빼먹으면 안 된다

위 예제에서 default문이 최 하단에 있기에 사실 break문은 생략해도 된다.

그 뒤로 실행될 구문이 없기 때문이다.

만약 val 값이 'a', 'b' 두 값이 아니면 해당 case문의 값과 일치하지 않기에

default를 실행하게 된다.

break문

위 예제에 보면 case문의 마지막 위치에 break문이 있다.

case문이 실행되었다면 break문으로 해당 switch문을 종료하겠다는 의미이다.

그런데 사실 break문은 선택이다.

위 예제에서 break문을 뺀다고 해서 오류가 발생하지는 않는다.

하지만 문제가 발생하게 된다.

break문이 없다면 선택된 case문이 실행되고 난 후 switch문이 종료되지 않고

바로 다음 case문으로 이동하게 되고 case문의 값과 비교 절차를 생략한 채

구문만 실행하게 된다.

그렇다면 break문을 안 써야 하는 경우가 있을까?

다음 예제를 살펴본다.

치킨집 메뉴 선택 가격 결정 switch문을 만들어봤습니다.

후라이드는 15,000원이고 양념과 간장치킨은 16,000원입니다.

양념과 간장은 가격이 같습니다.

중복해서 구현할 필요 없이 위 예제처럼 break문을 사용하지 않는다면 

다음 case문인 간장치킨의 구문을 같이 사용할 수 있게 됩니다.

지금까지 자바스크립트 조건문 중 하나인 switch문에 대해 알아봤습니다.

즐 코딩하세요.