자바스크립트 구성요소 ~ 반복문

나를 계속 붙잡아라

• counter
  • 특정 값으로 초기화 된다.
  • 루프의 시작점
• exit condition
  • loop가 멈추는 기준이 되는 종료 조건
• iterator
  • 끝나는 조건에 도달할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금씩 증가시킨다. ( 연산을 진행함 => 감소, 곱셈, 나눗셈 등 가능)
• 수도 코드

  loop(food = 0; foodNeeded = 10) {
    if (food = foodNeeded) {
      exit loop;
      // We have enough food; let's go home
    } else {
      food += 2; // Spend an hour collecting 2 more food
      // loop will then run again
    }
  }

---

루프의 표준

for (initializer; exit-condition; final-expression) {
  // code to run
}

• initializer — 일반적으로 숫자로 설정된 변수이며 루프가 실행 된 횟수가 얼마나 되는지 알기위해 증가한며, counter variable라고 한다.

• exit-condition — 앞에서 언급했듯이 loop가 언제 멈출지 정의한다. 이 조건은 일반적으로 비교 연산자, 종료 조건이 충족되었는지 확인하는 테스트를 특징으로 하는 표현식이다.

• A final-expression — 매번 loop 전체가 반복이 될때 항상 분석(또는 실행)한다. 일반적으로 counter variable를 증가(또는 경우에 따라 감소)하여 종료 조건 값으로 점점 가까워진다.

---

Break를 가지고 있는 loops

• 여러 연락처를 검색할 때, 이름을 입력받아 전화번호를 리턴하는 기능을 만든다 할 때의 경우

  <label for="search">Search by contact name: </label>
  <input id="search" type="text">
  <button>Search</button>
  
  <p></p>
  const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
  const para = document.querySelector('p');
  const input = document.querySelector('input');
  const btn = document.querySelector('button');
  
  btn.addEventListener('click', function() {
    let searchName = input.value;
    input.value = '';
    input.focus();
    for (let i = 0; i < contacts.length; i++) {
      let splitContact = contacts[i].split(':');
      if (splitContact[0] === searchName) {
        para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
        break;
      } else {
        para.textContent = 'Contact not found.';
      }
    }
  });

---

Continue로 반복 건너뛰기

let num = input.value;

for (let i = 1; i <= num; i++) {
  let sqRoot = Math.sqrt(i);
  if (Math.floor(sqRoot) !== sqRoot) {
    continue;
  }

  para.textContent += i + ' ';
}

• 비효율적이지만, 제곱근과 정수로 바뀐 제곱근이 같지 않은 경우에 continue를 하는 경우로 설명

---

For Each

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

array1.forEach(fucntion(element) {
    console.log(elemnet);
});

• "a"
• "b"
• "c"
• 위와 같은 결과 반환
• Array function과 일반 function

---

while 그리고 do while

• while 기본 구문

  initializer
  while (exit-condition) {
    // code to run
  
    final-expression
  }

• while 예시

  let i = 0;
  
  while (i < cats.length) {
    if (i === cats.length - 1) {
      info += 'and ' + cats[i] + '.';
    } else {
      info += cats[i] + ', ';
    }
    i++;
  }

• do while 기본 구문

  initializer
  do {
    // code to run
  
    final-expression
  } while (exit-condition)

• do while 예시

  let i = 0;
  
  do {
    if (i === cats.length - 1) {
      info += 'and ' + cats[i] + '.';
    } else {
      info += cats[i] + ', ';
    }
    i++;
  } while (i < cats.length);

  • 내 생각에는 위에와 같이 인덱스로 접근하는 것은 do while로 하는 것은 좋지 않은 것 같다. out of index의 위험이 있기 때문에, 사용법을 보여주기 위한 예시인 것 같다.

---

카운트 다운 시작!

let output = document.querySelector('.output');
output.innerHTML = '';

let i = 10;

while(i !==0) {
   let para = document.createElement('p');
   if(i ===10) {
      para.textContent = "Count down ";
   } 
   para.textContent += i + "\n";
   output.appendChild(para);
   i--;
}
let para = document.createElement('p');
para.textContent = "Blast off!";
output.appendChild(para);

---

활동 학습: 손님 목록 작성

const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

const admitted = document.querySelector('.admitted');
const refused = document.querySelector('.refused');
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: '

const nextStr = ", ";
let refusedStr ="";
let admittedStr = "";

for(let i = 0; i<people.length; i++) {
   let person = people[i];
   if(person === "Phil" || person === "Lola") {
    refusedStr += person + nextStr;
   } else {
    admittedStr += person + nextStr;
   }
}
refusedStr = refusedStr.slice(0,refusedStr.length-2) + ".";
admittedStr = admittedStr.slice(0,admittedStr.length-2) + ".";

refused.textContent += refusedStr;
admitted.textContent += admittedStr;

---