안녕하세요. 신기한 연구소입니다.
이번 포스팅은 자바스크립트에서 조건문을 사용하는 방법을 알아봅니다.
조건문은 if...else 문과 switch 문이 있는데 if...else 문 먼저 알아볼게요.
조건문은 언제 사용할까요?
어떤 식이 참인 경우 사용할 수 있습니다. 다른 표현으로 논리 조건이 참인 경우를 말하는데요.
흔히 사용하는 예를 들어볼게요.
웹사이트에 가입할 때 if...else 조건문을 사용할 수 있습니다.
화면에서 입력받은 비밀번호와 제대로 입력했는지 확인하는 재입력한 비밀번호를 비교합니다.
만약 처음 입력한 비밀번호와 확인용으로 입력한 두 번째 비밀번호가 같다면 패스하고
다르면 비밀번호가 다르니 확인하라는 메시지를 보여줄 수 있게 됩니다.
if문은 논리 조건이 참인 경우 사용하고 else 문은 거짓이라면 실행할 명령문을 사용할 수 있습니다.
기본 구조를 보겠습니다.
|
1
2
3
4
5
|
if (조건) {
구문1;
}else{
구문2;
}
|
cs |
if 문 다음에 ( )를 사용해서 조건 (condition)을 설정합니다.
조건은 true나 false 인 논리 조건으로 평가할 수 있다면 어떤 표현식도 사용할 수 있습니다.
조건이 true로 평가된다면 구문1을 실행하게 됩니다.
조건이 false로 평가된다면 구문2를 실행하게 됩니다.
조건이 여러 개인 경우는 else if를 사용하면 됩니다.
기본 구조를 보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
|
if (조건1) {
구문1;
}else if (조건2) {
구문2;
}else if (조건3) {
구문3;
...
}else{
구문n;
}
|
cs |
조건이 여러개 존재한다면 위 예시처럼 사용하면 됩니다.
이 경우 처음 true로 평가되는 if문의 구문을 실행하게 됩니다.
조건 2와 조건 3이 true인 경우 먼저 만나는 조건 2의 구문만 실행하게 됩니다.
|
1
2
3
4
5
6
7
8
9
|
if (true){
console.log('A');
}else if (true){
console.log('B');
}else if (true){
console.log('C');
}else{
console.log('D');
}
|
cs |
위 예시를 보면 조건이 모두 true이고 else문도 존재합니다.
앞서 이야기한 것처럼 가장 먼저 만나는 true문의 구문만 실행한다고 했습니다.
위 예시의 결과는 A만 출력됩니다.
if...else문을 사용할 때 해당 구문은 블록문(중괄호, {})를 사용하지 않으면
단 한 줄만 가능하고 그 이상의 구문이 필요하면 블록문을 사용해야 합니다.
한줄만 사용한다고 해도 가급적 중괄호를 사용하는 게 좋답니다.
true와 false처럼 명확한 참과 거짓이 있는 반면
자바스크립트는 참값, 거짓 값이 존재합니다.
이는 불리언 타입의 true와 false는 아니지만 그렇게 평가되는 값이 있다는 의미입니다.
false, undefined, 0, null, NaN, ""(빈 값)은 자바스크립트에서 falsy로 false로 평가된답니다.
|
1
2
3
4
5
6
7
|
var chk;
if (chk) {
console.log("chk");
}else{
console.log("false");
}
|
cs |
예를 들어볼게요.
변수 chk는 선언은 했지만 할당(초기화)을 하지 않았습니다.
그럼 당연히 undefined로 채워질 겁니다.
undefined는 falsy값으로 false로 평가됩니다.
그래서 조건은 false가 되고 else의 구문이 실행되어 콘솔에 "false"가 출력됩니다.
위 6개의 값이 false로 평가된다고 했습니다.
그래서 객체를 포함, 위 6개를 제외한 다른 모든 값은 조건문에서 true로 평가된다는 것을
명심해야 합니다.
마지막으로 Boolean 객체 생성자에 대해 알아볼게요.
다음 예제를 보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var b = new Boolean(false);
if(b) {
console.log("b is true");
}else{
console.log("b is false");
}
if (b == true) {
console.log("원시 true값과 같다");
}else{
console.log("원시 true값과 다르다");
}
|
cs |
if(b)는 true일까요? false일까요?
위에서 설명했듯이 6개의 값 외에는 true로 평가된다고 했습니다.
그래서 1번에서 new를 사용해 객체를 생성했기 때문에 생성자에 false를 넘겼더라도
객체 b는 true로 평가됩니다. 값은 false를 갖고 있겠지요.
true로 평가되었으면 9번 if(b == true)도 true일까요?
9번 라인은 객체 b 자체를 평가했다면 true 겠지만 b의 값이 true와 같은지(==) 평가했고
b 객체의 값은 false로 생성했기 때문에 true와 같은지 비교하면 false가 됩니다. (다르다는 겁니다.)
이 부분을 잘 주의해서 테스트 코딩도 해보길 바랍니다.
if문을 작성할 때 가끔 혼동할 때가 있는데
바로 if (조건)을 a = b와 같이 할당 문으로 지정하는 경우가 있습니다.
a = b가 아닌 a == b로 사용해야 합니다.
지금까지 자바스크립트의 if...else문에 대해 알아봤습니다.
즐 코딩하세요.
'Software > JavaScript' 카테고리의 다른 글
| [자바스크립트]for문 사용하기 편. (루프와 반복) (0) | 2022.06.22 |
|---|---|
| [자바스크립트]switch 문 사용하기 편. (조건문) (0) | 2022.06.19 |
| [자바스크립트] 리터럴(literal) 쉽게 이해하기 편. with javascript (1) | 2022.05.24 |
| [초보코딩]자바스크립트 사용하기 편. -Javascript (0) | 2022.04.25 |
| [왕초보]자바스크립트 Function.prototype.bind() 함수 구문 이해하기. bind(). (0) | 2022.04.10 |
