이번 포스팅에서는 JavaScirpt(자바스크립트)의 프로그램의 수행 로직에 적절한 분기를 두어 흐름을 바꿀 수 있는 조건문(Conditional statement), 특정 로직을 반복 수행하는 등의 반복문(Iteration statement)과 같은 프로그램의 전체적인 수행 흐름에 변화를 줄 수 있는 제어문(Control statement)에 대해 알아보겠습니다.
(1) 조건문 (if, else-if, switch)
(2) 반복문 (for)
1. 조건문(Conditional Statement) - if 문, else-if 문
1-1. 조건문의 정의
- 프로그램 수행 로직에 일정한 조건식을 두어(분기를 설정) 조건식의 결과에 따라 프로그램의 수행 흐름에 변화를 줄 수 있는 구문을 의미하며, 프로그래밍에서 제어문의 종류 중 하나입니다.
1-2. 기본적인 if 문
- 간단한 형태의 조건문 형식입니다.
(1) 문법
if (조건식 1) {
조건식 1이 참일 경우 실행될 구문 1;
}
(2) 문법
if (조건식 1) {
조건식 1이 참일 경우 실행될 구문 1;
} else {
조건식 1이 거짓일 경우 실행되는 구문;
}
- 아래의 코드로 간단한 예제를 확인해 보겠습니다.
- if 문의 조건식이 false이므로 else 문의 구문이 실행됨에 따라 개발자 도구의 Console에서 "A와 B는 다릅니다"가 출력됩니다.
let a = 10;
let b = 15;
if (a === b) {
console.log("A와 B는 같습니다.");
} else {
console.log("A와 B는 다릅니다.");
}
1-3. prompt() 함수, alert() 함수
(1) prompt()
- 사용자에게 입력을 요청할 수 있는 프롬프트 상자 화면을 웹 사이트에 노출시키기 위해 사용합니다.
- 아래와 같이 두 개의 Parameter를 가질 수 있는 함수입니다.
- 사용자는 이에 대해 "확인" 버튼을 클릭하면 사용자가 입력한 값을 문자열로 반환하며 "취소" 클릭 시 null 값을 반환합니다.
- 문법
- prompt(프롬프트 상자에 표시할 레이블 텍스트, 텍스트 박스에 표시할 내용);
let promptObj = prompt("값을 입력하세요.", "Input value");
(2) alert()
- 웹 브라우저에 경고 메시지를 출력할 수 있는 함수입니다.
- 문법
- alert("경고 메시지 박스에 출력할 내용");
1-3. 간단한 if 문과 prompt(), alert() 함수를 활용한 예시 코드
(1) 출력되는 프롬프트 박스에서 260을 입력하여 userFootSize 변수에 저장합니다.
(2) 입력받은 데이터의 형태를 숫자 형태로 변환합니다.
(3) if 문의 조건식이 거짓임에 따라 브라우저 경고창에 전달인자의 값이 출력됩니다.
let userFootSize = prompt("발 사이즈를 입력해주세요");
// 입력받은 데이터를 숫자 형태로 변환
Number(userFootSize);
if (userFootSize >= 270) {
alert("재고가 존재하지 않습니다.");
} else {
alert("재고가 있습니다 확인하시겠습니까?");
}
1-4. else-if 문
- 여러 조건 분기가 필요한 경우 사용할 수 있는 else-if 문입니다.
(1) 문법
if (조건식 1) {
실행문 1;
} else if (조건식 2) {
실행문 2;
} else if (조건식 3) {
실행문 3;
...
} else if (조건식 n) {
실행문 n;
} else {
모든 조건 분기식이 거짓인 경우 실행되는 구문;
}
(2) 위에서 소개된 prompt() 함수를 이용한 else-if 문의 첫 번째 예제 코드를 보면서 좀 더 자세히 알아보겠습니다.
- 프롬프트 박스에 고객의 나이를 50으로 입력하면 변수 inputUserAge에 해당 데이터가 저장됩니다.
- 입력받은 데이터를 숫자 형태로 변환합니다.
- if 문, else-if 조건 분기에 대해 모두 거짓이므로 else 구문의 내용이 실행됩니다.
let inputUserAge = prompt("입장 고객의 나이를 입력하시오.");
Number(inputUserAge);
if (inputUserAge >= 65) {
alert("50% 요금 할인이 적용됩니다.");
} else if (inputUserAge <= 7) {
alert("무료 입장이 적용됩니다.");
} else {
alert("정상 요금이 적용됩니다.");
}
(3) 두 번째 예시 코드입니다.
- 키와 몸무게를 사용자로부터 입력받는다.
- 입력받은 몸무게를 바탕으로 표준 체중 계산식에 의해 표준 체중이 계산된다.
- 만약 입력받은 몸무게가 표준 체중 계산식의 20%를 초과하면 과체중, 20%보다 미달되면 저체중, 10%보다 미달되면 미용체중에 해당되며 나머지 경우는 모두 정상 체중에 해당한다.
- 이에 따라 각 상황에 맞는 조건 분기식을 작성한다.
let inputUserHeight = prompt("사용자의 키를 입력하세요.");
let inputUserWeight = prompt("사용자의 몸무게를 입력하세요.");
// 표준체중 계산식
let standardWeight = (inputUserHeight - 100) * 0.9;
console.log("당신의 표준체중은 %fkg입니다.", standardWeight);
if (inputUserWeight>= (standardWeight * 1.2)) {
alert("과체중입니다.");
} else if (inputUserWeight< (standardWeight * 0.8)) {
alert("저체중입니다.");
} else if (inputUserWeight < (standardWeight * 0.9)) {
alert("미용체중입니다.");
} else {
alert("정상체중입니다");
}
2. 조건문(Conditional Statement) - switch 문
- 다소 복잡한 상황에서의 복수 If 문에 대해 switch 문을 사용하면 보다 간결하게 코드가 작성될 수 있습니다.
- 비교적 표현식(변수)으로 분기가 나눠져야 하는 상황에서 사용될 수 있습니다.
- 해당되는 표현식에 대한 실행문을 수행하고 break를 통해 조건문을 빠져나오게 됩니다.
- 모든 case에 해당되지 않는 경우 마지막 분기인 default문을 만나게 되며 마지막 구문이므로 break는 생략 가능합니다.
(1) 문법
switch (표현식) {
case "표현식" : 실행 구문1;
break;
case "표현식" : 실행 구문 2;
break;
...
case "표현식" : 실행 구문 n;
break;
default : 모두 해당되지 않는 경우 실행되는 최종 구문;
}
3. 반복문(Iteration Statement), Template Literal(템플릿 리터럴)
3-1. 반복문의 정의
- 프로그램의 수행 과정에서 특정한 로직을 반복 수행시킬 수 있도록 할 수 있는 제어구문 중 하나입니다.
3-2. for 문
(1) 문법
for (초기식; 조건식; 증감식) {
반복적으로 실행할 구문;
}
- 반복문을 활용한 예시 코드의 경우 템플릿 리터럴(Template literal)에 대해 알아본 후 예시 코드와 함께 설명하도록 하겠습니다.
3-3. 반복문 for 문의 수행 로직
(a) 표현식의 초기식을 바탕으로 조건식을 검사합니다.
(b) 검사결과가 참이라면 반복문의 내부 구문을 수행합니다.
(c) 내부 구문 수행 후 증감식에 맞게 표현식을 증감시킵니다.
(d) 이후 증감된 표현식을 바탕으로 조건식을 재검사하여 참이라면 반복 구문을 수행합니다.
(e) (c)~(d) 과정을 반복하며 만약 조건식이 거짓인 경우 반복 루프를 탈출하게 됩니다.
3-4. 템플릿 리터럴(Template literal)
(1) 자바스크립트에서는 ES6부터 "템플릿 리터럴(Template literal)"이라는 새로운 문자열 표기법을 도입했습니다.
(2) 템플릿 리터럴은 내장된 표현식과 일반 문자열을 혼합해서 새로운 문자열로 표현할 수 있는 방법입니다.
(3) 일반 문자열 표현 방법과 유사해 보이지만, ``(백틱 기호), 표현식을 감싸서 표현하는 $(Dollar sign) 기호를 사용합니다.
(4) Multi-line strings 지원으로 여러 줄의 문자열도 나눠서 작성할 필요 없이 리터럴 내부에서 개행을 진행해주면 자동으로 줄 개행이 진행되는 편리함이 있습니다.
(5) ES5까지는 복잡한 문자열에 대해 ''(Single quote), ""(Double quote)와 "+" 기호를 사용해 문자열을 결합했고 복잡한 형태의 문자열을 표현할 때 코드의 가독성이 감소하는 문제가 자주 있었으나 템플릿 리터럴의 도입으로 복잡한 문자열 처리도 간결하게 코드를 작성할 수 있게 되었습니다.
(6) 문법
- 리터럴 내부 전체를 (`~`) 처럼 백틱 기호로 묶어줍니다.
- 표현식의 경우 ${표현식명}으로 Dollar sign($), 중괄호 {}를 사용하여 나타냅니다.
3-5. for 문과 템플릿 리터럴을 사용한 간단한 예시 코드
let myName = "wonjun";
for (let index = 1; index <= 5; index++) {
document.write(`${index}. 안녕하세요 ${myName}입니다. <hr>`);
}
<실행 결과>
======================================================================
해당 포스팅에 대해 내용 추가가 필요하다고 생각되면 기존 포스팅 내용에 다른 내용이 추가될 수 있습니다.
개인적으로 공부하며 정리한 내용이기에 오타나 틀린 부분이 있을 수 있습니다.
이에 대해 지적해 주시면 감사하겠습니다.
'프론트엔드(Front-End) > JavaScript' 카테고리의 다른 글
| [JavaScript] - 명시적 형 변환, 암시적 형 변환 (0) | 2022.12.21 |
|---|---|
| [JavaScript] - 변수, 자료형, 연산자 (0) | 2022.12.19 |
| [JavaScript] - About JavaScript, ES5, ES6의 차이 (0) | 2022.12.19 |
댓글