나만의 작은 도서관

[JavaScript] 기초 5. 조건문과 반복문 본문

JavaScript/정리

[JavaScript] 기초 5. 조건문과 반복문

pledge24 2024. 4. 23. 18:05
유의사항: 해당 글은 공부한 내용을 정리하는 용도이므로, 수정이 필요할 경우 내용의 수정이 있을 수 있습니다.

 

개요

조건에 따라 진입하는 분기점이 달라지는 조건문과, 지정한 조건에 따라 같은 코드를 반복하는 반복문에 대해 다룬다. 다른 언어들에도 전부 있는 내용이니 간단히 적고 넘어간다.


조건문

조건문은 if, if - else, if - else if - else, switch, 그리고 ||연산자, &&연산자가 있다. 조건에 따른 분기점을 얼마나 넣고 싶은 지에 따라 입맛대로 골라 쓰면 된다.

 

if

1개의 분기점이 필요할 때 사용한다. 조건에 맞는 경우만 if문 내부로 이동한다.

let x = 10;

if(x > 0){
    console.log("x는 양수입니다");
}

// Output:
// x는 양수입니다

 

if - else

2개의 분기점이 필요할 때 사용한다. 조건에 맞는 경우 if문, 아닌 경우 else문으로 이동한다.

let x = 10;

if(x > 0){
    console.log("x는 양수입니다");
}
else{
    console.log("x는 음수입니다");
}

// Output:
// x는 양수입니다

 

if -  else if - else

3개 이상의 분기점이 필요할 때 사용한다. if문과 else if문에 있는 조건을 순서대로 확인하고 만족하는 조건이 있는 위치로 이동한다. 하나도 없을 경우 else문으로 이동한다. else if는 원하는 만큼 반복적으로 사용 가능하다.

let x = 10;

if(x > 0){
    console.log("x는 양수입니다");
}
else if(x < 0){
    console.log("x는 음수입니다");
}
else{
    console.log("x는 0입니다");
}

// Output:
// x는 양수입니다

 

switch

if 조건문을 사용했을 때 코드가 난잡해지는 경우 사용하는 조건문이다. 보통 분기점이 많이 있을 때 사용한다.

let fruit = "사과";

switch(fruit){
    case "사과":
        console.log("사과입니다.");
        break;
    case "바나나":
        console.log("바나나입니다.");
        break;
    case "키위":
        console.log("키위입니다.");
        break;
    default :
        console.log("아무것도 아닙니다.");
        break;
}

// Output:
// 사과입니다.

 

&& 연산자, || 연산자

논리 연산자인 && 연산자, || 연산자는 자바스크립트에서 하나의 조건문 처럼 사용할 수 있다. 이 둘은 삼항 연산자의 단축평가이며, 아주 짧은 코드만으로 삼항 연산자를 구현할 수 있다

 

and조건(&& 연산자)

let x = 10;
x > 0 && console.log("x는 양수입니다.");    // x가 양수이면 console.log("x는 양수입니다.") 실행

// Output:
// x는 양수입니다.

 

or조건(|| 연산자)

let y;                  // y는 undefined
let z = y || 20;        // y가 undefined(false값으로 취급하는 모든게 다됨)이면 20으로 세팅해줘 라는 뜻 

console.log(z);         // Output: 20

반복문

반복문은 for, while, do while문이 있다. 어떤 반복문을 사용해도 기능적인 면에서 차이가 없지만, 반복 횟수가 고정되어 있는 경우는 for문반복 횟수가 상황에 따라 변경되는 경우에는 while문(또는 do while문)을 사용하는 것이 일반적이다.

 

for문

 

가장 기본적인 for문 사용법. i가 1씩 증가하며 10보다 작을때까지 반복한다. 

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

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

 

for문은 배열과 같이 사용하는 경우가 많다.

const arr = [5, 1, 4, 2, 3];
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

// Output:
// 5
// 1
// 4
// 2
// 3

 

in이라는 키워드를 사용한 for문. (범위 기반 반복문이라고 해도 될려나...?)

// 객체 선언
let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

// 객체에 있는 property(속성)들을 하나씩 출력.
for(let key in person){
    console.log(key + ": " + person[key]);
}

// Output:
// name: 홍길동
// age: 30
// gender: 남자

 

while문

 

기본적인 while문 사용법. i가 1씩 증가하며 10보다 작을때까지 반복한다. 

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

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

 

do while문

 

기본적인 do while문 사용법. while문과 다른 점은 내부 코드 실행 순서가 조건식 확인보다 앞에 있다는 것. 그 외엔 똑같다.

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

// Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9