TIL 09 - 조건문, 반복문, 논리 연산자

crystalee·2021년 6월 23일
0

JavaScript

목록 보기
4/15
post-thumbnail

👉 Boolean

앞에서 비교 연산의 결과로 true or false를 얻을 수 있다 배웠는데 여기서 true or false은 숫자와 문자처럼 언어에서 제공하는 데이터 형이다. 불린으로 올 수 있는 값은 true와 false 두가지 밖에 없고 불린은 조건문에서 핵심적인 역할을 한다.

✍️ 조건문의 문법

if 문

조건문은 if로 시작하며 if뒤 괄호에 조건이 오고, 괄호안에 들어가는 조건을 평가하는데, 그 결과가 true면 코드 블록이 실행된다.

if(ture){
  alert('result : true');
} /result : true 이다.
if(false){
  alert('result : true');
} /아무것도 출력하지 않는다. if 뒤에 false가 왔기 때문에
if(ture){
  alert(1);
  alert(2);
  alert(3);
  alert(4);
} 
alert(5);
/12345가 출력된다.
if(false){
  alert(1);
  alert(2);
  alert(3);
  alert(4);
} 
alert(5);
/5만 출력된다.왜냐하면 if문의 조건이 true이면 중괄호 시작,끝까지의 구간이 실행되고 false
이면 중괄호 구간이 실행되지 않기 때문에 alert(5);만 실행된 것이다.

else 문

if문에 else절을 붙일 수 있고 else뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

if(ture){
  alert(1);
} else {
  alert(2);
}  
/결과는 1이다.
if(false){
  alert(1);
} else {
  alert(2);
}  
/결과는 2이다.

예제

const age = parseInt(promt("How old are you?"));

if(isNaN){
  console.log("Please write a number");
} else {
  console.log("Thank you for writing your age");
}  
/true : prompt에 문자를 넣으면 please wirte a number이 뜨고,
 fasle : prompt에 숫자를 넣으면 Thank you for wirting your age가 뜬다.

else if 문

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리할 때 사용한다. else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

if(false){
  alert(1);
} else if(ture) {
  alert(2);
}  else if(ture) {
  alert(3);
}  else {
  alert(4);
}  
/결과는 2이다.true가 나오면 그 뒤 조건은 보지 않는다.
if(false){
  alert(1);
} else if(false) {
  alert(2);
}  else if(ture) {
  alert(3);
}  else {
  alert(4);
}  
/결과는 3이다.true가 나오면 그 뒤 조건은 보지 않는다.
if(false){
  alert(1);
} else if(false) {
  alert(2);
}  else if(fasle) {
  alert(3);
}  else {
  alert(4);
}  
/결과는 4이다.

✍️ 논리 연산자

자바스크립트에는 세 종류의 논리 연산자 ||(or), &&(and),!(not)이 있습니다.

|| (OR)

result = a || b;

모두 false인 경우를 제외하고, 둘 중 하나면 true이면 결과는 항상 true이다.

alert(true || true);  //true

alert(false || true);  //true

alert(true || false);  //true

alert(false || false);  //false

&& (AND)

result = a && b;

모두가 true일 때 true를 반환한다. 하나라도 false가 있으면, false를 반환한다.

alert(true && true);  //true

alert(false && true);  //false

alert(true && false);  //false

alert(false && false);  //false

! (NOT)

부정의 의미로, 불린의 값을 역전시킨다. true를 false로 false를 true로 만든다.

result = !value;

NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행합니다.
1. 피연산자를 불린형 (true/false)으로 변환한다.
2. 1에서 변환된 값의 역을 반환한다.

alert(!true);  //false

alert(!0);  //true

NOT을 두개 연달아 사용하면 값을 불린형을 변환할 수 있다.

alert(!!"non-emptu string");  //true

alert(!!null);  //false

기타 false로 간주되는 데이터 형

if(!''){
  alert('빈 문자열');
} 
if(!undefined){
  alert('undefined);
} 
if(!''){
  alert('빈 문자열');
} 
var a;
if(!a){
  alert('값이 할당되지 않은 변수');
} 
if(!null){
  alert('null');
} 
if(!NaN){
  alert('NaN');
} 

✍️ 반복문 문법

while 문

while(condition){
    //code
    //'반복문 본문(body)'이라 불린다.
} 
let i = 0;
//종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다.

while(i < 0){
    //반복이 실행될 때마다 coding everybody이 출력된다.
    document.write('coding everybody');
    
    //i의 값이 1씩 증가한다 . 
    i++
 }

for 문

for(begin; condition; step){
  
  반복해서 실행될 코드
  
} 

아래 반복문을 실행하면 i가 0부터 3이 될때까지(단, 3은 포함하지 않음)
alert( i )가 호출됩니다.

for (let i = 0; i < 3; i++){ //0,1,2가 출력된다. 
	
    alert(i);
 
 }
구성요소특징
begini = 0반복문에 집일할 때 단 한 번 실행됩니다.
conditoni < 3반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.
bodyalert( i )condition이 truthy일 동안 계속해서 실행됩니다.
stepi++각 반복의 body가 실행된 이후에 실행됩니다.

일반적인 반복문 알고리즘

begin을 실행함
👉 (condition이 truthy이면 👉 body를 실행한 후 step을 실행함)
👉 (condition이 truthy이면 👉 body를 실행한 후 step을 실행함)
👉 (condition이 truthy이면 👉 body를 실행한 후 step을 실행함)
👉 ...

break

반복작업을 중간에 중단시키고 싶을 때 사용할 수 있다.

for (let i = 0; i < 10; i++){ 
   if( i === 5 ) {
    break;
   } 
    alert(i);
 }

continue

실행을 즉시 중단하면서 반복은 지속되게 할 때 사용할 수 있다.

for (let i = 0; i < 10; i++){ 
   if( i === 5 ) {
    continue;
   } 
    alert(i);
 }

break/continue와 레이블

여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우에 사용한다.

for (let i = 0; i < 3; i++){ 

   for (let i = 0; i < 3; i++){ 
   
      let input = prompt('(${i},${j}의 값', '');
     //여기서 멈추고 아래쪽 '완료'가 출력되게 하려면 어떻게 해야할까? 
  } 
 }
 alert('완료');

👇

for (let i = 0; i < 3; i++){ 

   outer : for (let i = 0; i < 3; i++){ 
   
      let input = prompt('(${i},${j}의 값', '');
     //사용자가 아무것도 입력하지 않거나 cancel 버튼을 누르면 두 반복문 모두를 빠져나온다. 
     if (!input) break outer;
     //입력받은 값을 가지고 무언가를 한다. 
  } 
 }
 alert('완료');

'무한' 반복문은 보통 while(true)를 사용하는데 여타 반복문과 마찬가지로 break 지시자를 사용해 멈출 수 있다. 현재 실행 중인 반복에서 더는 무언가를 하지 않고 다음 반복으로 넘어가고 싶다면 continue 지시자를 사용하면 된다.
반복문 앞에 레이블을 붙이고, break/continue에 이 레이블을 함께 사용할 수 있다. 레이블은 중첩반복문을 빠져나와 바깥의 반복문으로 갈 수 있게 해주는 유일한 방법이다.


❗️마치며❗️

조건문, 논리 연산자까지는 좋았는데 반복문부터 머리가 아프기 시작했다😢
처음 접했을 때보다는 정리하면서 이해가 되긴 했지만 그래도 헷갈리는건 역시나 똑같다😩
정리하고 이 부분은 계속 더 공부해야겠다 아자아자😄

profile
코린이 성장일기

0개의 댓글

관련 채용 정보