[JAVASCRIPT] 조건문과 반복문

박창조·2024년 3월 24일
0

javascript

목록 보기
2/11
post-thumbnail

조건문

특정 조건에 따라 다르게 코드를 실행하도록 하는 자바스크립트 문법

✅ 기본 문법

1️⃣ if문

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

// if문 형식

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

조건식은 숫자, 문자열, undefined, null 등 무엇을 쓰더라도 반드시 "참/거짓"으로 평가된다.

2️⃣ else문

if문의 조건식이 거짓일 때 실행되는 블록문을 정의하는 문법

// else문 형식

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

"else문은 단독으로 사용할 수 없고, 반드시 if문 다음에 사용해야 한다."

3️⃣ else if문

if문에 조건을 추가하고 싶을 때 사용

// else if문 형식

if(조건식1){
  // 조건식이 참이면 실행
  console.log("조건식 1 참")
}else if(조건식2){
  // 조건식2가 참이면 블록문 실행
  console.log("조건식 2 참")
}else{
  console.log("거짓")
}

"else if문도 단독으로 사용할 수 없고, 반드시 if문 다음에 사용해야 한다. else문 보다는 먼저 사용해야 한다."

➕➕➕

if문은 어떤 조건식을 만족할 때 어떤 블록문을 실행할지에 따라서 코드를 계속 중첩하여 사용할 수 있습니다.
이때 중첩 횟수에는 제한이 없고, if문안에서 if문을 다시 사용할 수 있습니다.

3️⃣ switch문

switch뒤에 오는 소괄호 안의 값과 일치하는 case문이 있을 때 해당 코드를 실행하는 조건문

//switch문 형식

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

소괄호안의 값과 일치여부는 연산자(===)를 사용한 비교 연산처럼 값과 자료형을 함께 비교합니다.

switch문에는 하나 이상의 case문과 default문, break문을 사용합니다.

소괄호안의 값과 case문의 값이 일치한다면 해당 조건의 코드가 실행이 되는데, break 문을 만나기 전까지 실행되고, 만나면 바로 실행히 멈추게 되다.

4️⃣ 삼항연산자

if문 VS switch문

자바스크립트에서 조건문으로 if문과 switch문을 제공하는데, 이 둘의 차이는 무엇일까??

두 조건문의 결정적인 차이는 조건의 형태이다.

if문은 조건에 "식"을 사용하고, switch문은 조건에 "값"을 사용한다.

switch문은 조건으로 값을 받기 때문에 조건의 값이 여러개가 나올 때(범위일 때..ex 1 ~ 100)는 일일이 case문으로 정의를 해야한다는 번거로움이 생긴다.

하지만, 조건의 값이 하나 일때는 switch문이 더욱 적합하 수 있다.

이런 두가지 조건문의 차이점을 잘 기억하고, 적적히 사용하면 된다.


반복문

지정한 조건이 참(true)으로 평가되는 동안 지정한 블록문을 반복해서 실행하는 블록.

✅ 기본 문법

1️⃣ while문

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

//while문 형식

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

만약 1부터 5까지를 출력하는 코드를 작성한다면 어떻게 하면될까??

반복문을 사용하지 않는다면, 그냥 똑같은 출력 코드를 5번 반복해서 작성하면 쉽게 해결할 수 있다.

하지만, 만약 1부터 999까지를 출력하는 코드를 작성해야 한다고 한다면 이것은 같은 방법으로는 결코 쉽게 해결할 수 없다. 이때 반복문을 사용하면 간단하게 작성할 수 있다.

//1부터 999까지 출력하는 예시(while 문 사용)

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

2️⃣ 무한 반복문

무한 반복문이란? 반복문의 조건이 계속 참으로 평가되어 반복문이 종료되지 않고 무한대로 실행되는 것을 말함

//무한 반복문 형식

while(조건식 == true){
  // 블록문
}

while문의 조건식이 계속 참(true)일 경우 종료되지 못하고 계속해서 반복하게 된다. 이렇게 된다면 프로그램에 치명적인 성능저하를 일으킬 수 있다. 그래서 while문에서는 종료될 수 있도록 조건이 거짓(false)가 되는 순간을 작성해줘야 한다.

3️⃣ do…while문

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

다시 말해 while문과의 차이점이라면, while문에서는 처음부터 조건식이 거짓이라면 블록문을 실행하지 않지만, do..while문은 한번은 꼭 실행 후 조건식을 평가한다는 특징이 있다.

//do...while문 예시

do{
   console.log("한번은 실행");
}while(false);

//결과 : "한번은 실행"

4️⃣ for문

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

다른 반복문과 다르게 조건식 이외에도 반복의 횟수를 지정하도록 하는 초깃값과 증감문이 사용된다는 것이다.

//for문 형식

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

for문if문처럼 "중첩"해서 사용할 수 있다.

5️⃣ for…in문

ES6에서 객체 리터럴이나 배열에 반복 접근할 수 있도록 추가된 개념

//for...in문 형식

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

for문의 소괄호 안에 in 키워드를 두고 키워드의
오른쪽에는 탐색의 대상이 되는 배열 또는 객체 리터럴,
왼쪽에는 배열 또는 객체 리터럴을 탐색해서 key를 저장할 가변수(임시변수)를 놓는다.

//for...in문 예시

let obj = {name : "철수", age: 20}

for(let key in obj){
  console.log(`${key} : ${obj[key]}`)
}

//출력
name: 철수
age: 20

객체 리터럴을 반복 탐색하면 탐색 결과로 가변수에 객체 리터럴의 key가 할당되어, 객체 리터럴의 키와 값을 출력할 수 있다.

배열 리터럴을 반복 탐색하면, 가변수에 배열의 index값이 할당되게 된다.

6️⃣ break문

강제로 반복문을 종료하는 방법

반복문의 조건문이 참으로 평가되어 코드가 반복해서 실행하는동안에 종료 조건을 만족하지 않더라도 강제로 반복문을 종료하는 방법이다.

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

보통 반복문 내부에서 if문으로 종료조건을 처리 후 break문을 사용한다.

7️⃣ continue문

반복문을 건너뛰고 실행하라는 명령

break와 마찬가지로 반복문이 실행 중일 때 특정 반복 시점을 건너 뛰고 실행하라는 명령이다.

반복문에서 continue를 만나면 해당 반복 실행만 건너뛰게 되는데, 마찬가지로 반복문안에서 if문을 통해 조건문을 작성하고, 해당 조건이 될 때 해당 명령을 건너뛰게 한다.


요약


참고

profile
사랑을 꿈꾸는 냄새나는 개발자 입니다 :)

0개의 댓글