코드를 구성하다보면 특정 조건에서 발생하도록 유도하는 조건문, 반복되는 문장을 쉽게 반복할 수 있는 반복문과 같은 제어문들이 필요하다.
자바스크립트에서 조건문의 사용은 if
를 통해 사용할 수 있다.
if (조건) {
// 조건이 참(true)일 경우 실행할 내용
}
위와 같은 형태로 사용할 수 있다. 조건의 경우 결과가 참(true) 혹은 거짓(false)로 나오는 것을 사용할 수 있다. 조건의 결과가 참(true)일 때만 {}
내부의 코드가 실행된다.
if (id === 'admin') {
alert('Welcome')
}
id
가 admin
일 경우에 Welcome
이라는 알림창을 띄우는 코드다.
if
의 결과가 거짓일 경우는 어떻게 처리해야 할까?
else
를 사용하자!
if (조건) {
// 조건이 참일 경우 실행
} else {
// 조건이 거짓일 경우 실행
}
조건이 거짓일 경우에 실행할 문장을 else
의 블록 안에 넣어주면 된다.
if (id === 'admin') {
alert('Welcome')
} else {
alert('너는 누구냐')
}
admin
이 아닌 다른 사람일 때, 너는 누구냐
라는 알림창이 뜨도록 한다.
또,
admin
이 아닌데, 아예 모르는 사람이 아닌 경우는 어떻게 할까?
else if
를 사용한다.
if (조건1) {
// 조건1이 참일 경우 실행
} else if (조건2) {
// 조건2가 참일 경우 실행
} else {
// 조건1, 조건2가 거짓일 경우 실행
}
else if
에 또 다른 조건을 넣어줄 수 있다.
if (id === 'admin') {
alert('Welcome')
} else if (id === 'tommy'{
alert('Hi, tom')
} else {
alert('너는 누구냐')
}
admin
은 아니지만, tommy
인 경우 Hi, tom
이라는 알림창이 뜨도록 한다.
else if
의 경우 if
와 else
사이에 여러개를 사용할 수 있다. (많이 사용할 수 있지만, 아마 더 복잡해지지 않을까...?)
조건에 대해서 잘 정의한다면,
조건에 따라 원하는 값을 실행할 수 있다.
if
와 else
사이에 많은 else if
가 겹치다보면 코드가 점점 더 읽기 어려워질 것이다. 만약 위의 예시와 같이 비교하는 값이 id
와 같이 정해진 타입이 넣어지는 경우 더 간단하게 만들고 싶어진다.
switch
를 사용해보자.
(모든 경우를 switch
로 대체할 순 없을 것이다. 하지만, 가능한 경우 더 간단하게 바꿀 수 있을 것이다.)
switch(변수) {
case 값:
// 변수 == 값일 경우 진행
break;
case 값2:
// 변수 == 값2일 경우 진행
break;
default:
// 값, 값2도 아닐 때 진행
}
형태로만 봐서는 와닿지 않는다. 위의 예시로 다시 보자.
switch(id) {
case 'admin':
alert('Welcome');
break;
case 'tommy':
alert('Hi, Tommy');
break;
default:
alert('너는 누구냐');
}
이렇게 작성할 경우 if
를 사용한 문장과 동일한 결과를 출력한다. switch
의 경우 전달된 파라미터와 맞는 케이스를 찾아 실행한다. default
의 경우 else
와 비슷하다.
break
는 뭐지?
switch
의 경우 맞는 케이스를 찾고, 그 아래로 모든 코드를 실행한다.
switch(id) {
case 'admin':
alert('Welcome');
case 'tommy':
alert('Hi, Tommy');
default:
alert('너는 누구냐');
}
break
가 없이 id
가 admin
인 경우 실행하면, Welcome부터 너는 누구냐까지 모두 실행된다. 중간에 break
를 사용해 끊어주는 것이다.
잘만 사용하면, 상위에 정의된 케이스에 하위에 정의된 케이스의 구문까지 실행할 수 있도록 유도할 수 있다.
조건문은 조건에 따라 실행한다.
if, else, else if
, switch, case
를 사용한다.