자바스크립트 강의 EP_15 | 반복문 | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트 반복문 중 for문, for...in, for...of, while문, do...while문의 특징은 무엇인가요?

각 반복문은 다음과 같은 특징을 가집니다:

• for문: 정해진 숫자만큼 반복할 때 사용하며, 초기화, 조건식, 표현식으로 구성됩니다 .
• for...in: 객체 안에 있는 값을 반복적으로 가져올 때 효율적입니다 .
• for...of: 배열 안에 있는 값을 효율적으로 꺼내올 수 있습니다 .
• while문: 반복 횟수를 정확히 알 수 없을 때 사용하며, 조건식이 참일 경우 계속 수행됩니다 .
• do...while문: while문과 동일하게 조건식이 참일 때까지 수행되지만, 최초 한 번은 무조건 실행됩니다 .

반복문에서 continue와 break는 어떻게 사용되나요?

• continue: 반복문에서 continue를 만나면 해당 반복문의 나머지 실행문을 건너뛰고 다음 반복을 계속 진행합니다 .
• break: break를 만나는 순간 현재 제어문(반복문)을 종료합니다 .

자바스크립트 반복문의 핵심을 완벽하게 이해하고 실전에 적용하고 싶다면 이 강의가 정답입니다. for, for...in, for...of, while, do...while 등 다양한 반복문의 동작 원리를 명확한 예시와 함께 설명하며, 특히 초보자들이 반복문을 어렵게 느끼는 이유를 공감하며 '익숙함'의 중요성을 강조합니다. 단순히 문법을 나열하는 것을 넘어, continue와 break 같은 제어 흐름 분기문을 활용하여 코드를 더욱 효율적으로 작성하는 방법까지 배울 수 있습니다. 이 강의를 통해 반복문에 대한 막연한 두려움을 없애고, 실제 프로젝트에서 능숙하게 활용할 수 있는 실용적인 코딩 능력을 키울 수 있을 것입니다.

1. 반복문 학습의 중요성 및 마인드셋

1. 반복문의 정의 및 유용성:
   1. 반복문은 동일한 코드를 여러 번 반복해서 실행할 때 유용하게 사용되는 제어문이다.

1. 초보자가 반복문을 어렵게 느끼는 이유:
   1. 강사는 프로그래밍 초기에 제어문, 특히 반복문에서 어려움을 느꼈으며, 이는 함께 배우는 친구들도 마찬가지였다.
   2. 근본적인 원인: 익숙하지 않기 때문이다.
   3. 조건문(if문)과의 차이점:
      1. if문은 조건식이 참일 경우에만 코드 블록이 한 번 수행되므로 결과를 예측하기 쉽다.
      2. for문이나 while문 같은 반복문은 여러 번 반복적으로 수행될 수 있다 (한 번, 두 번, 세 번 등).
      3. 반복 수행 중 반복문내에서 선언된 변수(예: i 변수)의 값이 계속 바뀔 수 있어 예측이 어렵게 느껴질 수 있다.
   4. 결론: 어렵게 느껴질 뿐, 결코 어려운 것이 아니며 익숙해지면 쉬워진다.

1. '익숙함'의 중요성 비유:
   1. 음식점 서빙 아르바이트 경험에 비유하여 설명한다.
   2. 처음에는 테이블 번호가 헷갈렸지만, 따로 외우려 하지 않아도 몇 번 하다 보면 자연스럽게 익숙해진다.
   3. 반복문도 마찬가지로 프로그래밍에서 빼놓을 수 없는 중요한 요소이므로, 자주 사용하다 보면 익숙해질 것이다.
   4. 강의 후반부의 프로젝트를 통해 간단한 애플리케이션을 만들면서 반복문에 익숙해지면 더 쉽게 느껴질 것이다.

2. for문의 기본 동작 방식 및 실습

1. for문의 정의:
   1. for문은 정해진 숫자만큼 반복하려고 할 때 사용하는 반복문이다.

1. for문의 구성 요소:
   1. for문의 괄호는 초기화, 조건식, 표현식으로 구성된다.

1. for문의 동작 방식:
   1. 초기화: for문이 시작되면 초기화는 맨 처음에 단 한 번만 수행된다.
      1. 예시: let i = 0; (변수 i가 0으로 초기화된다.)
      2. 이 변수는 for문의 코드 블록 안에서 사용할 수 있다.
   2. 조건식 실행: 초기화가 끝나면 조건식이 실행된다.
   3. 코드 블록 수행: 조건식이 참(true)이면 코드 블록을 수행한다.
      1. 예시: i가 0일 때 콘솔에 0이 출력된다.
   4. 표현식 실행: 명령문(코드 블록)이 끝나면 표현식으로 이동하여 실행된다.
      1. 예시: i++ ( 증감 연산자로 i 값이 1씩 증가한다.)
   5. 반복: 표현식실행 후 다시 조건식으로 돌아가 참/거짓을 판별하고, 참이면 코드 블록 수행 -> 표현식실행 과정을 반복한다.
   6. 종료: 조건식이 거짓(false)이 되면 for문의 수행은 종료된다.
   7. 요약: 초기화(1회) -> 조건식-> 명령문 -> 표현식-> ( 조건식-> 명령문 -> 표현식) 반복 -> 조건식거짓 시 종료.

1. for문 실습 1: 0부터 4까지 출력:
   1. for (let i = 0; i < 5; i++) { console.log(i); } 코드를 실행한다.
   2. 결과: 0, 1, 2, 3, 4가 출력되는 것을 확인할 수 있다.
   3. 만약 5까지 출력하고 싶다면 i <= 5 (5보다 작거나 같다)로 조건식을 변경하면 된다.
   4. i가 5일 때까지 수행 후 i가 6으로 증가하면 조건식이 거짓이 되어 for문을 빠져나온다.

1. for문 실습 2: 배열 요소 출력:
   1. fruits 배열(["사과", "배", "바나나", "포도", "딸기"])을 선언한다.
   2. 배열의 각 요소에 일일이 대괄호 표현식으로 접근하는 것은 불편하다.
   3. for문을 사용하여 배열의 길이를 나타내는 length 속성(fruits.length)을 조건식에 활용한다.
   4. for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } 코드를 실행한다.
   5. 결과: 배열의 0번째부터 차례대로 과일 이름이 출력되는 것을 확인할 수 있다.

3. ES6+에서 추가된 반복문: for...in과 for...of

3.1. for...in: 객체 속성(키) 반복

1. for...in의 정의:
   1. 객체안에 있는 값을 반복적으로 가져올 때 효율적인 반복문이다.

1. for...in 등장 이전의 객체 속성 접근 방식:
   1. person 객체({ name: "길동", age: 25, job: "개발자" })를 선언한다.
   2. 직접 속성명으로 접근: person.name, person.age 등으로 출력할 수 있다.
   3. 대괄호 표기법으로 접근: 속성명(키)을 모를 경우, person["name"]과 같이 대괄호 안에 키를 문자열로 넣어 접근할 수 있다.
      1. 사용자로부터 키를 입력받아 동적으로 값을 출력할 때 유용하다.
   4. Object.keys() 메서드 활용:
      1. Object.keys(객체)는 해당 객체의 모든 키를 배열로 반환한다.
      2. 이 키 배열을 일반 for문으로 순회하며 각 키에 해당하는 값을 대괄호 표기법으로 가져와 출력할 수 있다.
      3. 가독성을 위해 키를 변수에 할당하여 사용하는 것이 좋다.

1. for...in을 사용한 객체 속성 접근:
   1. ES6에서 for...in 문법이 등장하여 객체의 값을 더 편리하게 출력할 수 있게 되었다.
   2. for (let key in person) { console.log(key); } 코드를 실행하면 person 객체의 키(name, age, job)가 순서대로 key 변수에 할당되어 출력된다.
   3. for (let key in person) { console.log(person[key]); } 코드를 실행하면 각 키에 해당하는 값(홍길동, 25, 개발자)이 출력된다.
   4. 결론: 객체의 값을 출력할 때는 기본 for문보다 for...in을 사용하는 것이 더 간단하다.

3.2. for...of: 배열 요소 반복

1. for...of의 정의:
   1. 배열안에 있는 값을 효율적으로 꺼내올 수 있는 반복문이다.

1. for...of를 사용한 배열 요소 접근:
   1. for (let value of fruits) { console.log(value); } 코드를 실행하면 fruits 배열의 각 요소(사과, 배, 바나나 등)가 순서대로 value 변수에 할당되어 출력된다.
   2. 활용 시점:
      1. 만약 인덱스처럼 1씩 증가하는 값이 필요한 경우에는 기본 for문을 사용한다.
      2. 단순히 배열안에 있는 값만 필요한 경우에는 for...of를 사용하는 것이 효율적이다.

4. while문과 do...while문

4.1. while문

1. while문의 정의:
   1. 반복 횟수를 정확히 알 수 없을 때 유용하게 사용하는 반복문이다.
   2. 조건문이 참(true)일 경우 코드 블록을 계속 수행하며, 조건문이 거짓(false)이 될 때까지 반복한다.

1. while문 실습:
   1. let count = 0; 변수를 선언한다.
   2. while (count < 5) { console.log(count); count++; } 코드를 실행한다.
   3. 동작 방식:
      1. 맨 처음 조건식(count < 5)이 수행되고, count가 0이므로 참이다.
      2. 코드 블록이 수행되어 0이 출력되고, count가 1로 증가한다.
      3. 다시 조건식으로 돌아가 count가 1이므로 참이다.
      4. 이 과정을 반복하여 0, 1, 2, 3, 4가 출력된다.

4.2. do...while문

1. do...while문의 정의:
   1. while문과 동일하게 조건문이 참일 때까지 계속 수행된다.
   2. while문과의 차이점: do...while문은 무조건 한 번은 실행된다.

1. while문과 do...while문의 실행 흐름 비교:
   1. while문: let count = 5; while (count < 5) { ... }
      1. count가 5이므로 조건식(5 < 5)이 거짓이다.
      2. 코드 블록은 한 번도 수행되지 않고 바로 종료된다.
   2. do...while문: let count = 5; do { ... } while (count < 5);
      1. do 블록이 먼저 실행되어 한 번 출력된다 (예: "다섯 번째 출력").
      2. count가 6으로 증가한 후 while 조건식(6 < 5)이 거짓이므로 종료된다.
   3. 결론: do...while문은 최초 한 번은 수행된다는 점이 while문과의 주요 차이점이다.

1. 현업에서의 활용:
   1. 현업에서는 do...while문보다 while문을 더 많이 사용하며, while문보다 for문을 더 많이 사용한다.
   2. 따라서 do...while문은 참고용으로만 알아두면 된다.

1. do...while문 실습:
   1. let number = 0; 변수를 선언한다.
   2. do { console.log(number); number++; } while (number < 5); 코드를 실행한다.
   3. 결과: 0, 1, 2, 3, 4가 출력되는 것을 확인할 수 있다.
   4. number에 5를 할당했을 때:
      1. while문은 조건이 거짓이므로 코드 블록이 수행되지 않는다.
      2. do...while문은 최초 한 번은 수행되고, 그 다음에 조건문이 거짓이므로 빠져나간다.

4.3. while문 사용 시 주의사항: 무한 루프

1. 무한 루프 발생 조건:
   1. while문 코드 블록 안에 while문을 빠져나올 수 있는 연산(조건 변경)이 없으면 무한 루프에 빠진다.
   2. 예시: let count = 0; while (count < 5) { console.log(count); }
      1. count가 계속 0이므로 count < 5는 항상 참이 된다.
      2. 결과: 0이 수백, 수천 번 계속 출력되며 브라우저가 다운될 수 있다.
   3. 해결책: 코드 블록 안에서 while문을 빠져나올 수 있도록 count++와 같은 연산이나 다른 종료 조건이 반드시 포함되어야 한다.

5. 제어 흐름 분기문: continue와 break

5.1. continue

1. continue의 정의:
   1. 반복문에서 주로 사용하는 분기문이다.
   2. continue를 만나면 continue 아래에 있는 실행문을 실행하지 않고, 바로 다음 반복문으로 건너뛰어 계속 실행한다.

1. continue 실습:
   1. 0부터 9까지의 숫자를 문자열로 연결하는 for문을 작성한다.
      1. let text = ""; for (let i = 0; i < 10; i++) { text += i; }
      2. 결과: "0123456789" 문자열이 출력된다.
   2. 만약 3을 제외하고 싶다면 if (i --- 3) { continue; } 조건을 추가한다.
   3. 동작 방식: i가 3이 되는 순간 continue를 만나 text += i; 문장을 건너뛰고 다음 반복(i=4)으로 넘어간다.
   4. 결과: "012456789" (3을 제외한 문자열)이 출력된다.

5.2. break

1. break의 정의:
   1. break를 만나는 순간 제어문(반복문)을 종료한다.
   2. switch문에서 break를 만나면 switch문을 종료시켰던 것과 동일한 의미이다.

1. break 실습:
   1. continue 대신 break를 사용하여 if (i --- 3) { break; } 조건을 추가한다.
   2. 동작 방식: i가 3이 되는 순간 break를 만나 for문 전체가 종료된다.
   3. 결과: "012" 문자열만 출력되고 for문이 빠져나가는 것을 확인할 수 있다.

6. 다음 강의 예고: 반복문 퀴즈

1. 강사는 반복문이 어렵게 느껴질 수 있다고 언급했지만, 생각보다 쉽게 이해한 사람도 있을 것이다.
2. 다음 시간에는 반복문을 통해 익숙함을 단시간에 끌어올릴 수 있는 퀴즈를 진행할 예정이다.
3. 이 퀴즈는 프로그래밍 초보자들이 반복문에 더 익숙해지도록 돕는 역할을 할 것이다.
4. 다음 강의에서 반복문퀴즈로 다시 찾아올 것을 예고하며 강의를 마친다.

자바스크립트 강의 EP_16 | 퀴즈 – 별그리기 | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_16 | 퀴즈 - 별그리기 | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로그