모르는 공부 정리 / 데이터 제어하기

안녕하세요 o((>ω< ))o 오늘은 데이터 제어하기에 대한 구문을 알아보도록 하겠습니다.

 

if문 

자바스크립트에서 if문은 조건문을 작성하는데 사용됩니다.

if문은 특정 조건이 참이면 실행되는 코드 블록을 정의합니다.

 

if문 기본 구문

if (condition) {
}

  // condition이 참(true)인 경우 실행될 코드 블록

if 문의 예

let num = 10;

if (num > 0) {
  console.log("num은 0보다 큽니다.");
}

if (num < 0) {
  console.log("num은 0보다 작습니다.");
}

// 출력 결과: "num은 0보다 큽니다."

 

자바스크립트 삼항 연산자

삼항연산자는 조건문을 간단하게 표현하는 방법입니다.

삼항 연산자는 if문을 대체할 수 있는데, if문은 코드 블록 안에서 다양한 조건 분기가 일어날 때 사용하며 삼항 연산자는

간단한 조건 분기에서 사용합니다.

이 연산자는 조건이 참인경우 처음에 나오는 값을 반환하고 거짓인 경우 두 번째 값을 반환합니다.

 

삼항 연산자의 기본 구문

condition ? expr1 : expr2

위의 구문에서 condition은 평가할 조건입니다. expr1은 condition이 true로 평가되는 경우 반환됩니다. expr2는 condition이 false로 평가되는 경우 반환됩니다.

let num = 10;
let message = (num > 0) ? "num은 0보다 큽니다." : "num은 0보다 작거나 같습니다.";
console.log(message);

// 출력 결과: "num은 0보다 큽니다."

위의 예제에서 num 변수의 값은 10입니다. 삼항 연산자는 num > 0 조건을 평가합니다.

이 조건은 true로 평가되므로 expr1인 "num은 0보다 큽니다."가 반환됩니다.

message 변수에 이 값을 할당하고, console.log()를 이용하여 출력합니다.

let num = 5;
let message = (num > 0) ? "num은 0보다 큽니다." : (num < 0) ? "num은 0보다 작습니다." : "num은 0입니다.";
console.log(message);

// 출력 결과: "num은 0보다 큽니다."

위의 예제에서 num 변수의 값은 5입니다. 삼항 연산자는 num > 0 조건을 평가합니다. 이 조건은 true로 평가되므로 expr1인 "num은 0보다 큽니다."가 반환됩니다. message 변수에 이 값을 할당하고, console.log()를 이용하여 출력합니다.

삼항 연산자는 코드의 가독성을 높이고, 코드 길이를 줄이는 데 유용합니다. 그러나 복잡한 조건 분기에서는 if문을 사용하는 것이 가독성이 높을 수 있습니다.

 

자바스크립트 if문 생략

if문 생략은 삼항 연산자를 이용해 간단히 처리할 수 있습니다.

삼항 연산자의 기본 구문

condition ? expr1 : expr2

// (조건) ? true 일 때 실행할 명령 : false일 때 명령

위의 구문에서 condition은 평가할 조건입니다. expr1은 condition이 true로 평가되는 경우 반환됩니다. expr2는 condition이 false로 평가되는 경우 반환됩니다.

let num = 10;
let message;

if (num > 0) {
  message = "num은 0보다 큽니다.";
} else {
  message = "num은 0보다 작거나 같습니다.";
}

// 위 코드를 삼항 연산자로 바꾸면 다음과 같습니다.
let message = (num > 0) ? "num은 0보다 큽니다." : "num은 0보다 작거나 같습니다.";

위의 예제에서 if...else 구문을 삼항 연산자로 바꾸었습니다. 삼항 연산자는 조건문과 결과값을 한 줄에 표현할 수 있어 코드의 가독성이 좋아집니다. 그러나 복잡한 조건문의 경우 가독성이 떨어지기 때문에 적절한 상황에서 사용하는 것이 좋습니다.

다중 if (else if)문

if 문 이후에 여러 개의 조건을 검사해야 할 경우  else if문을 사용할 수 있습니다.

여러 개의 조건 중 하나가 참인 경우 해당하는 값을 실행하고 전체 if문을 종료합니다.

if (condition1) {
  // condition1이 참일 때 실행되는 코드 블록
} else if (condition2) {
  // condition1이 거짓이고 condition2가 참일 때 실행되는 코드 블록
} else if (condition3) {
  // condition1과 condition2가 거짓이고 condition3이 참일 때 실행되는 코드 블록
} else {
  // 모든 조건이 거짓일 때 실행되는 코드 블록
}

위의 구문에서 condition1, condition2, condition3은 각각 평가할 조건입니다. condition1이 참이면 첫 번째 코드 블록이 실행되고, condition1이 거짓이면 condition2가 평가됩니다. condition2가 참이면 두 번째 코드 블록이 실행되고, condition2도 거짓이면 condition3이 평가됩니다. condition3가 참이면 세 번째 코드 블록이 실행되고, 모든 조건이 거짓일 경우 마지막 코드 블록이 실행됩니다.

 

예시입니다.

let score = 85;
let grade;

if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else if (score >= 70) {
  grade = 'C';
} else if (score >= 60) {
  grade = 'D';
} else {
  grade = 'F';
}

console.log(grade); // 'B' 출력

위의 예시에서는 변수 score가 85라는 값을 가집니다. 다중 if문을 사용하여 score 변수의 값을 기준으로 성적 등급을 결정합니다. score가 90 이상인 경우 'A', 80 이상인 경우 'B', 70 이상인 경우 'C', 60 이상인 경우 'D', 나머지 경우에는 'F'를 변수 grade에 할당합니다. 마지막으로 console.log()를 이용하여 grade 변수의 값을 출력합니다.

위의 예시에서는 score가 85이므로 score >= 80 조건이 참이 되어 'B'를 변수 grade에 할당합니다.

 

중첩 if문

if문 안에 또다른 if문을 중첩해 사용할 수 있습니다.

중첩 if문은 if문 안에 if문을 추가하는 것입니다.

중첩 if문은 다중 if문과 유사하지만, 다중 if문은 여러 개의 독립적인 조건을 체크하는 반면, 중첩 if문은 하나의 조건 내부에 다른 조건을 추가하여 복잡한 조건 분기를 처리할 수 있습니다.

if (condition1) {
  // condition1이 참일 때 실행되는 코드 블록
  if (condition2) {
    // condition1과 condition2가 모두 참일 때 실행되는 코드 블록
  }
} else {
  // condition1이 거짓일 때 실행되는 코드 블록
}

위의 구문에서 condition1이 참이면 첫 번째 코드 블록이 실행되고, condition2가 참일 때 두 번째 코드 블록이 실행됩니다. condition1이 거짓이면 else 블록이 실행됩니다.

 

예시입니다.

let num = 20;

if (num % 2 === 0) {
  if (num >= 10) {
    console.log('10 이상의 짝수입니다.');
  } else {
    console.log('10 미만의 짝수입니다.');
  }
} else {
  console.log('홀수입니다.');
}

위의 예시에서는 변수 num이 20이라는 값을 가집니다. 중첩 if문을 사용하여 num 변수의 값을 기준으로 출력할 메시지를 결정합니다. num이 짝수인 경우 첫 번째 if문 내부로 진입하여 num이 10 이상인 경우 '10 이상의 짝수입니다.'를, 10 미만인 경우 '10 미만의 짝수입니다.'를 출력합니다. num이 홀수인 경우 else 블록으로 진입하여 '홀수입니다.'를 출력합니다. 따라서 위의 예시에서는 '10 이상의 짝수입니다.'가 출력됩니다.

 

스위치문

다중 if문과 비슷하며 다중 if문으로 변경이 가능합니다.

조건에 맞으면 break 키워드에 맞으면 그 실행문에서 끝납니다.

break 키워드를 안 쓰게 되면 무한으로 빠지면서 모든 case 키워드를 실행합니다.

defalut 키워드는 switch문의 값과 일치하는 값이 없을 때 실행됩니다.

let fruit = 'apple';

switch (fruit) {
  case 'apple':
    console.log('This is an apple.');
    break;
  case 'banana':
    console.log('This is a banana.');
    break;
  case 'orange':
    console.log('This is an orange.');
    break;
  default:
    console.log('This is not a fruit.');
}

위의 예시에서는 변수 fruit이 'apple'이라는 값을 가집니다. switch문을 사용하여 fruit 변수의 값을 기준으로 출력할 메시지를 결정합니다. fruit이 'apple'인 경우 첫 번째 case 문 내부로 진입하여 'This is an apple.'을 출력하고, break 키워드에 의해 switch문을 빠져나가게 됩니다. 만약 fruit이 'banana'인 경우 두 번째 case 문 내부로 진입하여 'This is a banana.'을 출력하고, break 키워드에 의해 switch문을 빠져나가게 됩니다. fruit이 'orange'인 경우 세 번째 case 문 내부로 진입하여 'This is an orange.'을 출력하고, break 키워드에 의해 switch문을 빠져나가게 됩니다. 마지막으로, 모든 case 문과 일치하지 않는 경우 default 블록 내부로 진입하여 'This is not a fruit.'을 출력합니다. 따라서 위의 예시에서는 'This is an apple.'이 출력됩니다.

 

while문

while문은 조건문의 한 종류로 조건식이 참인 경우에 반복적으로 실행됩니다.이 반복문은 반복 횟수가 불확실한 경우 많이 사용됩니다.while문의 무한 반복에 빠지지 않도록 조건식을 신중하게 작성해야 합니다.while문 동작 순서1.  조건을 평가함2, 조건이 참이면 코드블럭을 실행3.  다시 조건을 평가, 조건이 참이면 다시 코드 블록을 실행함 조건이 거짓이면 while문을 종료4. 종료되면 while 문 다음에 오는 코드를 실행

 

기본 코드

while (condition) {
  // 조건식이 true일 때 실행할 코드 블록
}

condition은 true나 false를 반환하는 조건식입니다. condition이 true인 경우에는 코드 블록이 반복해서 실행됩니다. condition이 false가 되면 while문을 빠져나와 다음 코드가 실행됩니다. 조건식이 항상 true가 되어 무한루프가 발생할 수 있으므로, 조건식이 항상 false가 되도록 적절하게 설정해주어야 합니다.

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

위의 예시에서는 변수 i가 0부터 4까지 1씩 증가하면서 while문 내부의 코드 블록이 반복해서 실행됩니다. i가 5가 되면 조건식이 false가 되어 while문을 빠져나오게 됩니다. 따라서 위의 예시에서는 0, 1, 2, 3, 4가 출력됩니다.

 

do while문

do while문은 while문과 비슷하지만 먼저 코드 블록을 실행한 후 조건식을 검사하는 반복문입니다.

따라서 do while문은 조건식이 false일지라도 최소 한 번은 코드 블록을 실행합니다.

이것은 일련의 작업을 반복하면서 루프 내에서 최소한 한 번 이상의 실행이 필요할 때 유용합니다.

기본 구문

do {
  // 코드 블록
} while (condition);

먼저 코드 블록이 실행되고 그 후 조건식이 검사됩니다.

조건식이 true일 경우 코드 블록이 다시 실행되고, 조건 식이 false가 되면 do while문을 빠져나와 다음 코드가

실행됩니다.

 

다음은 예시입니다.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

위의 예시에서는 변수 i가 0부터 4까지 1씩 증가하면서 do while문 내부의 코드 블록이 반복해서 실행됩니다. i가 5가 되어 조건식이 false가 되더라도 코드 블록은 이미 한 번 실행되었으므로, 위의 예시에서는 0, 1, 2, 3, 4가 출력됩니다.

 

 

for문

for은 반복 횟수를 미리 알고 있는 경우 주로 사용하는 반복문입니다.for문은 초기화 구문, 조건식, 증감식을 사용하여 반복을 제어합니다.

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

for문에서는 break문과 continue문을 사용하여 반복문의 동작을 제어할 수 있습니다. break문은 반복문을 완전히 빠져나오게 하고, continue문은 코드 블록 실행 중 현재 반복을 중지하고, 다음 반복으로 건너뛰게 합니다.

 

중첩 for문

for문 안에 또 다른 for문을 중첩해서 사용할 수 있습니다.

 

중첩 for문의 예시

for (let i = 0; i < n; i++) {
  for (let j = 0; j < m; j++) {
    // 코드 블록
  }
}

위의 구문에서 i는 바깥쪽 for문의 반복 변수를 나타내고, j는 안쪽 for문의 반복 변수를 나타냅니다. 바깥쪽 for문이 한 번 반복될 때마다 안쪽 for문은 전체 반복을 수행합니다.

 

중첩 for문을 이용해 테이블 1-25의 숫자가 나오고 칸 만들기 예제입니다.

{
    let table = "<table border='1'>";
    let count = 0;

    for(let i=0; i<5; i++){
        table += "<tr>";
        for(let j=0; j<5; j++){
            count++;
            table += "<td>" + count + "</td >";                    
        };
        table += "</tr>";
    };

    table += "</table>";
    
    document.write(table);

}

 

break문

break문은 반복문을 강제로 종료하는 역할을 합니다.

break문이 실행되면 break문을 포함하는 가장 가까운 반복문을 완전히 빠져나오게 됩니다

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

위의 예시에서는 변수 i가 0부터 5까지 증가하면서 for문 내부의 코드 블록이 실행됩니다.

i가 5가 되면 if문의 조건식이 true가 되어 break문이 실행됩니다.

따라서 for문은 i가 5일 때 종료되고, 0부터 5까지의 숫자가 출력됩니다.

 

continue문

continue문은 반복문에서 현재 반복문을 중지하고 다음 반복문으로 넘어가는 역할을 합니다.

continue문이 실행되면 반복문의 나머지 부분은 실행되지 않고 다음 반복문으로 건너 뛰어 진행됩니다.

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

아래는 for문과 continue문을 사용하여 특정 조건을 만족할 때 반복문의 나머지 부분을 실행하지 않고 다음 반복으로 넘어가는 예시입니다.