JS : if, for, while

DATE : 2023/11/17

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

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

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

그럼 바로 시작해보자!

[1] if

let answer = 'normaltic';

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

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

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

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

if문에 해당하지 않는 경우를 처리하기 위한 else문이 따라오기도 한다.

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

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

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

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

[2] for

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

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

조건을 만족하는 동안 { } 내에 작성된 코드를 실행한다.

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

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

for문의 괄호 내용을 좀 더 자세히 보자면, 총 3개의 파트로 각각의 내용은 세미콜론으로 구분된다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

for(element of fruits) {
    ...

배열 fruits 안에 있는 요소를 하나씩 꺼내면서 (꺼낸 요소를 element라고 이름 지어준 것)

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

혹은 또 다른 형태로

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

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

하나의 요소가 key:value 형태일 때는

for(key in products) {
    ...

products 안에 있는 요소의 key를 순서대로 하나씩 꺼내면서

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

[3] while

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

while문도 if문과 비슷하게 괄호 안에 조건이 true이면 { } 내에 코드를 실행하는 데

다른 점이 있다는 for문처럼 조건이 true인 동안 반복 실행한다는 점이다.

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

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

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

" loop < 5 "를 만족하지 않으므로 while문이 끝나게 된다.

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

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

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

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

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