Lsiron

4.조건문과 반복문 본문

언어/Java Script

4.조건문과 반복문

Lsiron 2024. 4. 22. 21:22

★ 조건문 if?

if () {
   
}

소괄호 안에는 false나 true값을 반환 해 주는 무언가가 들어가면 된다.

 

예제) number 변수가 짝수라면? console.log값을 반환한다.

let number = 5;

if (number % 2 === 0) {
    console.log('number 변수는 짝수이다')
}

허나, number 변수는 5로 정해놓았기 때문에 홀수 이므로 console.log 값을 반환하지 않는다. 이 경우 else 문을 입력한다.

if (number % 2 === 0) {
    console.log('number 변수는 짝수이다')
} else {
    console.log('number 변수는 홀수이다')
}

다음과 같이 결과값이 나온다.

number 변수는 홀수이다

조건문을 추가로 넣을 경우는 다음과 같이 else if문을 사용한다.

let number = 7;

if (number % 2 === 0) {
    console.log('2의 배수이다')
} else if (number % 3 === 0) {
    console.log('3의 배수이다')
} else if (number % 4 === 0) {
    console.log('4의 배수이다')
} else if (number % 5 === 0) {
    console.log('5의 배수이다')
} else {
    console.log('2,3,4,5 의 배수가 아니다.')
}

다음과 같은 결과값을 출력한다.

2,3,4,5 의 배수가 아니다.

 

★ 조건문 switch?

const englishDay = 'monday';

let koreanDay;

switch(englishDay){
    case 'monday':
        koreanDay = '월요일';
        break;
    case 'tuesday':
        koreanDay = '화요일';
        break;
    case 'wednesday':
        koreanDay = '수요일';
        break;
    case 'thursday':
        koreanDay = '목요일';
        break;
    case 'friday':
        koreanDay = '금요일';
        break;
    default:
        koreanDay = '주말';
        break;
}

console.log(koreanDay);
월요일

소괄호 안의 값이 case  구문일 경우,(englishDay = 'monday') 콜론 다음의 값을 반환한다.(koreanDay = '월요일')

또한 하나의 case문이 끝날때마다 break를 써줘서 빠져나오게 해야한다.이 break의 의미는 해당되는 값을 찾았으니 더이상 case문을 보지 말라는 뜻이다.

if조건문의 else문 처럼 나머지를 포함하도록 하려면 default문을 쓰면 된다. 이때, else와 default 모두 값을 넣어주지 않아도 된다.

처음에 const englishDay = 'monday'를 통해, englishDay 라는 변수에 monday를 넣었기 때문에 switch 문에서 englishDay가 case중에서 어디에 해당되는지 체크를 한다.

따라서 여러 case중에서 monday에 해당됐기 때문에 koreanDay는 월요일이라는 값을 저장을 한 것이다. 그리곤 break를 통해 코드를 빠져나온것이다.

 

★ 반복문 for?

for('1번 section'; '2번 section'; '3번 section'){
   
}

for문은 세미콜론을 기준으로 1,2,3번 section으로 나뉜다.

1번 section은, 기준을 잡을 변수를 선언한다.

2번 section은, 조건을 만든다 언제까지 for문을 실행시킬것인지.

3번 section은, for 반복문이 한번 실행될때마다 어떤 행동을 취할 것 인지.

마지막, 중괄호로 실제 for 반복문이 한번 실행이 될 때마다 어떤 작업을 할 것인지 표현한다.

for (let i = 0; i < 10; i ++) {
    console.log(i);
}
0
1
2
3
4
5
6
7
8
9

=> i는 0부터 시작하고 10이 되기 전까지 매번 i에 1씩 더해준다.

 

다음과 같이 for 반복문 속에 반복문을 더 넣을 수 있다.

for (let i = 0; i < 2; i ++) {
    for(let j = 3; j > 0; j --){
        console.log(i,j);
    }
}
0 3
0 2
0 1
1 3
1 2
1 1

부모 반복문이 한번 실행하면 아들 반복문을 다 실행하고 난 뒤에 다음번 부모 반복문이 실행됨을 알 수 있다. 

 

★ 반복문 for...in?

반복문을 실행 할때마다 key 값 그리고 index값을 받을 수 있는 문장이다.

const lsiron = {
    name: 'siron',
    year: 1997,
}

for(let key in lsiron){
    console.log(key);
}
name
year

 

object의 name과 year는 key값이며, 'siron'과 1997은 value 값이다. 이 중 key값을 반환한다는 것이다.

또한 object 말고도 array(list) 값에서도 실행을 할 수 있다.

const fruits = ['사과', '포도', '딸기', '수박', '메론', '오렌지'];

for(let key in fruits){
    console.log(key);
}
0
1
2
3
4
5

이 숫자는 array(list)의 index 값이다. 따라서 object에서는 key값을 받고, array(list) 에서는 index 값을 받을 수 있다.

이는 다음과 같이 응용할 수 있다.

const fruits = ['사과', '포도', '딸기', '수박', '메론', '오렌지'];

for(let key in fruits){
    console.log(`${key}:${fruits[key]}`);
}
0:사과
1:포도
2:딸기
3:수박
4:메론
5:오렌지

 

★ 반복문 for...of?

반복을 할 수 있는 값들에서만 사용 할 수있다.

즉, 이는 array(list)에서만 사용가능하며, 반복문을 실행 할때마다 value값을 받을 수 있는 문장이다.

const fruits = ['사과', '포도', '딸기', '수박', '메론', '오렌지'];

for(let value of fruits){
    console.log(value);
}
사과
포도
딸기
수박
메론
오렌지

 

★ 반복문 while?

while(){
   
}

소괄호 안의 조건이 false가 될 때까지 대괄호의 값을 실행을 해주는 문장이다.

즉, 다음과 같다.

let number = 0;

while(number < 10){
    number ++;
}

console.log(number);
10

number가 10이 되면 조건이 false가 되기 때문에 10이 출력됨으로써 멈춤을 알 수 있다.

 

★ break?

깨트린다는 의미를 가지며 반복문 중간에 break를 삽입한다면 해당 조건에서 반복문을 종료한다는 의미이다.

--for 반복문에서의 break--

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

즉, 위와 같이 i가 5가 되었을때 break를 사용하여, 반복문을 탈출 한다는 것을 알 수 있다. 5가 출력되지 않는 이유는 console.log로 찍기전에 break를 사용하여 문장을 탈출 했기 때문이다.

 

--while 반복문에서의 break--

number = 0;

while(number < 10) {
    if(number === 5 ){
        break;
    }

    number ++;
    console.log(number);
}
1
2
3
4
5

이때, while 문에서는 1부터 5까지 출력되었다. 왜냐하면 초기값 0을 입력했을때 ++(증가)로 인해 1이 증가되어 출력됐기 때문이다. 따라서 number가 4가 되었을때 5가 출력되고, number가 5가 되었을때 break로 인해 탈출 한 것을 알 수있다.

 

★ continue?

skip 이라는 뜻을 가진다. 즉, continue의 해당 조건만 skip후, 반복문을 그대로 실행하는 문장이다.

--for 반복문에서의 continue--

for(let i = 0; i < 10; i++){
    if(i === 5) {
        continue;
    }
    console.log(i);
}
0
1
2
3
4
6
7
8
9

위와 같이, continue 문장으로 인해 5를 제외한 모든 값이 출력되었다.

 

--while 반복문에서의 continue--

number = 0;

while(number < 10){
    number ++;

    if(number === 5){
        continue;
    }

    console.log(number);
}
1
2
3
4
6
7
8
9
10

for 반복문과 유사하게 5를 제외한 모든 값이 출력되었다.

반복문을 정리 해 보았는데 이는 여러 예제들을 접해가며 익숙해져야 할 것 같다. 기초만 보면 간단해 보이지만, 여러 코드를 봤을때 응용할 수 있는 범위가 굉장히 넓기 때문에 어렵게 느껴진다.

'언어 > Java Script' 카테고리의 다른 글

Java Script -DOM 객체 (feat. Elice)  (0) 2024.05.08
Java Script -함수 (feat. Elice)  (0) 2024.05.03
3.연산자  (0) 2024.04.21
2.Hoisting  (0) 2024.04.21
1. 개념과 정의  (0) 2024.04.03