[노트내용정리] 조건문과 반복문

📌조건문

• 조건에 따라 실행되는 코드.
• 조건식이 참(Truthy)인 값이나 거짓(Falsy)인 값을 반환하는지에 따라 코드를 수행할지 말지 판단한다.
• 조건문에는 break나 return을 반드시 사용해줘야 한다. (조건식을 탈출 할 수 있도록)

💡 함수를 만들 때
* 조건에 해당하지 않는 거짓조건을 제일 위에 써준다. (함수 끝까지 돌지 않고 바로 거를 수 있게)
* 조건이 여러개 일 때는 if문이나 switch를 주로 사용한다.
* 조건을 걸 때는 삼항연산자 위주로 사용한다. (중첩삼항을 쓰는 경우도 있음)

 

 

1. If문

조건이 참일 때만 실행

if (조건식) {
  // 조건식이 참일 때 실행될 코드
}

let isShow = true;
let checked = false;

if (isShow) {
  cosole.log('Show!'); // Show!
}

if (checked) {
  console.log('Checked!');
}
// checked는 false이므로 조건에 부합하지 않는다. ∴ 중괄호 사이의 내용은 실행하지 않음


//실행될 코드가 한 줄이면 중괄호를 생략해서 쓸 수 있다.
if (true) console.log("중괄호 생략한 조건식");

 

2. If else문

조건이 참일 때와 else일 때(그 밖의 상황인 조건이 거짓일 때) 실행할 코드가 필요하다.

여러 조건을 대응하는 코드를 작성할 수 있다.

let isShow = true;

if (isShow) {
 console.log('Show!');
} else {
 console.log('Hide?');
}
// Show! (if문으로 실행된 결과)

let isShow = false;

if (isShow) {
 console.log('Show!');
} else {
 console.log('Hide?');
}
// Hide?" (else문으로 실행된 결과)

 

3. switch문

switch case문은 하나의 변수를 여러 값과 비교해 실행 할 코드를 결정하는 조건문이다.

• switch 뒤에 오는 표현식들의 값에 따라 실행시킬 코드가 있는 곳으로 실행을 옮겨감.
• 코드실행을 한 뒤, break에 의해서 조건문을 빠져나오게 됨. 
• 표현식이 case와 일치하는 경우가 없다 => default 문으로 이동.
• default 문은 필수가 아닌 선택사항.
• 표현식의 값과 case의 값이 일치하는 경우에만 케이스별로 실행 코드가 실행됨을  명확히 구분하기 때문에
  if 문에 비해 가독성이 좋습니다.

switch (표현식) {
  case 값1:
    // 값1에 대한 실행 코드
    break;
  case 값2:
    // 값2에 대한 실행 코드
    break;
  ...
  default:
    // 모든 case에 해당하지 않을 때 실행될 코드
    break;
}

const DISCOUNT_RATE = {
  VVIP: 0.7,
  VIP: 0.6,
  Gold: 0.5,
  Silver: 0.3,
  Bronze: 0.2,
};

// If else
function checkDiscountPrice (grade) {
if (grade === "VVIP") {
return 0.7
} else if (grade === "VIP") {
return 0.5
} else if (grade === "Gold") {
return 0.3
} else {
return 0
}
}

// If less (If없는 조건문)⭐
function checkDiscountPrice2(grade) {
  return DISCOUNT_RATE[grade] ? DISCOUNT_RATE[grade] : 0;
}

function checkDiscountPrice(grade) {
  if (grade === "VVIP") {
    return 0.7;
  } else if (grade === "VIP") {
    return 0.6;
  } else if (grade === "Gold") {
    return 0.5;
  } else if (grade === "Silver") {
    return 0.3;
  } else {
    return 0;
  }
}


// Switch (return없으면 break를 넣어줌)
function switchCheckDiscountPrice(grade) {
    let point = 0;
  switch (grade) {
    case "VVIP":
      point = 0.7;
      break;
    case "VIP":
      point =  0.6;
      break;
    case "Gold":
      point = 0.5;
      break;
    case "Silver": {
      point = 0.3;
      break;
    }
    default:
        break;
  }

    return point += 0.2;    
}

debugger;
// checkDiscountPrice("Silver")
// switchCheckDiscountPrice("Silver")
checkDiscountPrice2("Silver")

 

4. if less  (추가예정)

if less를 선호하는 이유.

OCP(Open Closed Principle)을 따라 역할분리에 좋다. 

기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계가 되어야함.

 

 

 

📌반복문

단순한 작업을 여러번 반복해야 할 때 사용하는것

 

1. for문

변수를 선언하는 초기화식, 결과(true or false)에 따라 실행문의 실행 여부를 판단하는 조건식,

실행문 이후 변수의 증감을 나타내는 증감식으로 구성

//for문
for (초기화; 조건; 증감) {
 //실행할 코드
}

// == for (시작조건; 종료조건; 변화조건) { }


//-----------------------------------------

function func1() {
    const message = "야!";

    for (let i = 0; i < 1000; i++) {
        console.log(message + i);    
    }    
}

func1();

// 반복문 (For statement)
// for (시작조건; 종료조건; 변화조건) {}

const ulEl = document.querySelector('ul')


for (let i = 0; i < 10; i +=1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  if ((i + 1) % 2 === 0) {
    li.addEventListener('click', function() {
      console.log(li.textContent)
    })
  }
  ulEl.appendChild(li)
}

2. while문

조건식이 참일 때 반복적으로 실행되는 반복문

//while문
while (조건) {
 //조건이 참일 때 실행할 코드	
}

//-----------------------------------

let num = 0;

while (num < 11) {
    console.log(num);
    num += 1;
}