조건문 if, else, else if (ft.조건에 필요한 연산자)

조건문(conditional statements)

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/conditionals

판단 내리기 — 조건문 - Web 개발 학습하기 | MDN

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 조건문 중에서 가장 기본이 되는 실행문은 if 문입니다.

자바스크립트에서 사용할 수 있는 조건문의 형태는 다음과 같습니다.

1. if 문
2. if / else 문
3. if / else if / else 문
// 4. switch 문  (포스팅 X)

---

if 문

if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다.(실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있습니다.)

if (조건) {
    조건의 결과가 참일 때 실행하고자 하는 실행문;
}

if (true) {
	console.log('hello world');
}

if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행됩니다. 지금은 true를 넣었기 때문에 console.log('hello world')가 실행됩니다.

if 문을 순서도로 표현하면 다음 그림과 같이 표현할 수 있습니다.

(참고. tcpschool ) if 조건 플로우 이미지

else 문

if 문과 같이 사용할 수 있는 else 문은 if 문의 표현식 결과가 거짓(false)일 때 주어진 실행문을 실행합니다.(실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있습니다.) else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 합니다.

if (조건) {
  만약 조건(condition)이 참일 경우 실행할 코드
} else {
  대신 실행할 다른 코드
}

여기서 조건을 더 추가하고 싶으면 else if문을 사용합니다.

else if 문

else if 문은 if 문처럼 표현식을 설정할 수 있으므로, 중첩된 if 문을 좀 더 간결하게 표현할 수 있습니다. 하나의 조건문 안에서 if 문과 else 문은 단 한 번만 사용될 수 있습니다. 하지만 else if 문은 여러 번 사용되어 다양한 조건을 설정할 수 있습니다.

if (조건1) {
    조건1의 결과가 참일 때 실행하고자 하는 실행문;
} else if (조건2) {
    조건2의 결과가 참일 때 실행하고자 하는 실행문;
} else {
    조건1의 결과도 거짓이고, 조건2의 결과도 거짓일 때 실행하고자 하는 실행문;
}

let name = 'kimcoding';
let course = 'seb be'

if(name === 'kimcoding' && course === 'seb fe') {
	console.log('정보가 일치합니다.')
} else if (name === 'kimcoding' && course !== 'seb fe') {
	console.log('코스를 확인하세요.') // '코스를 확인하세요.'
} else {
	console.log('일치하지 않는 정보입니다.')
}

if문과 else문은 두 번 이상 사용할 수 없지만 else if문은 여러 번 사용이 가능합니다.

let age = 15;
if (age < 8) {
  console.log('미취학아동입니다.');
} else if (age >= 8 && age < 14) {
  console.log('초등학생입니다.');
} else if (age >= 14 && age < 17) {
  console.log('중학생입니다.'); // '중학생입니다.'
} else if (age >= 17 && age < 20) {
  console.log('고등학생입니다.');
} else {
  console.log('성인입니다.');
}

if / else 문을 순서도로 표현하면 다음 그림과 같이 표현할 수 있습니다.

(참고. tcpschool ) else 조건 플로우 이미지

 

(참고. tcpschool ) else if 조건 플로우 이미지

---

삼항 연산자에 의한 조건문

자바스크립트에서는 간단한 if / else 문을 삼항 연산자를 이용하여 간단히 표현할 수 있습니다.

조건 ? 반환값1 : 반환값2

let x = 3, y = 5;
let result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");

---

조건문에서 조건(표현식) 작성시 다양한 연산자를 사용하고 필요로하다. 

연산자는 https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math#comparison_operators 이곳에서 추가확인

JavaScript의 기본적인 연산 - 숫자와 연산자 - Web 개발 학습하기 | MDN

동치연산자 (===)

동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환합니다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환합니다.

let name = 'kimcoding';
if (name === 'kimcoding') {
	console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}

let name = 'parkhacker';
if (name !== 'kimcoding') {
	console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

비교연산자(> , < , >= , <=)

비교연산자는 두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.

let num = 5;
if (num < 10) {
	num = num + 1;
}
console.log(num); // 6

if (num > 5) {
	num = num - 1;
}
console.log(num); // 5

논리연산자(&&, ||)

let age = 15;
if (age > 13 && age <= 19) {
	console.log('청소년입니다.'); // '청소년입니다.'
}

부정연산자(!)

부정연산자는 조건을 부정합니다. 조건이 true이면 false, 조건이 false이면 true를 리턴합니다.

let num = 11;
if (!(num === 10)) {
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

 

※ 이번 글 내용은 정리가 잘되어있는 tcpschool 참고 http://www.tcpschool.com/javascript/