본문 바로가기

블록체인기반 SW 개발자 과정(feat.경일게임아카데미)

<JAVASCRIPT> 22.05.24일 7일차 기록 / for 반복문 / 삼각형 찍기

두둥 드디어 코딩의 꽃인 반복문을 배우기 시작했다. 아마 이번주 금요일 이후에 진도 나가는 속도다 페라리가 될 듯...

솔직히 지금 속도로 나갔으면 하지만은....ㅠㅠ 이 속도로는 교육과정의 목표대로 3개월 동안 프론트+백을 다 못 끝낼걸 안다...

 

그래도 기초부분동안 천천히 진도도 나가고 소화할 시간을 충분히 줘서 너무 좋다ㅎㅎ

당연한 얘기지만 진짜 자습시간을 갖느냐 안갖느냐가 머리에 남는데에 진짜 큰듯

 

 

 

 

ㅋㅋㅋㅋ여담이지만 오늘 안경을 안갖고와서 진짜 눈뜬장님으로 수업을 들었다ㅠㅠㅠ

 

끄으으......

모니터에 코박고 내가 쓴게 오타가 나는지 안나는지 보느라 눈알 빠지는줄,,,,ㅋㅋㅋ

항상... 잘 챙기자...

 

 

for문

기본 형식 : 

// 반복문
for(변수 선언문 or 할당문; 조건식; 증감식;){
		
		조건식이 참인경우 반복 실행될 실행문
        
}

조건식의 결과가 false가 나오기 전까지 반복문을 계속해서 실행한다.

 

 

 

예시와 함께 보자

 

 

<for문 예시-1>

//1부터 100까지의 합
let res =0;
for(let i=1; i<=100; i++){
    res = res+i;
}
console.log(res);

이렇게 쓴다면 i의 시작 값은 1, 그리고 i와 100을 비교해서 i<=100 이 true라면 밑의 실행문을 실행한다.

즉, res에 i 값을 더한 값을 다시 res에 할당해주는 것. 그다음 i에 +1을 한다.

이 동작을 계속~ 반복하라는 코드이다.

 

그리고 for문 바깥에서 res를 출력해 1~100까지의 합이 무엇인지 알 수 있다.

+) 만약 실행문을 진행할때 마다 res의 값을 알고 싶다면 for문 안에도 console.log를 찍어주면 되겠다.

 

 

 

 

<for문 예시-2>

이중 for문

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

그렇다면 이렇게 for문안에 for문을 넣어서 만들면 어떻게 코드가 작동할까?

1.  가장 바깥의 for문의 변수의 시작값을 확인한 후 조건식으로 넘어간다. 

2.  이때 i=0이고 i<3이 참이므로 실행문을 실행한다. 

3.  실행문이 for문이니 두번째 for문의 변수 시작값을 확인한 후 조건식으로 넘어간다.

4.  j=0이고 j<3인 식을 만족하니 참이다. 따라서 안의 실행문을 실행한다음 j++를 해준다

5.  그리고!!!! 이때 다시 바깥 for문으로 가는게 아니라 두번째 for문의 조건식이 false가 나올때 까지 실행한다

 

즉, i=0일때 i<3 => true이니 실행문인 두번째 for문이 실행되고 j=0부터 시작해서 j<3의 결과가 false로 나올때까지 만+1씩 해가면서 j for문의 실행문을 계속 돌려주는거다.

출력문까지 보면 이해가 될 것이다!

 

이중 for문 출력

 

 

 

while문

: 기본적으로 무한루프. 종료 조건이 있어야 한다.

 

while(조건문){
	조건문이 참일 시 실행할 실행문

	종료조건
    break;
}

형태는 이정도로 보면 되겠다. 실제로 쓸때 어떻게 쓰는지 예제 코드와 함께 보자!

 

 

let number=0;
while(number<10){

  number++;
  console.log(number);
 
}

이 while문이 어떻게 작동되는지 보자

조건식을 보니 number<10가 참일동안 실행문이 계속 실행된다. number의 초기값은 0이다.

실행문을 보니 후위연산자를 통해 number에 +1 을 해주었다. 그리고 console.log를 실행한 다음 다시 조건식을 확인한다. 

실행문에서 number++

number = 1 이므로 조건식을 만족한다. 그러니 다시 실행문을 반복한다.

 

 

 

 

이제 실습을 하기 위한 개념을 배웠으니 실습문제를 해봅시다ㅎㅎㅎ

 

바로바로 별찍기!!!

 

 

별!!!! 벼어어어얼!!!!!

 

 

 


 

 

 

내가 쓴것만이 정답은 아니니 코드는 밑에 첨부해 두겠다 모양을 보고 혼자 풀어보길 추천한다.

힌트 : 역방향이나 오른쪽으로 찍을 때는 빈공간을 별을찍어준다고 생각하면 되었다

 

1.  왼쪽  직삼각형             

 

 

2.   오른쪽  직삼각형

 

 

 

 

3.   왼쪽 역방향  직삼각형

 

 

 

 

 

4.   오른쪽 역방향  직삼각형

 

 

 

 

 

 

 

 

 

 

 

 

<왼쪽 직삼각형>

//왼쪽 직각삼각형 별 찍기
for(let i=0; i<5; i++){
    for(let k=0; k<=i; k++){
        document.write('*');
    }
    document.write('<br>');
}

 

 

<오른쪽 직삼각형>

// //오른쪽 직각삼각형 별 찍기
for(let i=5; i>0; i--){
    for(let k=2;k<=i ;k++){
        document.write("&nbsp");
    }
    for(let j=0; 6-i>j; j++){
    document.write('*');
}
document.write('<br>');
}

 

 

<왼쪽 역방향직삼각형>

//역방향 왼쪽 직각삼각형 별 찍기
for(let i =5; i>=0; i--){
    for(let k=1; k<=i; k++){
        document.write('*');
    }
    document.write('<br>');
}

 

 

<오른쪽 역방향 직삼각형>

 

//오른쪽 직삼각형역방향 별찍
for(let i =5; i>0; i--){
    for(let k=0; 5-i>k;k++){
        document.write("&nbsp"); //0~4개 공백
    }
    for(let j=0;i-j>0 ; j++){
        document.write('*');
    }
    document.write('<br>');
}

 

 

 

 

 

728x90