자바스크립트로 배우는 프로그래밍 #2 조건문(if)

저번 자바스크립트 이야기 #1.4 에서 비교 연산자에 대한 내용을 다뤘었습니다.

비교연산자는 어떤 두 값을 비교 합니다.

같은지, 다른지, 왼쪽이 오른쪽보다 큰지 혹은 크거나 같은지 말이죠.

아니면 어떤 변수가 값이 할당 되어 있지 않거나 null 일 경우도 비교 연산자를 사용하여 true 혹은 false 라는 둘 중 하나의 boolean 값을 얻게 되죠.

이런 비교 연산자를 사용하여 나온 boolean 값은 어디에 사용 될까요?

boolean 값이 사용 되는 곳은 바로 조건문 입니다.

실제 자바스크립트 코드로 살펴 보죠.

if(true){
    console.log("this is true");
}
if(false){
    //아래 명령은 실행되지 않습니다.
    console.log("this is not showing");
}

프로그래밍에서 대표적인 조건문인 if 입니다.

문법은 단순합니다. if()에서 () 안에 boolan 값이 들어가면 됩니다.

if가 만약 ~ 이라면 이라는 뜻이죠. 

if는 true 라는 bool 값을 만나면 {  } 블럭 안에 있는 명령들을 실행 합니다.

즉, 위의 코드에서는 "this is true" 라는 내용은 콘솔에 출력되겠지만 "this is not showing"은 출력되지 않을 것입니다.

조건에 따라 true 이면 무엇을 처리하고 false 이면 무엇을 처리할 것인지 논리의 흐름을 바꿀 수 있죠.

좀 더 구체적으로 조건문을 사용한 코드를 살펴볼까요?

var age = 25;
if(age < 20) {
    console.log("당신은 아직 성인이 아니군요.");
} else {
    console.log("당신은 성인 이군요, 성인존에 오신 것을 환영합니다.");
}

age 변수는 나이를 넣을 목적으로 만들었습니다.

제 나이인 25라는 정수 값을 넣었습니다.

그리고 조건문을 사용하여 20살 미만인지 확인합니다. age 라는 변수를 값으로 치환 해보면 (25 < 20) 이 됩니다.

이 비교문은 true일까요 false일까요?

네, false 입니다. 25는 20보다 크니까요.

여기서 else의 힘이 발휘합니다. 

else 이전에 있는 if 문이 거짓일 경우 else 의 { } 안에 있는 명령들이 무조건 실행 됩니다.

만약 변수 age 에 17이란 값이 들어가 있다면 if가 true 이므로 else 문은 실행 되지 않습니다.

else 는 이렇게 if문이 false 일 경우 실행됩니다.

else 와 if가 합쳐진 문장도 있습니다.

바로 코드를 보며 이해해보죠.

var age = 25;
if(age < 20) {
    console.log("당신은 아직 성인이 아니군요.");
} else if(age < 30) {
    console.log("당신은 꽃다운 청춘 20대 군요");
} else if(age < 40) {
    console.log("인생에서 가장 빛나는 30대 군요");
} else {
    console.log("인생 선배님 이시군요");
}

else if 는 else 와 마찬가지로 앞의 if 가 false 이면 {} 안의 코드를 실행합니다.

위 코드는 age가 25이므로 계속 조건 검사를 위에서 아래방향으로 하다가 else if(age < 30) 에서 조건이 true 이므로 

꽃다운 청춘이라는 멘트를 출력하고 if 문을 빠져 나옵니다. 즉 아래 else if(age < 40)과 else 는 실행되지 않습니다.

이렇게 if 를 여러개 나열 할 수가 있습니다.

else if를 안쓰고 전부 if로만 쓸 수도 있지만, 위의 예제 같은 경우 if만 쓰게 되면 20대인걸 알아냈음에도 불구하고 30대인지 40대 이상인지 또 조건을 비교하게 됩니다. 쓸데 없는 연산이 많아지는 것이죠!

지금까지 살펴 본것은 단일 조건만 사용해봤습니다.

위 예제 들은 모두 조건이 1개 입니다.

연산자 중에 논리 연산자 라는 것이 있습니다.

대표 적인 논리 연산자로는 &&(그리고/and), ||(또한/or) 연산자가 있습니다.

바로 코드를 보시죠.

var age = 29;
if(age >= 10 && age < 30) {
    if(age == 19 || age == 29)
    console.log("나이의 십의자리가 바뀌기 직전 이네요 즐기세요!");
}

어떤 조건식이 리턴하는 값은 언제나 boolean 이라고 했었죠.

true는 1이라고도 하고 false는 0이라고도 합니다.

&& 연산자는 A와 B가 있다고 했을 때 결과가 아래와 같습니다.

A == 0 , B == 0 이면 0

A == 0 , B == 1 이면 0

A == 1 , B == 0 이면 0

A == 1 , B == 1 이면 1

특징이 딱 보이시나요? && 연산은 조건이 모두 참일 때만 참을 뱉어냅니다.

A "그리고" B 가 모두 참일 때 참. 인거죠.

|| 연산자는 A와 B가 있다고 했을 때 결과가 아래와 같습니다.

A == 0 , B == 0 이면 0

A == 0 , B == 1 이면 1

A == 1 , B == 0 이면 1

A == 1 , B == 1 이면 1

여기도 특징이 딱 보이시나요? || 연산은 조건이 한쪽이라도 참이면 참을 뱉어냅니다.

A "또는" B 중에 하나라도 참일 때 참. 인거죠.

이해가 되셨다면 위의 코드를 다시 보고 이해해보세요.

age 에 29라고 넣었으니 (29 >= 10)도 참이고 (29 < 30) 도 참입니다. 

즉, 위의 첫 if 문 조건식은 모두 참이므로 && 연산이 참을 뱉어냅니다.

그럼 이제 첫 if의 조건이 참이었으니 {} 안에 들어와 두번째 if 문을 읽게됩니다.

age가 29 이니까 (age==19)는 false지만 age == 29는 true죠.

|| 연산은 한쪽만 참이면 조건을 참이라고 보기 때문에 두번째 if 문 또한 실행 되게 됩니다.

즉. 두번 째 if 문의 {} 내용에 "나이의 십의자리가 바뀌기 직전 이네요 즐기세요!"가 콘솔에 출력될 것 입니다.

여기까지 잘 이해 되시나요?

마지막으로 한가지 예제만 더 살펴 볼게요. 자주 쓰는 조건식이라서요~

바로 코드 보시죠.

var foodBox;
if(!foodBox){
    console.log("푸드박스에 아무것도 없습니다.");
}

이전에도 몇번 언급했던 ! 연산자 입니다. 아니다, 혹은 없다 라는 뜻으로 해석할 수 있겠네요.

변수에 값이 지정 되어 있지 않을때, 혹은 '' 라는 빈 값이 들어가 있을때 변수에 값이 없는지 ! 연산자로 확인 합니다.

푸드박스에 값이 없거나 비어있다면 푸드박스는 아무것도 "없다" 라는 말이 참(true) 으로 안의 내용이 실행되게 됩니다.

위의 코드는 실행하면 콘솔에 푸드박스에 아무것도 없다고 출력되겠죠.

if 문은 여기까지만 아셔도 충분하리라 생각 됩니다.

if 문은 자바스크립트 뿐 아니라 거의 모든 언어에 있습니다.

if문은 () 안에 조건문이 들어갑니다. 즉 참 혹은 거짓 값을 배출해내는 조건식만이 들어갈 수 있죠.

하지만 조건문 중에 switch 문이라는 것도 있는데 이 switch는 () 안에 true 와 false를 뱉는 조건식 뿐 아니라 일반 값을 넣을 수 있습니다. 값을 보고 case 를 나눠서 어떻게 흐름을 바꿀지, 혹은 어떤 명령을 실행할지 결정하죠.

다음 포스팅에 switch에 대한 이야기도 써보도록 할게요!

감사합니다.

다 같이 열공 열프 합시다!

공감이 되셨다면 아래 공감 버튼을 눌러주세요~

▼▼▼▼▼▼