Section 19: 루프의 구조

1. For 루프

루프문의 핵심 - 어떤 기능을 반복하는 것

다양한 루프문:

• for loop 
• while loop
• for...of loop
• for...in loop

// for(초기값;조건값;증감값) {}

// 1부터 10까지의 수를 출력하는 루프문
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

 

2. For 루프 예제 더 알아보기

// 1 ~ 20 중 짝수만 출력하는 루프문
for (let i = 1; i < 21; i++) {
  if (i % 2 == 0) {
    console.log(i);
  }
}

// 100부터 10까지 10의 단위로 출력하는 루프문
for (let i = 100; i > 0; i -= 10) {
  console.log(i);
}

 

3. 무한 루프의 위험성

• 중단되지 않는 루프문을 의미한다.
• 컴퓨터의 메모리를 전부 차지하게 되고 브라우저가 제 역할을 하지 못하게 된다.
• 루프의 중단 조건에 대해 주의할 것

// 이 코드를 실행시키지 말 것!
// for(let i = 20; i >= 0; i++) { // 조건값이 참이 되지 않는다.
// 조건값이나 증감값을 수정하자
//	console.log(i);
// }

 

4. 배열 루프

배열을 다룰 때는 항상 루프문을 사용한다.

const animals = ['lions', 'tigers', 'bears'];
for(let i = 0; i < animals.length; i++) {
	console.log(animals[i]);
}
// 0 'lions'
// 1 'tigers'
// 2 'bears'

 

5. 네스트 구성 루프

중첩 루프 구조로 반복문 안에 반복문이 있는 것을 의미한다.

for(let i = 1; i <= 4; i++) {
	console.log(`i is:${i}`);
	for(let j = 1; j <= 3; j++) {
		console.log(`	j is: ${j}`);
	}
}

// i is:1
// 	j is: 1
// 	j is: 2
// 	j is: 3
// i is:2
// 	j is: 1
// 	j is: 2
// 	j is: 3
// i is:3
// 	j is: 1
// 	j is: 2
// 	j is: 3
// i is:4
// 	j is: 1
// 	j is: 2
// 	j is: 3

 

 

6. 또 다른 루프: While 루프

while의 조건이 참이면 실행, 거짓이면 실행되지 않는다.

// 1 ~ 10까지 출력하는 반복문
let num = 0;

// num이 10보다 작으면 참
while (num < 10) {
	num++;
	console.log(num);
}

// 반복횟수가 정해져 있지 않은 반복문
const SECRET = 'PassWord';
let guess = prompt('secret 코드를 입력하세요');

while(guess !== SECRET) {
	let guess = prompt('secret 코드를 입력하세요');	
}
console.log('secret 코드를 맞추셨습니다!');

 

7. 정지/break 키워드

• break 키워드는 while문에서 자주 사용된다.
• break 키워드를 만나면 반복문은 종료된다.

let input = prompt('아무 값이나 입력해볼래?');
while(true) {
	input = prompt(input);
    // 사용자 입력 값이 '따라하지 마'이면 반복문을 종료한다.
  	// 실행 코드가 한 줄이면 중괄호를 생략할 수 있다.
	if(input === '따라하지 마') break;
}

console.log('알았어, 네가 이겼어!');

 

8. 추측 게임 만들기

// 사용자로부터 받는 입력 값은 항상 문자열이므로 숫자형으로 형변환이 필요하다.
let maxNum = parseInt(prompt('원하는 숫자를 입력해보세요.'));

while (!maxNum) {
  maxNum = parseInt(prompt('올바른 숫자를 넣어주세요.'));
}

// 1부터 입력 값까지 중 난수 만들기
const answer = Math.floor(Math.random() * maxNum) + 1;
let userAnswer = prompt(`1부터 ${maxNum}까지 중에 정답이 있습니다. 맞춰보세요!`);
let tryNum = 1;

while (parseInt(userAnswer) !== answer) {
  tryNum++;

  if (userAnswer === 'q') break;

  let message = userAnswer > answer ? `${userAnswer}보다 숫자가 작습니다! 다시 도전!` : `${userAnswer}보다 숫자가 큽니다! 다시 도전!`;
  userAnswer = prompt(message);
}

if(userAnswer === 'q') {
  alert(`정답은 ${answer}입니다. 숫자 맞추기 게임울 종료합니다.`);
} else {
  alert(`축하합니다! 정답은 ${answer}입니다. 시도 회수는 ${tryNum}이군요!!`);
}

 

9. For 루프의 유용함

for...of

• JavaScript에서 새로 생긴 개념이다.
• 배열이나 문자열에서 사용 가능하다.
• index가 필요한 상황에서는 원래의 for loop문을 사용하는 편이 낫다.

for(variable of iterable) {
	statement
}

const foods = ['치킨', '피자', '탕수육', '족발', '초밥'];

// 인덱스를 사용하지 않고 배열의 요소를 출력한다.
for(let food of foods) {
  console.log(food);
}

// 피자
// 탕수육
// 족발
// 초밥

for(let char of 'hello world') {
	console.log(char);
}

// h	
// e
// l
// l
// o 
// w
// 
// o
// r
// l
// d

 

10. 객체 루프

for...in

• 주로 객체의 key값을 출력하는데 사용한다.

const testScores = {
	kim: 80,
	lee: 100,
	park: 95,
	kang: 87,
	sin: 96,
}

// for... in을 통해 testScores의 key값을 가지고 온다.
for(let person in testScores) {
	console.log(`${person} scored: ${testScores[person]}`);
}

// lee scored: 100
// park scored: 95
// kang scored: 87
// sin scored: 96

Object.keys(testScores)
(5) ['kim', 'lee', 'park', 'kang', 'sin']

Object.values(testScores)
(5) [80, 100, 95, 87, 96]

let total = 0;
for(let score of Object.values(testScores)) {
	total += score;
}

// total
// 458

// 점수 합계의 평균 구하기
console.log(total / scores.length); // 91.6

 

11. 할 일 목록(Todo List)프로젝트 개요

• 'new' - Add A Todos // 신규 todo를 입력하세요
• 'list' - List All Todos // 목록 띄워주기
• 'delete' - Remove Sepcific Todo // 삭제할 인덱스 번호를 입력하세요
• 'quit' - Quit App // 종료 문구

 

12. 할 일 목록(Todo List)프로젝트 따라하기

// 코드를 처음 짜고 강의의 예외처리 부분을 참고하였다.

const menual = ['추가: 신규 todo 추가', '목록: 등록한 todo 목록 보기', '삭제: todo 삭제하기', '메뉴얼: 메뉴얼 보기', '종료: 프로그램 종료'];
console.log('======= menual ======');
for (let menu of menual) {
  console.log(`${menu}`);
}
console.log('=====================');

let run = false;
let todos = [];

while (!run) {
  let userInput = prompt('실행할 명령어를 입력하세요.');

  switch (userInput) {
    case '추가':
      const todo = prompt('할 일을 입력하세요.');
      todos.push(todo);
      break;
    case '목록':
      let index = 0;
      console.log('======== 목록 =======');
      for (const todo of todos) {
        console.log(`${index}: ${todo}`);
        index++;
      }
      console.log('=====================');
      break;
    case '삭제':
      const indexStr = prompt('삭제할 todo 리스트의 순번을 입력해주세요.');
      const delTodo = parseInt(indexStr);
      if(!Number.isNaN(delTodo) && delTodo < todos.length - 1) {
        const isConfirm = confirm(`${delTodo}를 삭제하시겠습니까?`);
        const result = '';
        if (isConfirm) {
          result = todos.splice(delTodo, 1);
        }
        alert(`${result}를 삭제하였습니다.`);
        break;
      } 
      alert(`올바른 인덱스가 아닙니다.`);
      break;
    case '메뉴얼':
      console.log('======= 메뉴얼 ======');
      for (let menu of menual) {
        console.log(`${menu}`);
      }
      console.log('=====================');
      break;
    case '종료':
      console.log('프로그램을 종료합니다.');
      run = true;
      break;
    default:
      console.log('존재하지 않는 명령어 입니다.');
      break;
  }
}