📌 javascript 개념 #6 반복문

반복문

반복문은 똑같은 명령을 일정 횟수 만큼 반복하여 수행하도록 제어하는 명령문이며,
for문, while문이 있으며 for문에는 for ... in문 for ... of문이 있다.

---

for문

for문은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과 반복을 수행할 블럭문으로 이루어져 있다.

---

1) 일반적인 형식

for ([initialization]; [condition]; [final - expression])
	statement

MDN문서를 참고해 적었다.

2) 구성요소

구성요소	예	설명
initialization (선언문)	let i = 0;	식 또는 변수 선언, var또는 let 키워드를 사용
condition (조건문)	i < a.length;	반복할 때마다 평가할 식이며, 평과 결과가 참이라면 statement를 실행한다.
final - expression (증감문)	i++	다음번 condition 평가 이전에 발생한다. 변수를 증감하거나 바꿀때 쓴다.
statement (문)	result(i)	조건의 평가 결과가 참일때 실행.

---

for ... in

for ... in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복

1) 일반적인 형식

for (variable in object) { ... }

/*-------------------------*/
const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

2) 구성요소

구성요소	설명
variable (변수)	매번 반복 시, 다른 속성이름이 변수로 지정된다.
object	반복 작업을 수행할 객체로 열거형 속성을 가지고 있는 객체

=> 객체의 반복을 위해 만들어 졌지만, 배열의 반복을 위해서는 이미 Array.prototype.forEach() 나, for ... of 가 있기 때문에 잘 쓰이지 않는다.

=> for ... in은 객체의 속성을 확인하는 용도, 즉 key - value의 쌍이 선호되는 데이터의 경우 특정 값을 가진 키가 있는지 확인하는 용도로 쓸 수 있음.

---

for ... of

for ... of문은 반복가능한 객체에 대해 반복하고 각 개별 속성값에 대해 실행되는 문이며,

1) 일반적인 형식

for (variable of iterable) {
  statement
}

/*-------------------------*/

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

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

2) 구성요소

구성요소	설명
variable (변수)	각 반복에 서로 속성값이 variable에 할당된다.
iterable	반복되는 열거가능한 속성이 있는 객체 (Array, String, Map, Set, Dom 전부 사용 가능)

---

While문

조건문이 참일 때 코드 블록을 계속해서 반복 수행하는 반복문
-> for문에 비해 선언문과 증감문 없이 loop를 수행하며, 무한 loop등 수행시 많이 사용
-> 조건문을 코드 블록보다 아래로 옮긴 do ~ while 반복문도 존재
(최소 한번 수행이 필요할 때 많이 사용)

1) 일반적인 형식

while (condition) {
  statement
}

/*-------------------------*/

var n = 0;
var x = 0;

while (n < 3) {
  n++;
  x += n;
}
// n이 3보다 작을 때 까지 반복한다.

예제 설명
: n을 x에 계속 더하는 것
n++; : n이하나씩 늘어나며 반복된다.
=> 따라서
첫번째 반복에서는 n = 1, x = 1 이고,
두번째 반복에서는 n = 2, x = 3 (두번째 반복 n + 첫번째 반복 x),
세번째 반복에서는 n = 3, x = 6 (세번째 반복 n + 두번쨰 반복 x) 이다.

2) 구성요소

구성요소	설명
condition (조건문)	조건문이 들어가는 자리이며 참이면 while안의 문장들이 실행, 거짓이면 while 후로 넘어간다.
statement (문)	조건문이 참이면 실행되며, 반복문 속에 여러개의 문장을 사용하려면 중괄호를 사용

---

do ... while

do ... while문은 테스트 조건이 거짓으로 평가될때까지 지정된 구문을 실행하는 루프를 만든다. 단, 구문이 실행된 뒤 테스트 조건이 평가되므로 구문이 true인지 false인지에 상관없이 구문을 무조건 한번이라도 실행해야 할때 사용된다.
-> 대부분의 case에서 while을 사용함.

1) 일반적인 형식

do {
	statement
}
while (condition);

/*-------------------------*/

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// expected result: "12345"

2) 구성요소

구성요소	설명
statement (문)	테스트 조건이 참일때 한번 이상 실행되는 구문
condition (조건문)	루프가 실행될 때마다 평가되는 식