프론트엔드(Web)/JavaScript

JavaScript 조건문, 반복문

만능 엔터테이너 2024. 7. 16. 15:41
728x90
반응형
SMALL

블록문 - 1개 이상의 자바스크립트 코드를 중괄호로 묶은 것, 다른 말로 블록 또는 코드 블록이라고 합니다.

 

조건문

if문 - 소괄호(()) 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문

if(조건식) {
  // 조건식이 참이면 실행
}

 

else문 - if문의 조건식이 거짓일 때 실행되는 블록문

if(조건식) {
  // 조건식이 참이면 블록문 실행
} else {
  // 조건식이 거짓이면 블록문 실행
}

 

단, else문은 if문 없이 단독으로 사용이 불가능하며 하나의 if문에는 하나의 else문만 사용 가능합니다.

 

else if문 - if문에 조건을 추가하고 싶을 때 사용, 개수에 제한이 없으며 단, else문과 마찬가지로 단독으로 사용할 수 없고, 항상 if문 다음에 사용하고 else문보다는 먼저 사용해야 합니다.

if(조건식1){
  // 조건식1이 참이면 블록문 실행
} else if(조건식2) {
  // 조건식2가 참이면 블록문 실행
} else {
  // 조건식이 모두 거짓이면 블록문 실행
}

 

중첩하기 - if문은 작성하려는 코드에 중첩의 제한이 없습니다.

if(true){
  if(true) {
    // 블록문
  } else {
    // 블록문
  }

 

switch 문 - 소괄호 내부 값과 일치하는 case문이 있을 때, 해당 코드를 실행하는 조건문 / 일치 여부 확인은 일치연산자(===)를 사용합니다. switch 문에는 1개 이상의 case문과 default문, break문을 사용합니다.

switch(key) {
  case value1:
    // key가 value1일 때 실행할 블록문
    break;
  case value2:
    // key가 value2일 때 실행할 블록문
    break;
    default:
    // 아무것도 일치하지 않을 때 실행할 블록문
    break;
}

 

case문 - 실행되는 코드

break문 - 코드 실행을 멈춤

default문 - else문과 비슷하게 일치하는 case문이 없으면 기본으로 실행되는 코드

 

if 문 vs switch 문

if문 - 조건에 식을 사용 / 보편적으로 사용

switch문 - 조건에 값을 사용 / 값이 하나일 경우에 사용


반복문(loop)

while문 - 특정 조건을 만족하는 동안 블록문을 실행 

while(조건식) {
  // 조건식이 참이면 실행
}
let num = 1;
while(num <= 9999){
  console.log(num);
  num++;
}

다음 코드를 실행하면 1부터 9999까지 숫자가 출력됩니다.

 

※ 무한 반복문 : 반복문의 조건이 계속 참으로 평가되어 반복문이 끝나지 안고 무한히 실행되는 것, 반드시 조건에 반복문의 조건이 false가 되는 조건이 있는지 확인합니다.

 

do...while문 - 특정 조건이 참으로 평가되는 동안 do 다음에 오는 블록문을 반복 실행합니다.

do{
  // 블록문
}while(조건식);

 

이때, while문은 블록문을 수행하기 전에 조건식을 평가하지만, do while문은 블록문을 1번 실행한 후에 조건식을 평가합니다. 그렇기에 1번은 무조건 실행되는 특징이 있습니다.

 

for문 - 횟수를 지정해 지정한 횟수가 끝날 때까지 블록문을 반복 실행하는 반복문

for(초기값; 조건식; 증감식){
 // 블록문
}

 

for문은 초깃값 -> 조건식 -> 블록문(조건식이 참일 경우) -> 증감식 -> 조건식 순서로 실행됩니다. 이때, 초깃값은 최초 1회만 실행됩니다.

 

for문과 배열

let arr = ["banana", "apple", "orange"];
for(let i = 0; i < arr.length; i++){
  console.log(arr[i])
}

 

배열에 length 속성을 사용하면 배열의 데이터 개수(배열의 길이)를 확인할 수 있습니다.

 

for...in문

for(가변수 in 배열/객체 리터럴){
  // 블록문
}

 

객체 리터럴을 반복할 경우

let obj = {name:"철수", age:"20"};
for(let key in obj){
  console.log(key + ":" + obj[key]);
}

 

배열을 반복할 경우

let arr = ["orange", "banana", "apple"];
for(let index in arr){
  console.log(index + ":" + arr[index]);
}

 

break문 - 어떤 반복문이라도 break문을 만나면 반복문이 종료됩니다.

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

 

continue문 - 반복문을 건너뛰고 실행합니다. 반복문의 블록문에서 continue문을 만나면 해당 반복 실행만 건너뛰게 됩니다.

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

 

728x90
반응형
LIST

'프론트엔드(Web) > JavaScript' 카테고리의 다른 글

JavaScript 객체  (0) 2024.07.16
JavaScript 함수  (0) 2024.07.16
JavaScript 함수 및 자료형, 연산자  (1) 2024.07.16
JavaScript 코드 작성 방법  (0) 2024.07.14
JavaScript - 매개변수 패턴  (0) 2024.07.08