반복문 종류(Iterate)
JavaScriptTILWeCodebreakcontinuedo whilefor loopfor ~ infor ~ ofiteratenested for loopwhile반복문반복문의 종류중첩반복문
1
TIL_JAVASCRIPT
목록 보기
9/15
for loop 반복문
반복문이 어떻게 실행이 되는지 다시 한번 재학습
📍 숫자 1 ~ 4 까지 출력 해 주세요. for (let i = 1; i < 5; i++){ console.log(i) } // 1,2,3,4;
i condition result 1 1 1 2 2 2 3 3 3 4 4 4 5 5 false i는 5보다 작아야 하는 condition으로 인하여, 해당 for 문은 총 3번까지 반복이 되어서 해당하는 값 1,2,3,4 가 console.log( i )로 찍힌 것이다. 5는 값이 같기( = ) 때문에 ' < ' 작다는 연산자 조건이 맞지 않아 console.log( i ) 값으로 나오지 않는 것이다.
📍 숫자 1 ~ 50까지 더한 값을 출력 해 주세요. let total = 0; for (let i = 1; i <= 50; i++){ total += i } console.log(total); // 1275
i condition total = total + i 1 1 0 = 0 + 1 2 2 1 = 1 + 2 3 3 3 = 3 + 3 4 4 6 = 6 + 4 5 5 10 = 10 + 5 . ... ... . ... ... 50 50 1225 = 1225+50 초기화 : i는 1부터 시작 조건식 : 1부터 50까지 증감문 : 1씩 더하세요. 실행코드 : ' += ' 연산자는 'total = total + i' 와 동일
🛎 for문의 초기화, 조건식, 증감문은 각각 생략이 가능하고, 생략 하더라도 세미콜론 (;) 으로 구분은 꼭 지어야 한다.
Break (반복문 빠져나오기)
반복문은 'break' 가 있는 지점에서 종료하고 반복문을 나온다. 'break'는 조건문에서도 사용된다.for(let i = 0; i < 5; i++){ if (i === 3) { break; } console.log(i); } // 0,1,2 /* i가 3 일때 부터는 출력되지 않는다. 그 이유는 i가 3일때 break 걸렸기 때문에, 이 반복문을 빠져나가 다른 코드를 실행한다. */
Continue (다음 반복문으로 바로 진행)
반복문에서 'countinue'가 있는 지점에서 현재 실행 중인 반복문을 멈추고 다음 반복문으로 바로 진행한다.for(let i = 0; i < 5; i++){ if (i === 3) { countinue; } console.log(i); } // 0,1,2,4 /* i가 3 일 때 'countinue'를 만나 '3'에서 반복문이 멈추기 때문에 '3'은 건너뛰고, 다음 반복문에 해당되는 '4'로 넘어가 실행된다.*/
Reverse(count backwards)
값을 큰 수에서 작은 수로 진행 할 수 있다.📍 1부터 10까지 짝수만 큰 숫자대로 출력 let j = [] for (let i = 10; i > 0; i--){ if( i % 2 == 0){ j.push(i)} } console.log(j) // [10, 8, 6, 4, 2] /* 큰 숫자부터 나열하기 위해 i를 10 으로 선언 그리고 1부터 10까지의 숫자 범위가 있기에 i는 0부터 반복하라는 조건 10에서부터 감소해야 하기에 증감식을 i--로 지정. -------여기까지가 1~10까지 큰 숫자대로 출력한다는 코드------- for문에서 실행 할 코드에서 짝수만 출력한다는 조건을 걸어 j 의 빈 배열에 요소 추가 하는 push 메서드를 사용 */
Nested (중첩반복문)
반복문 안에 반복문을 넣어 실행 하는 것이 중첩 반복문. 용도는 두 배열의 요소를 비교하는 것 외부 for 문의 counter에 대해 내부 for문이 완전히 실행된 후에, 다시 외부 for문으로 돌아가 반복하는 것.🔎 두 배열에서 일치하는 숫자는? let first = [1,2,3,4,5] let second = [3,4,5,6,7,8] for (let i = 0; i < first.length; i++){ for (let j = 0; j < second.length; j++){ if (first[i] === second[j]){ console.log(first[i])}}} // 3,4,5
first [i] second [j] condition [i] === [j] result 1 3 1 === 3 false 1 4 1 === 4 false 1 5 1 === 5 false 1 6 1 === 6 false 1 7 1 === 7 false 1 8 1 === 8 false 2 3 2 === 3 false 2 4 2 === 4 false .. .. .. .. 3 3 3 === 3 true first 배열의 0번째 요소 '1' 이 i에 들어간다. i가 '1'인 동안에 두번째 for 문 시작이 된다. j에는 second 배열의 0번째 요소 '3'부터 들어간다. 조건문 if에 따라 i의 값인 '1'과 j의 값인 '3'이 일치하는가? ---> false 이기 때문에, second 배열의 그 다음 요소 '4'와 일치하는지 비교 다시 반복한다. 내부 반복문인 second의 마지막 요소 '8'까지 완전히 비교한 후에 i의 1은 j에 없기 때문에 false. i의 '1'은 console.log(first[i]) 에 들어가지 못한다. first의 1번째 요소 '2'가 i에 대입되고, 다시 second 배열의 요소들이 차례로 j의 변수에 들어가 내부 반복문이 시작한다. ---> i에 '3'이 들어가고, j에 '3'이 들어갈 때 if 조건에 일치 하기 때문에 console.log(first[i]) 에 진입성공!!
for in 반복문
상기 for 반복문과 다른 형태의 반복문 해당 객체의 열거할 수 있는 프로퍼티(enumerable properties)를 순회 단, 열거할 수 없는 프로퍼티는 반복문에서 반환되지 않는다. 이유는 해당 속성이 false이기 때문.! 따라서 true인 프로퍼티만 반환된다.
for (let key in 객체) { 객체의 열거할 수 있는 모든 프로퍼티의 갯수만큼 반복적으로 실행할 코드 }let obj = { '먹고싶은 음식' : '매운짬뽕', '먹기싫은 음식' : '오이'}; for (let i in obj){ console.log(`${i}은 ${obj[i]}입니다`) } /* "먹고싶은 음식은 매운짬뽕입니다" "먹기싫은 음식은 오이입니다" */property(객체 내부의 속성) 이름인 '먹고싶은 음식', '먹기싫은 음식' 문자열이 i 변수에 대입 property 값은 obj[i]처럼 대괄호에 대입.!
for of 반복문
반복할 수 있는 객체 순회 전용 ( array, map, set, arguments 객체등등)
for (let key of 객체) { 객체의 열거할 수 있는 모든 프로퍼티의 갯수만큼 반복적으로 실행할 코드 }let arr = new Set(['삼겹살','오뎅','국수','오뎅','목살','삼겹살','항정살']); for (let i of arr){ console.log(i) } /* "삼겹살" "오뎅" "국수" "목살" "항정살"*/ let arr = ['파스타','빙수','탄산수','복숭아']; let now = '지금 먹고싶은 음식 ' for (let i of arr){ console.log(`${i}는 내가 정말 ${now}입니다`) } /* "파스타는 내가 정말 지금 먹고싶은 음식입니다." "빙수는 내가 정말 지금 먹고싶은 음식입니다." "탄산수는 내가 정말 지금 먹고싶은 음식입니다." "복숭아는 내가 정말 지금 먹고싶은 음식입니다."*/
while 반복문
조건문이 참일 때 실행되는 반복문이다. 반복이 시작되기 전에 조건이 참인지, 거짓인지 확인 후에 참이면 while의 반복문이 시작된다. 기본문법은 하기와 같으며, 가독성이 for loop 보다 떨어진다.while ( condition ) { code } 🔎 숫자 1 ~ 4 까지 출력 해 주세요. let i = 0; while (i < 5) { console.log(i) } // 0,0,0,0....; /* 해당 반복문은 i 값이 0으로 우선 무한반복이 된다. i = 0 이고, 0은 5보다 작기 때문이다*/여기서 for문과 비교 했을 때, 한 가지 빠진 것이 있다.
'증.감.식'!i가 0으로 선언되었기 때문에 무한으로 0으로 반복이 된 것이다.
여기서 증감식을 추가 한다면?🔎 숫자 1 ~ 4 까지 출력 해 주세요. let i = i; while (i < 5) { console.log(i) i++; } // 1,2,3,4 ; /* 해당 반복문에 i가 1씩 증가한다는 증감식 조건을 걸면.. i는 1일 때, 5보다 작으니 'true'이기 때문에 i의 값으로 1 추가. 그다음 i에 1을 추가한다는 증감식을 통해 i가 2가 될 때 라는 조건이 넘어가는 것이다.
do while 반복문
while과 별반 다를 것이 없이 코드를 반복 해 주지만 단지 조건문을 뒤에 써준다. 그렇기 때문에 while과 다르게 먼저 코드를 실행한 후에, 조건을 비교한다. while은 조건에서 떨어지면 코드실행이 아예 진행되지 않지만, do while은 코드실행이 적어도 1번은 실행한다.🔎 숫자 1 ~ 10 까지 출력 해 주세요. let i = 1; do { console.log(i); i++; } while (i <= 10) // 1,2,3,4,5,6,7,8,9,10🔎 숫자 1 ~ 50 까지 더한 값을 출력 해 주세요. let total = 0; let i = 0; do { total += i; i++; } while (i <= 50); // 1275;
🛎🛎 여기서.여기서.여기서 또 잠깐!
반복문을 실행해야 할 때, for 문을 쓰는 편이 더 좋다.
for문은 ( ) 에 초기화,조건식,증감문을 세미콜론(;)으로 구분하여 한번에 쓸 수 있지만,
while은 선언 따로, 조건 따로, 증감 따로 쓰기 때문에 코드가 길어지고, 많아지면 가독성이 떨어지기 때문에 반복문을 써야할 때는 'for'문을 쓰는 편이 좋다는 점! 이라고 생활코딩에서 배웠다. 🤦🏻♀️🤷🏻♀️
🙋🏻♀️ Today,
오늘은 너무 집중이 안됐다.
반복문을 벨로그에 쓰려고 찾다보니 이것저것 자꾸 꼬리에 꼬리를 물면서...
반복문의 예제들이 내 발목을 너무 많이 잡아서 좀처럼 헤어나오질 못했다🌪🌪
중첩반복문..
아직도 헤어나오지 못하고 있다.🔥☄️🚨
기본이라는 구구단 예제는 이제 이해는 했지만 다른문제를 보면 바로 막혀버린다.
이해를 하고서 글을 써야 머리 속에 다시 정리되면서 잘 차곡히 쌓이는데.. 이 부분은 아직 들어오지가 않는다.
이해를 했는데도 감이 안잡히는 이유는..?
이 부분에 대해서는 이해가 될 때까지 다양한 루트로 공부를 해야겠다.
아무리 생각해도 별찍기 예제는 이해가 안된다.
중첩 반복문은 아무래도 추후에 또 글이 올라 올 것 같다.
nested for loop will be back...🤝 여기쯤에서 타협하는 걸로.
👋🏻📚 오늘의 깨달음 📜
while 문을 처음 접하면서 콘솔에 찍어보는데... 증감식을 어디에 두느냐에 따라 값이 달라지는 것이다.
왜 그러한지 알아보기 위해 정말 간단하고 짧은 코드를 비교해서 이유를 알아냈다.
이렇게 이해하는 것이 우선 맞는지 모르겠지만 콘솔을 찍고 값이 추가 되느냐, 값이 추가 된 후에 콘솔이 찍히느냐의 차이인 것 같다.
이 차이점으로 컴퓨터는 내가 쓴 코드 순서대로 그대로 작동하는구나를 알았다. 그래... 잘 알았다.
💡증감식을 콘솔 뒤에 찍었을 때,
콘솔에 i가 0이 추가가 된 후에, 1이 증가되는 것
i 가 10인 경우, 조건에 맞지 않아 9까지 출력되는 것.
let i = 0;
while ( i < 10) {
console.log(i);
i++} // 0,1,2,3,4,5,6,7,8,9💡증감식을 콘솔 앞에 찍었을 때,
i = 0 일 때, 1이 추가되서 1부터 출력이 되는 것
i 가 9 일 때, 1이 추가되기 때문에 10까지 출력되는 것.
let i = 0;
while ( i < 10 ) {
i++;
console.log(i); } // 1,2,3,4,5,6,7,8,9,10
Whatever you want