# JS : if, for, while

어느 프로그래밍 언어를 배우든 조건문, 반복문은 꼭 나오는 거 같다.. :grimacing:

그만큼 기본 중에 기본이지만 활용하기는 개인의 능력이지 싶다.

이번 POST에서는 javascript에서 if, for, while문을 작성하는 법을 다루어보려 한다.&#x20;

그럼 바로 시작해보자!

### \[1] if

```javascript
let answer = 'normaltic';

if(answer == 'normaltic') {
    console.log("right!!");
} else {
    console.log("wrong!");
}
```

if문은 "만약에 \~하면 이렇게 해!"라는 의미이기 때문에

무엇을 만족해야 하는지, 즉 조건을 정해줄 필요가 있다.

if문은 단독으로 사용할 수도 있지만 위의 예시처럼&#x20;

<mark style="background-color:blue;">**if문에 해당하지 않는 경우를 처리**</mark>하기 위한 **else문**이 따라오기도 한다.&#x20;

if문(or else문)의 동작 여부는 if문에 주어진 조건을 만족하는 지에 따라 달라진다.&#x20;

조건을 만족하는 경우 (= 조건 결과가 **true**인 경우)에는 if문에 작성된 내용이 실행되고

반대로 조건을 만족하지 못하는 경우(= 결과가 **false**인 경우)에는 else문에 작성된 내용이 실행된다.

따라서 위의 코드에서는 if문의 조건을 만족하므로 console.log("right!!");가 실행될 거라 예상할 수 있다.

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FBHrn1Che1J2T42hjhvjX%2Fjs_13.png?alt=media&#x26;token=b1abe6fa-5588-4ab6-b2ea-2834528c9b36" alt=""><figcaption></figcaption></figure>

### \[2] for

```javascript
for(var i = 0; i < 5; i++) {
    console.log(i);
}
```

for문은 괄호 안에 주어진 내용을 토대로 조건을 확인해

<mark style="background-color:blue;">**조건을 만족하는 동안 { } 내에 작성된 코드를 실행**</mark>한다.&#x20;

```
(초기식; 조건식; 증감)

초기식 : var i = 0
조건식 : i < 5
증감 : i++
```

for문의 괄호 내용을 좀 더 자세히 보자면, 총 3개의 파트로 각각의 내용은 <mark style="background-color:blue;">**세미콜론으로 구분**</mark>된다.&#x20;

첫 번째 파트에는 조건식에서 사용할 변수가 필요한 경우, 이를 선언하는 부분이 된다.&#x20;

위의 예시에서는 변수 i를 선언해 0이라는 값을 할당해주고 있다.&#x20;

두 번째 파트에서는 조건식에서 선언한 변수의 값을 가지고 **for문을 실행할 반복 조건**을 정의한다.

만약 0 \~ 4까지 총 5개의 숫자를 출력하고 싶다고 한다면&#x20;

i의 값이 5보다 작은 동안에만 for문이 실행되도록 하겠다는 의미로 **"i<5"**&#xC640; 같이 조건을 작성한 것이다.

세 번째 파트에서는 i의 값이 5보다 작을 동안 1이 증가 되는 형태로 값을 출력하고자 하는 것이기 때문에&#x20;

**for문이 한 번 실행될 때마다 i의 값에 +1**을 하라는 의미이다.&#x20;

따라서 i가 0 \~ 4까지 값이 증가 되는 과정이 console.log로 출력 되는 것이다.&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FVi0vigHW6rftI6tTpB9K%2Fjs_10.png?alt=media&#x26;token=3d534237-898d-4ee0-838d-9899fd58237c" alt=""><figcaption></figcaption></figure>

만약에 몇 번 반복하라는 조건이 아닌 **데이터의 크기 만큼만 딱 동작했으면 좋겠다** 싶을 때는&#x20;

다음과 같이 for문을 작성할 수도 있다.

```javascript
let fruits = ['apple','banana','strawberry'];

for(element of fruits) {
    console.log(element);
}
```

fruits 라는 배열이 총 3개의 요소를 가지고 있다고 할 때

우리는 이 배열의 크기를 구한 다음, 배열 크기 만큼 반복하라는 조건을 줄 필요 없이

```javascript
for(element of fruits) {
    ...
```

<mark style="background-color:blue;">**배열 fruits 안에 있는 요소를 하나씩 꺼내면서**</mark> (꺼낸 요소를 element라고 이름 지어준 것)

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FAFApISNEaJ9yXMbN5MiC%2Fjs_11.png?alt=media&#x26;token=b1ba5bbe-fbf1-474d-886a-c602d7b3c220" alt=""><figcaption></figcaption></figure>

그 값을 console 창에 출력하라는 형태로 for문을 작성할 수 있다.&#x20;

혹은 또 다른 형태로&#x20;

```javascript
let products = {desk:"brown", chair:"black", pen:"blue"};

for(key in products) {
    console.log(key+" : "+products[key]);
}
```

하나의 요소가 **key:value** 형태일 때는&#x20;

```javascript
for(key in products) {
    ...
```

<mark style="background-color:blue;">**products 안에 있는 요소의 key를**</mark> 순서대로 하나씩 꺼내면서

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2FSNhLYy1hRxA35s2lsLVS%2Fjs_12.png?alt=media&#x26;token=da651e13-8b0f-49ae-8d65-307009c5bb0a" alt=""><figcaption></figcaption></figure>

key와 그 key에 해당하는 value를 출력하겠다는 형태로 for문을 작성하면 된다.

### \[3] while

```javascript
let loop = 0;
while(loop < 5) {
    console.log(loop);
    loop += 1;
}
```

while문도 if문과 비슷하게 <mark style="background-color:blue;">**괄호 안에 조건이 true이면**</mark> { } 내에 코드를 실행하는 데

다른 점이 있다는 for문처럼 <mark style="background-color:blue;">**조건이 true인 동안 반복 실행**</mark>한다는 점이다.&#x20;

위의 코드는 loop 값이 0인 상태에서 while문을 시작해

console.log를 실행한 후 loop 값을 1 증가 시킨다.&#x20;

이때 loop 값이 4에서 5로 증가하면 조건을 확인했을 때&#x20;

**" loop < 5 "**&#xB97C; 만족하지 않으므로 while문이 끝나게 된다.&#x20;

<figure><img src="https://1830066209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5S7g0ufkCcAICHepizjg%2Fuploads%2Ffvx9EU7WUkl8upWvTFW0%2Fjs_14.png?alt=media&#x26;token=95e03373-ec8e-49a2-97b4-c03bd7caacd5" alt=""><figcaption></figcaption></figure>

따라서 결과는 0 \~ 4까지 나오게 되고 for문과 작성한 형태는 다르지만&#x20;

동일한 내용을 구현한 것이라 할 수 있다.

이렇게 해서 if, for, while에 대해 가볍게 살펴보았다.

언어에 따라서 그 형태가 조금씩 다르고 많이 사용하는 개념인 만큼 확실하게 짚고 넘어가면&#x20;

큰 도움이 될 거라 생각한다. :thumbsup:
