이번에는 자바스크립트의 조건문과 반복문과 같은 문장에 대해서 알아보자. 자바스크립트로 무언가 실행시키려면 문장을 사용해야 한다. 여러 문장(Statement)을 잘 사용해야 좋은 프로그래밍을 할 수 있다.
소스코드의 이해도를 높이기 위해 공백과 주석을 적절히 사용하는 것이 좋다. 공백과 줄넘김을 자바스크립트 압축기 JSMin, Packer를 사용하여 일부터 제거하기도 한다. 모든 자바스크립트 문장은 세미콜론을 사용하여 문장의 끝을 나타낸다. 한 줄의 문장에서 세미콜론이 없으면 자동으로 붙여주지만 사용자가 붙이는 것이 좋다.
자바스크립트에서 사용하는 문장은 다음과 같다. 하나씩 살펴보자.
- if/else
- switch
- case
- default
- while
- do/while
- for
- for/in
- break
- continue
- try/catch/finally
아래의 표현도 문장이다.
표현문(Expression Statement)이라고 한다.
a = 1;
조건문 (if, switch, 삼항연산자)
조건문은 대부분의 언어에서 지원해 주는 문장이다. 표현식에 따라 흐름을 분기해서 문장을 수행한다.
아래의 if문에서 표현식이 참이면 문장1을 수행하고 표현식이 거짓이면 아무것도 하질 않는다.
if(표현식)
문장1
아래의 if문에서 표현식이 참이면 문장1을 수행하고 표현식이 거짓이면 문장2를 수행한다.
if(표현식)
문장1
else
문장2
아래의 if문에서 표현식1이 참이면 문장1을 수행하고 표현식2가 참이면 문장2를 수행하고 거짓이면 문장3을 수행한다.
if(표현식1)
문장1
else if(표현식2)
문장2
else
문장3
switch 문도 if문 처럼 조건에 따라 분기합니다. 반복된 if문을 대신하여 사용하기에 좋다. switch 문으로 코드를 잘 작성하면 소스도 깔끔해지고 읽기도 편해진다. case와 default를 같이 사용한다.
switch (표현식) {
case 조건1:
문장1;
break;
case 조건2:
문장2;
break;
}
switch (stateCode) {
case 'OR','MA':
state = 0.5;
break;
case 'MO','WI' :
state = 1.5;
break;
}
아래의 삼항연산자에서 표현식이 참이면 문장1을 수행하고 표현식이 거짓이면 문장2를 수행한다.
(표현식) ? 문장1 : 문장2;
삼항연산자로 아래의 if문을 한줄로 표현이 가능하다.
var result;
if(i == 0)
result = "zero";
else
result = "not zero";
var result = (i == 0) ? "zero" : "not zero";
반복문 (while, do while, for, for in)
무언가 반복적인 실행이 필요할 때는 반복문을 사용한다.
while 문은 반복문중에서 가장 기본적인 문장이다.
while(조건식)
문장
var i = 0;
while (i < 10) {
i++;
}
do while 문은 자주 사용하지 않는다. while 문과 달리 한번 실행하고서 조건식과 비교한다.
do
문장
while (조건식);
var i = 0;
do {
i++;
} while (i < 10)
정형화된 크기의 반복을 사용할 때는 for 문을 사용한다. 프로그래밍에서 많이 사용하는 문장이다.
for(초기화;조건식;증가)
문장
var sum = 0;
for(var i = 0 ; i < 10 ; i++) {
sum = sum + i;
}
for ... in 문은 연관배열을 사용할 때 유용하다. for... in 문은 객체의 프로퍼티뿐만 아니라 프로퍼티 값도 접근 가능하다.
for (변수 in 객체)
문장
var list = ['a', 'b', 'c', 'd', 'e'];
var result = '';
for (var i in a) {
result += i + ' = ' + list[i] + '\n';
}
result;
반복문에서 아래의 문장을 같이 사용한다.
- break : 반복문에서 빠져나옴
- continue : 새로운 반복을 시작
자바스크립트의 예외 처리를 위해서 다음의 문장을 사용한다.
try {
실행 문장
}
catch (e) {
예외처리 문장
}
finally {
무조건 실행될 문장
}
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
[JavaScript] 학습정리 - 9.Number 객체 (0) | 2023.03.01 |
---|---|
[JavaScript] 학습정리 - 8.객체 (0) | 2023.03.01 |
[JavaScript] 학습정리 - 6.연산자 (0) | 2023.03.01 |
[JavaScript] 학습정리 - 5.변수 (0) | 2023.03.01 |
[JavaScript] 학습정리 - 4.데이터 타입 (0) | 2023.03.01 |
댓글