JavaScript 기초 - 반복문(while & for)

🌈 반복문(while & for)

🔥 while문

🔥 for문

🔥 break & continue

1.while문

3) while문

• while문 선언 : 🔍 while( condition ) { body };

// 기본 형태
while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}
// 예시1 : i < 4을 만족할 동안 i를 출력
let i = 0;
while (i < 3) { 
  console.log( i );
  i++;
} // 0, 1, 2 출력 -> i가 0부터 시작해서 2까지 반복문 실행
// 예시2 : i가 0이되면 반복문 종료
let i = 3;
while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문 종료
  console.log( i );
  i--;
} // 3, 2, 1 출력

2) do...while문

• 본문을 최소한 한번이라도 실행 한 뒤, 조건(true인지, false인지)에 따라 반복문 실행
• while문 선언 : 🔍 do { body } while( condition );

// 기본 형태
do {
  // 반복문 본문
} while (condition);
// 예시1 - 본문이 먼저 실행되고, 조건을 평가해서 true일 때 까지 반복됨
let i = 0;
do {
  alert( i );
  i++;
} while (i < 3); // 0,1,2

2.for문

1) for문

• for문 선언 : 🔍 for( begin; condition; step ) { body };
• begin을 먼저 실행 후, condition에 맞으면 반복 1회, 그 다음에 step을 실행하고 다음 반복 실행

// 기본 형태
for (begin; condition; step) {
  // ... 반복문 본문 ...
}

// 예시1 : 
// begin(let i=0;)은 최초 1회 실행 -> condition(i<3;) true -> body실행 -> step 실행
// -> step 진행 후 condition(i<3;) 평가 -> ture면 반복, false면 종료
for (let i = 0; i < 3; i++) {
  alert(i);
} // 0, 1, 2가 출력

2) length 유형

const data = ['banana', 'apple', 'orange'];
for (let i=0; i<data.length; i++){
  console.log(data[i]);
}
// banana
// apple
// orange

3) typeof 유형

const data = ['banana', 10, true, 'kimchi', false];
for (let i=0; i<data.length; i++){
  console.log(typeof data[i]);
}
// string
// number
// boolean
// string
// boolean

4) for ... of [Array]

• JavaScript에서 "for ... of"는 Python에 "for ... in"과 유사
• 배열 안에 요소를 한개씩 순차적으로 탐색

const data = ['banana', 'apple', 'orange'];
for (let i of data){
  console.log(i);
}
// banana
// apple
// orange

4) for ... in [Object]

• 객체를 돌며 값을 하나씩 탐색함
• for문을 안쓰고 Object의 메서드를 이용해 객체의 값을 리스트로 돌려 받을 수 있음
  • Object.keys(), Object.values(), Object.entries()

// key 추출하기
const data = {
  name : 'Jaewon',
  age : 20,
  address : 'seoul',
  hobby : 'coding'
}
for (let i in data){
  console.log(i)
}
// name
// age
// address
// hobby

// value 추출
const data = {
  name : 'Jaewon',
  age : 20,
  address : 'seoul',
  hobby : 'coding'
}
for (let i in data){
  console.log(data[i])
}
// Jaewon
// 20
// seoul
// coding

// Object.keys()
const data = {
  name : 'Jaewon',
  age : 20,
  address : 'seoul',
  hobby : 'coding'
}
console.log(Object.keys(data)) // [ 'name', 'age', 'address', 'hobby' ]

// Object.values()
const data = {
  name : 'Jaewon',
  age : 20,
  address : 'seoul',
  hobby : 'coding'
}
console.log(Object.values(data)) // [ 'Jaewon', 20, 'seoul', 'coding' ]

// Object.entries()
const data = {
  name : 'Jaewon',
  age : 20,
  address : 'seoul',
  hobby : 'coding'
}
console.log(Object.entries(data))
// [ [ 'name', 'Jaewon' ],
//   [ 'age', 20 ],
//   [ 'address', 'seoul' ],
//   [ 'hobby', 'coding' ] 
// ]

3.break & continue

1) break

• 반복문 내부에서 어떤 상황을 마주했을 때, 반복문을 종료하고 빠져나갈 수 있게 해줌
• '?' 오른쪽에는 break가 올 수 없음

// 입력한 숫자를 계속 더해주는 반복문(단,입력하지 않으면 반복문 종료)
let sum = 0;
while (true) {
  let value = +prompt("숫자를 입력하세요.", '');
  if (!value) break; // 입력하지 않으면 종료
  sum += value; // sum = sum + value
}
console.log( '합계: ' + sum ); //반복문이 종료되었을 때, sum 확인

2) continue

• 현재 실행 중인 반복을 건너뛰고(skip), 다음 반복으로 넘어감(조건 통과)
• 특정 조건의 반복은 생략하고 반복을 계속 진행하게 할 때 사용('break의 가벼운 버전')
• '?' 오른쪽에는 continue가 올 수 없음

// 예시1 : 0부터 10까지 홀수만 출력
for (let i = 0; i < 10; i++) {
  if (i % 2 == 0) continue; // i를 2로 나누었을 때, 값이 0이면 console.log(i) 생략하고 반복
  console.log(i); 
} // 1, 3, 5, 7, 9가 차례대로 출력
// 예시2 : 짝수만 출력
for (let i = 1; i < 10; i++) {
  if (i % 2 != 0) continue; // i를 2로 나누었을 때, 값이 0이 아니면 console.log(i) 생략하고 반복
  console.log(i); 
} // 2, 4, 6, 8가 차례대로 출력

3) break / continue와 레이블

• 중첩된 반복문을 한번에 빠져나와야하는 경우 레이블 사용

// 기본 형태
labelName: for (...) {
  ...
}
// 예시 : labelName -> outer
outer : for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, '');
	if (!input) break outer; // 아무것도 입력하지 않으면 두 반복문 모두를 한번에 빠져나감
    }
}
console.log('완료!');