if 조건문
조건문을 사용하여 비밀번호를 입력할 때 잘못 입력하면 로그인이 안되도록 기능하도록 한다.
특정 조건 만족 시(조건이 true일 경우) 실행하는 명령의 집합으로 특정 조건 속에서 작업을 수행하고 싶을 때 사용한다.
if / else / else if
조건이 1개인 경우
if(조건1){
//조건1이 true라면 실행
} else{
//조건1이 false라면 실행
}if(5>3){
console.log("5는 3보다 크다. ") //출력
}
else{
console.log("5는 3보다 작다.")
}else는 필수가 아니다.
거짓일 때 실행하고 싶지 않을 때는 괄호 속 조건 앞에 not인 !을 붙혀준다.
let isShow=true;
let checked=false;
if(isShow){
console.log("show!") //출력
}
if(!checked){ //not일 때 실행되도록
console.log("checked!")
}조건이 2개인 경우
if(조건1){
//조건1이 true 라면 실행
}else if(조건2)
//조건2가 ture 라면 실행
}else{
//조건1과 조건 2가 모두 참이 아닐 때 실행
}let name='홍길동';
if (name==='홍길동'){
console.log('홍길동') //출력
}else if(naem==='성춘향'){
console.log('성춘향')
}
else{
console.log('임꺽정')
}만약 이름이 '변사또'라면 조건1과 조건2 모두 충족하지 않으므로 임꺽정이 출력될 것이다.
이를 응용하여 로그인 화면을 구성해본다면
const myid='abc';
const mypw='1234';
let inputid=prompt('id 입력하세요');
let inputpw
// console.log(inputid, inputpw)
if(myid===inputid){
inputpw=prompt('pw 입력하세요');
if(mypw===inputpw){
console.log('로그인 완료');
}
else{
console.log('비밀번호가 틀립니다. ');
}
}
else{
console.log('아이디가 틀립니다.');
}if 중첩
조건 2개가 모두 충족되야 실행되도록 설계
if(조건1){
if(조건2){
//실행1
}else{
//실행2
}
}조건1과 조건2가 모두 true라면 실행1
조건1만 충족하고 조건2는 false라면 실행2
예제.
prompt와 if문을 이용해서 console 창에 연령대별/성별 구분지어 출력하기
const age =Number(prompt('나이 입력하세요.')); //prompt로 받는 건 문자열
const gender=prompt('성별을 입력하세요 (여 / 남)');
if(age>=20){
if(gender==='여'){
console.log('성인 여성')
}
else{
console.log('성인 남성')
}
}
else{
if(age>=17){
if(gender==='여'){
console.log('여자 고등학생')
}
else{
console.log('남자 고등학생')
}
}
else{
if(age>=14){
if(gender==='여'){
console.log('여자 중학생')
}
else{
console.log('남자 중학생')
}
}
else{
if(age>=8){
if(gender==='여'){
console.log('여자 초등학생')
}
else{
console.log('남자 초등학생')
}
}
else{
if(gender==='여'){
console.log('여자아기')
}
else{
console.log('남자아기')
}
}
}
}
}한가지 팁!
console.log('성인 여성')처럼 뒤에 성별을 반복적으로 붙혀서 출력해야 하니까
console.log((백팁)성인${gender}(백팁)) 변수가 출력되도록 하여 쉽게 반복, 출력가능하다.
예제의 응용
위의 예제를 짧게 요약하기 위해 함수를 선언하여 작성한다.
const age = Number(prompt('나이 입력하세요.'));
const gen = prompt('성별을 입력하세요 (여자 / 남자)');
if(gen==='남자'){
ageFunc(age , gen);
}else{
ageFunc(age , gen);
}
function ageFunc(age, gender){
if(age>=20){
console.log(`성인${gender}`)
}
else if(age>=17){
console.log(`고등학생${gender}`)
}
else if(age>=14){
console.log(`중학생${gender}`)
}
else if(age>=8){
console.log(`초등학생${gender}`)
}
else{
console.log(`유아${gender}`)
}
}switch 조건문
switch(변수)
case 값1:
//변수와 값1이 일치하면 실행
break; //case1 코드의 종결
case 값2:
//변수와 값2가 일치하면 실행
break;
default:
//case의 값 중 일치하는 값이 없을 때 실행
break;
}switch(변수)의 변수와 특정 case의 값이 일치하는 경우 해당 case가 실행된다.
default는 선택사항이지만 사용하길 권장된다.
default가 실행된는 경우는 switch문이 끝난 경우이므로 break;가 필수사항은 아니다.
break;가 없을 경우 모든 case가 전부 실행되므로 반드시 작성할 때 마지막에 넣어야 한다.
let a=2*2;
switch(a){ //변수 a
case 3:
console.log('현재 값은 3');
break;
case 4:
console.log('현재 값은 4'); //출력
break;
case 5:
console.log('현재 값은 5');
break;
default:
console.log('이상한 값...')
break;
}여기서 break;가 없다면 모든 출력값이 console에 전부 출력된다.
let grade = 'A'
switch(grade){
case 'A' :
console.log('학점 A');
break;
case 'B':
console.log('학점 B');
break;
case 'C':
console.log('학점 C');
break;
}3항 연산자
IF 문을 간단하게 표현하는 방법 (주로 React에서 많이 사용)
예제1.
if문을 간단하게 표현하는 3항 연산자
let myid='abc';
const inputid =prompt('아이디를 입력하세요');
myid === inputid ? console.log('존재하는 아이디') : console.log('존재하지 않는 아이디');3항 연산자ver.
let myid='abc';
let mypw=123;
const inputid =prompt('아이디를 입력하세요');
const inputpw = Number(prompt('아이디를 입력하세요'));
myid === inputid ? mypw ===inputpw ? console.log('로그인 성공') : console.log('비밀번호가 틀렸습니다.') : console.log('아이디가 틀립니다.');조건 뒤에는 ?
출력값 구분은 :
위의 조건문 코드를 좀 보기 쉽게 해석해본다면
myid === inputid ?
mypw ===inputpw ?
console.log('로그인 성공') :
console.log('비밀번호가 틀렸습니다.') :
console.log('아이디가 틀립니다.');예제2.
if(5>3){
console.log("5는 3보다 크다. ") //출력
}
else{
console.log("5는 3보다 작다.")
}3항 연산자 ver.
(5>3) ? console.log("5는 3보다 크다.") : console.log("5는 3보다 작다.");예제3.
let name='홍길동';
if (name==='홍길동'){
console.log('홍길동') //출력
}else if(name==='성춘향'){
console.log('성춘향')
}
else{
console.log('임꺽정')
}3항 연산자 ver.
let name='홍길동';
name ==='홍길동'? console.log('홍길동') : name ==='성춘향'? console.log('성춘향') :console.log('임꺽정');예제4.
const age = Number(prompt('나이 입력하세요.'));
const gen = prompt('성별을 입력하세요 (여자 / 남자)');
if(gen==='남자'){
ageFunc(age , gen);
}else{
ageFunc(age , gen);
}
function ageFunc(age, gender){
if(age>=20){
console.log(`성인${gender}`)
}
else if(age>=17){
console.log(`고등학생${gender}`)
}
else if(age>=14){
console.log(`중학생${gender}`)
}
else if(age>=8){
console.log(`초등학생${gender}`)
}
else{
console.log(`유아${gender}`)
}
}3항 연산자 ver.
const age = Number(prompt('나이 입력하세요.'));
const gen = prompt('성별을 입력하세요 (여자 / 남자)');
gen==='남자'? ageFunc(age , gen) : ageFunc(age , gen) :
function ageFunc(age, gender){
age>=20
?console.log(`성인${gender}`)
: age>=17
? console.log(`고등학생${gender}`)
: age>=14
? console.log(`중학생${gender}`)
: age>=8
? console.log(`초등학생${gender}`)
: console.log(`유아${gender}`) 예제.
현재 시간이 오전인지 오후인지 확인하는 코드를 3항 연사자로 작성한다.
이를 now라는 변수에 저장한다.
new Data().getHours()는 현재의 '시간'만을 가져오는 코드로 0~23까지의 숫자를 반환하고 0은 자정, 12가 정오를 뜻한다.
let now = new Date().getHours();
console.log(typeof now);
now < 12 ? console.log('오전') : console.log('오후');