반복문

1️⃣ for..of..

반복가능한 객체(array, map, set, string, typedarray, arguments 등)

✔️Symbol.iterator
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator

✔️심볼(symbol)
객체 고유 식별자를 만들 때 사용된다
변경이 불가능한 원시값이다
new연산자를 이용한 래퍼 객체 생성이 불가능하다

✔️new 연산자, 생성자 함수
객체 여러 개를 쉽게 만들 수 있다
1. 함수 이름 첫 글자는 대문자로 시작
2. 반드시 new 연산자 붙여 실행한다
❗️모든 함수는 생성자 함수가 될 수 있다
new 연산자를 붙이면 어떤 함수라도 알고리즘 실행 가능

✔️래퍼 객체
자바스크립트 내장 객체
원시 값을 감싸 객체처럼 메서드, 프로퍼티 사용할 수 있도록 해준다
끝나면, 임시 객체는 소멸하고 실제 원시 타입 값에는 영향 주지 않는다

✔️variable vs iterable
variable : 각 반복에 서로 다른 속성값
iterable : 반복되는 열거가능한 속성 객체
즉, 반복가능한 객체

1. Array에 대해 반복

let iterable = [10, 20, 30];
// const 사용도 가능
// (블록 내부 변수를 수정하지 않는 경우)

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

const arr = [1, 2, 3];

for (const num of arr) {
  console.log(num); // 1, 2, 3 출력됨
}

⭐️const를 사용할 수 있는 이유 : 반복마다 새로운 변수 할당
const가 재할당 금지이지만, 새로운 블록 스코프 변수가 생성되기에 문제 없다

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

for(const element of array1){
	element = "A";
} // 에러발생

element = array1 값을 변경할 수 없다
상수 변수에 할당할 수 없다는 오류가 발생한다

for..of에서 element 배열 값 자체를 복사한 변수일 뿐
원본 배열 요소에 직접 접근하는 것이 아니고
상수 변수 element 변경하려고 했기 때문에 오류발생

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

for(const element of array1){
	array1 = "A";
} // 에러발생

이것도 상수 변수 array1 변경하려고 했기 때문에 오류발생

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

for(const element of array1){
	array1[0] = "A";
} // array1 = ["A", "b", "c"];

array1[0] = "a"
element 변수는 사용되지 않고, 대신 array1[0] = "A" 실행

• array1[0] = "A"는 const array1로 선언된 배열이라도 배열 내부의 값은 변경 가능하기 때문에 문제없이 실행된다
• const는 변수 자체를 재할당할 수 없도록 막지만, 배열의 요소 변경은 허용된다
  배열 요소를 직접 수정하는 것은 허용된다

for (const num of [1, 2, 3]) {
  num = num + 1; // TypeError: Assignment to constant variable
}

num이 매 반복마다 새롭게 할당되지만, 재할당 자체가 금지되므로 에러가 발생한다.

2. String에 대해 반복

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

3. TypedArray에 대해 반복

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

✔️TypedArray
타입이 있는 배열(형식화된 배열)
원시 이진 데이터를 다루기 위해 제공되는 객체
→ 미디어 데이터 조작, 스트리밍 기능 구현
배열처럼 생겨서 array이름이 있지만, 실제 array타입은 아니다

기존 배열과의 차이
여전히 객체이다. 하지만 TypedArray 객체의 프로토타입은 Array가 아니다.
TypedArray에서는 일반 배열에서 사용할 수 있는 메서드들을 일부 지원하지만, push나 pop같은 메서드는 지원하지 않는다.
그리고 기존 배열은 길이가 유동적인데, typedarray는 유동적이지 않고 길이를 명시해서 고정시킨다

✔️이진 데이터
0, 1로만 이루어진 데이터

✔️list vs set vs map
자바스크립트에서 컬렉션 타입이다.
list : 배열(array)
set : 집합
map : 키값(key-value)

1) 배열(Array, 리스트)
배열은 가장 기본적인 리스트 형태의 자료구조로, 값들을 순서대로 저장하는 구조이다.

특징

• 중복 허용: 동일한 값을 여러 번 가질 수 있음
• 순서 유지: 삽입한 순서를 유지
• 인덱스 기반 접근: 숫자 인덱스를 사용하여 값에 접근 가능

let arr = [1, 2, 3, 3, 4];
console.log(arr[2]); // 3

2) 집합(Set)
Set은 유일한 값만 저장할 수 있는 자료구조입니다.

특징

• 중복 허용 안 함: 같은 값을 여러 번 추가할 수 없음
• 순서 유지 X: 특정한 순서를 따르지 않음
• 인덱스 없음: 배열처럼 특정 위치의 값을 가져올 수 없음

let mySet = new Set([1, 2, 3, 3, 4]);
console.log(mySet); // Set {1, 2, 3, 4}
console.log(mySet.has(2)); // true

3) 맵(Map)
Map은 키-값 쌍을 저장하는 자료구조입니다.

특징

• 키-값 형태: 각 값(value)에 대해 고유한 키(key)를 가짐
• 순서 유지: 삽입된 순서를 기억
• 모든 타입의 키 사용 가능: 객체, 숫자, 문자열 등 다양한 키 타입 허용

let myMap = new Map();
myMap.set("name", "Alice");
myMap.set("age", 25);
console.log(myMap.get("name")); // Alice

정리

특징	Array(배열)	Set(집합)	Map(맵)
중복 허용	가능	불가능	가능
순서 유지	유지	보장X	유지
키 사용	인덱스	없음	키-값
접근 방식	인덱스(arr[i])	set.has(value)	map.get(key)
주로 사용	리스트, 순서가 중요한 데이터	중복 제거, 빠른 검색	키-값 저장, 객체 대체

---

❗️언제 사용하면 좋을까?

• 배열(Array) → 리스트, 순서가 중요한 데이터
• 집합(Set) → 중복을 제거해야 할 경우
• 맵(Map) → 키-값 형태의 데이터를 저장할 때

4. Map에 대해 반복

let iterable = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

5. Set에 대해 반복

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

6. DOM컬렉션에 대해 반복

// 주의: 이는 NodeList.prototype[Symbol.iterator]가
// 구현된 플랫폼에서만 작동한다
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

7. 생성기에 대해 반복

function* fibonacci() {
  // 생성기 함수
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // 1000에서 수열을 자름
  if (n >= 1000) {
    break;
  }
}

2️⃣ for..of vs for..in 차이

for..of : 컬렉션 전용
for..in : 객체 모든 열거가능한 속성 반복

✔️속성
키와 값 쌍으로 연결하는 객체 구성원
임의의 자바스크립트 값이 될 수 있다

✔️객체
여러 개의 속성을 갖는 데이터 타입
속성 모음을 저장하는 데이터 구조(속성 컬렉션)
k:v
자바스크립트에서의 객체 : 유일한 변경 가능한 값

for ... of

const 오브의반복 = "forof";

for (let i of 오브의반복) {
  console.log(i);
}

// 결과

// "f"
// "o"
// "r"
// "o"
// "f"

for ... in :

key, value 받을 수 있어서 배열에 사용하는 것은 적절한 방법이 아니다.

const 인의반복 = "forin";

for (let i in 인의반복) {
  console.log(i);
}

// 결과

// "0"
// "1"
// "2"
// "3"
// "4"

3️⃣ while문

조건문이 참일 때 실행되는 반복문
조건은 문장 안이 실행되기 전에 참, 거짓을 판단한다

while문 vs for문

while문 : 정해지지 않은 반복(무한 루프, 특정 조건 만족할 때까지 반복)
for문 : 정해진 반복(배열과 함께 사용)

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}

조건 : 참, 거짓을 판단받게 된다
조건문이 참이라면, while문 안의 문장들이 실행된다.
거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  console.log( i );
  i++;
}

function testBreak(x) {
  let i = 0;
  
  while(i < 6) {
    if(i === 3) {
      break;
    }
    i += 1;
  }
  return i * x;
}

i++가 없으면 이론적으론 반복문이 영원히 반복된다

하지만 실질적으로 브라우저에서 멈춰주는 도구가 있다.

본문이 한 줄이면 중괄호를 쓰지 않아도 된다

let i = 3;
while (i) console.log(i--);
// 3,2,1

4️⃣ do~while 반복문

본문을 최소 한 번이라도 실행하고 i변수가 5보다 작을 때까지 실행한다.

do {
  // 반복문 본문
} while (condition);

let i = 0;
do {
  console.log( i );
  i++;
} while (i < 3);

// 0, 1, 2