🍧 조건문
- if else
- 삼항 연산자 ( 조건부 연산자 )
- switch문
🍡 if와 else
: 조건에 따른 코드실행을 위한 문장을 작성하는데 사용되는 예약어
- if와 else
🏷 코드가 한줄인 경우 생략 가능하다!
if (표현식){ //표현식의 반환값이 true일 경우 실행될 코드 }else{ //표현식의 반환값이 false일 경우 실행될 코드 }
- if와 else if와 else
if (표현식){ //표현식1의 반환값이 true일 경우 실행될 코드 }else if(표현식2){ //표현식2의 반환값이 true일 경우 실행될 코드 }else{ //표현식1과 표현식2의 반환값 모두 false일 경우 실행될 코드 }
불린형으로의 변환
: if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다.
if (0) { // 0은 falsy입니다. ... }if (1) { // 1은 truthy입니다. ... }평가를 통해 확정된 불린값을 if문에 전달한다.
let cond = (year == 2015); // 동등 비교를 통해 true/false 여부를 결정합니다. if (cond) { ... }
🍡 삼항 연산자 (조건부 연산자)
조건 ? 조건이 true일 때 실행 : 조건이 false일 때 실행
: if else 조건문과 비교했을 때 더 간략하게 사용할 수 있다.
예제 )
var score=75; (score==75) ? alert('통과') : alert('실패'); console.log(score); //통과괄호가 있으나 없으나 차이는 없지만, 코드의 가독성 향상을 위해 괄호를 사용할 것을 권유합니다.
다중 ?
:물음표 연산자?를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.
if (age < 3) { message = '아기야 안녕?'; } else if (age < 18) { message = '안녕!'; } else if (age < 100) { message = '환영합니다!'; } else { message = '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'; }let message=(age<3) ? '아기야 안녕?' : (age < 18) ? '안녕!' : (age < 100) ? '환영합니다!' : '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요! ;
🍦 연습문제
삼항 연산자를 이용해 if문이 사용된 아래코드를 변형해보세요.
let result; if(a+b < 4){ result='미만'; } else{ result='이상'; }
나의 답
let result=(a+b=<4) ? alert('미만') : alert('이상');
🍡 switch문
: 조건에 따른 코드실행을 위한 문장을 작성되는데 사용되는 예약어
🏷 if else 문은 불리언 값으로 평가되어야 하지만 swich문의 표현식은 불리언 값보다는 문자열이나 숫자 값이 경우가 많다. 즉, 다양한 상황(case)에 따라 실행해야할 때 사용한다.
switch ( 조건표현식 ) { case 표현식1 : //조건 표현식과 표현식1의 반환값이 일치할 경우 실행될 코드 case 표현식2 : //조건 표현식과 표현식2의 반환값이 일치할 경우 실행될 코드 case 표현식3 : //조건 표현식과 표현식3의 반환값이 일치할 경우 실행될 코드 break; default : //조건표현식과 반환값이 일치하는 case 표현식이 없는 경우 실행될 코드 // 혹은 위쪽 case에서 break를 호출하지 않은 경우에 실행될 코드 }
예제 )
해설 ) switch의 조건케이스가 4일 경우니깐 4가 출력된다.switch(4){ case 1 : console.log(1) case 1 : console.log(2) break; case 3: console.log(3) break; case 4: console.log(4) break; }
- break : 코드블록에서 탈출하는 역할을 한다.
🏷 switch문에서는 코드를 계속해서 읽는것을 멈추게하고 해당 조건표현식에 부합하는 반환값을 출력하도록 한다.
예제 ) break가 없는 경우 : 여러개의 "case"문 묶기
해설 ) 현재 조건 표현식이 1이므로 case 1을 찾아 1을 반환해야하는데 break 값이 적혀져있지 않다. 이런경우에는 consel.log(1)은 무시가된채 코드를 계속해서 아래로 읽어나가게 되고 break이 있는 console.log(2)에서 멈추게 되어 1이 아닌 2의 값을 반환하게 된다.switch(1){ case 1 : console.log(1) case 1 : console.log(2) break; case 3: console.log(3) break; case 4: console.log(4) break; }
예제 ) switch문은 if 문으로 변환하기
🏷 switch와 동일한 동작을 하는 코드를 작성하려면 if문에서 일치 연산자 '==='를 써서 조건을 비교해야 합니다.switch (browser) { case 'Edge': alert( "Edge를 사용하고 계시네요!" ); break; case 'Chrome': case 'Firefox': case 'Safari': case 'Opera': alert( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' ); break; default: alert( '현재 페이지가 괜찮아 보이길 바랍니다!' ); }if 문
if(browser == 'Edge') { alert("Edge를 사용하고 계시네요!"); } else if (browser == 'Chrome' || browser == 'Firefox' || browser == 'Safari' || browser == 'Opera') { alert( '저희 서비스가 지원하는 브라우저를 사용하고 계시네요.' ); } else { alert( '현재 페이지가 괜찮아 보이길 바랍니다!' ); }해설 ) else if문에서
browser == 'Chrome || 'Firefox' || 'Safari'|| 'Opera'처럼 browser을 맨 앞에 한번만 붙이면 안되나라고 생각했지만 이렇게 되면 broweser=='Chrome'과 broweser=='Firefox'로 비교되는것이 아니라 broweser=='Chrome'과 'Firefox'를 비교하는 것이 되기 때문에 명확히 다 써줘야한다!
- default : case 값이 모두 부합하지 않을 때 실행되는 코드이다.
🏷 마지막에는 저절로 switch문을 빠져나가기 때문에 default문에는 break이 필요없다.
예제 ) default
해설 ) switch(5)는 모든 케이스(조건)에 부합하지 않기 때문에 default를 만나 'Out of results'를 반환하게 된다.switch(5){ case 1 : console.log(1); case 1 : console.log(2); break; case 3: console.log(3); break; case 4: console.log(4); break; default : console.log('Out of results'); }
🍦 연습문제
예제 1 ) "switch"문을 사용해 작성된 아래 코드를 if else 문을 사용한 코드로 변환하시오
switch(browser){ case. 'Ege' : alert ("Edge를 사용하고 계시네요!"); break; case 'Chrome'; case 'Firefox'; case 'Safari'; case 'Opera'; alert ("저희 서비스가 지원하는 브라우저를 사용하고 계시네요!"); break; default : alert ("현재 페이지가 괜찮아 보이길 바랍니다!") }
예제 1 정답 )
if (browser=='Edge'){ alert("Edge를 사용하고 계시네요!"); } else if (browser=='Chrome' || browser=='Firefox' || browser=='Safari' || browser=='Opera' ){ alert("저희 서비스가 지원하는 브라우저를 사용하고 계시네요!"); } else { alert("현재 페이지가 괜찮아 보이길 바랍니다!"); }
예제 2 ) 아래 코드를 switch문을 사용한 코드로 바꿔보세요.
let a = 2 if (a ==0 ){ alert(0); } if (a == 1){ alert(1); } if (a ==2 || a==3 ){ alert('2,3'); }
예제 2 정답 )
let a = 2; switch(a){ case 0 : alert(0); break; case 1 : alert(1); break; case 2 : alert('2,3'); case 3 : alert('2,3'); break; }
🍧 반복문
- for문
- while문
- break와 countinue
- 고차 반복문
🍡 for문
for ( begin(변수선언문 또는 할당문); condition(조건식) ; stop(증감식) ){
// for 반복문 본문
}구성요소
begin: 반복문에 진입할 때 단 한 번 실행됩니다.condition: 반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.body: condition이 truthy일 동안 계속해서 실행됩니다.step: 각 반복의 body가 실행된 이후에 실행됩니다.
인라인 변수선언
: 지금까진 ‘카운터’ 변수 i를 반복문 안에서 선언하였습니다. 이런 방식을 ‘인라인’ 변수 선언이라고 부릅니다. 이렇게 선언한 변수는 반복문 안에서만 접근할 수 있습니다. 하지만 인라인 변수 선언 대신, 정의되어있는 변수를 사용할 수도 있습니다.
- 인라인 변수 선언
for (let i = 0; i < 3; i++) { alert(i); // 0, 1, 2 } alert(i); // Error: i is not defined
- 정의되어있는 변수 사용
let i = 0; for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용 alert(i); // 0, 1, 2 } alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음
구성 요소 생략하기
begin생략하기
let i = 0; // i를 선언하고 값도 할당하였습니다. for (; i < 3; i++) { // 'begin'이 필요하지 않기 때문에 생략하였습니다. alert( i ); // 0, 1, 2 }
step생략하기
let i = 0; for (; i < 3;) { alert( i++ ); }
🍡 while문
while (조건표현식) {
// 조건표현식이 참일 경우 실행될 코드
}예제 )
let i = 0; while (i<3){ console.log('현재 i : ', i ); i += 1 } // 현재 i :0, 현재 i :0, 현재 i :2
🍦 연습문제
예제 ) for 반복문을 while 반복문으로 바꾸되, 동작 방식에는 변화가 없도록 해보세요.
for ( let i=0; i<3; i++ ){ console.log(i); }
예제 정답 )
let i=0; while (i<3){ console.log(i); i++; }
🍡 countinue
: for나 while 반복문 내에서 다음 step으로 이동하기 위해 사용하는 예약어이다.
🏷 break문처럼 반복문을 탈출하지 않고 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.
예제 )
해설 ) i==3일 때 countinue이기 때문에 실행을 건너뛰고 증감식으로 다시 이동해 i==4일 때부터 진행된다.let i = 0; while (i<5){ i++ if (i==3){ continue; } } console.log(i); // 1, 2, 4, 5
🍡 break
: for나 while 반복문 내에서 반복문 종료를 위해 사용하는 예약어
예제 ) i==3 일 때 반복문을 탈출한다.
let i = 0; while (i<100){ i+=1; if (i==3){ break; } } console.log(i);
