JS - loop

📌반복문이란?

동일한 코드를 여러 번 반복할 수 있습니다.

🔎 while문
🔎 do ~ while문
🔎 for문
🔎 for ~ in문
🔎 for ~ of문

반복문을 시작하기전 알아야할 중요 영단어

enumerable : 열거 가능한
immutable : 변하지 않는
iterabla : 빈복 가능한

---

📝while문

while 문은 조건이 true인 동안 반복하여 코드 블록을 실행

사용예시

while (조건) {
  // 조건이 true인 동안 반복 실행될 코드 블록
}

만약 아래와 같은 배열이 주어졌을경우 순방향과 역방향에 성능 체크

const frontEndDev = [
  'HTML',
  'CSS',
  'SVG',
  'JavaScript',
  'jQuery',
  'React',
  'Redux',
];

순방향

let n = 0;
while (n < frontEndDev.length) {
   const value = frontEndDev[n];
      console.log(value);
   n++;
 }

역방향

let a = frontEndDev.length - 1;

while (a >= 0) {
  const value2 = frontEndDev[a];
  console.log(value2);
  a--;
}

크게 차이는 없지만 순방향이 살짝 빠르다고 알고있음.

---

📝do ~ while문

do-while 문은 while 문과 유사하지만, 코드 블록이 최소한 한 번은 실행되도록 보장하는 반복 구조입니다.

사용예시

do {
  // 최소한 한 번은 실행될 코드 블록
} while (조건);

do ~ while문의 while과 다른 특징

• 먼저 코드 블록을 실행하고 나서 조건을 평가
• 조건이 true인 경우 코드 블록은 계속 반복 실행되며, 조건이 false가 될 때까지 반복

❗❗ do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용해야 합니다.

---

📝for문

for 문은 특정 조건이 true인 동안 코드 블록을 반복 실행하는 반복문입니다.

사용예시

for (begin; condition; step) {
  // ... 반복문 본문 ...(boddy)
}

• begin : 반복문이 진입할 때 단 한번 실행
• condition : 반복마다 해당 조건 확인 후 false면 반복문 중단
• body : condition이 truthy일 동안 계속해서 실행
• step : 각 반복의 body가 실행된 이후에 실행

❗❗ for문에 구성요소를 생략할수있지만 ' ; (세미콜론) '을 꼭 넣어줘야 에러가 발생하지않음.

---

📝for ~ in문

객체의 속성(property) 포함 여부 확인하기 위한 방법입니다.

사용예시

for (변수 in 객체) {
  // 객체의 각 속성에 대해 실행될 코드
}

❗❗ 부모인 value까지 있다고 판단하는게 for in문에 단점
❗❗ 배열은 순서 보장이 안됨, 성능x => for..in은 객체에 양보하세요..

---

📝for ~ of문

반복 가능한 요소들에게만 사용할 수 있다.

사용예시

for (변수 of 반복 가능한 객체) {
  // iterable의 각 요소에 대해 실행될 코드
}

for ~ of 특징

• 객체는 for..of를 사용할수없다. 하지만 객체도 for..of로 순환합니다. 객체를 배열로 만들어버림.

---

👩‍🏫 특정 조건에서 중단하기 (break)

예제

for (let i = 1; i <= 5; i++) {
 console.log(i);

 if (i === 3) {
   console.log("특정 조건에서 중단!");
   break;
 }
} // 1,2,3

👩‍🏫 특정 조건에서 건너띄기 (continue)

예제

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    console.log("특정 조건에서 건너뛰기!");
    continue;
  }

  console.log(i);
}// 1,2,4,5

---

🤓수업 메모장

• hasOwnProperty : 객체 자신의 속성인지 확인하는 방법
  🙅자바스크립트는 hasOwnProperty를 보호해주지 않습니다.

• call : 메서드 빌려쓰기
  👉 생성된 객체의 method는 불안함, => 진짜 객체의 능력을 빌려씀

• 생성된 객체의 method는 불안함, => 진짜 객체의 능력을 빌려씀 아래 예시.

console.log(Object.prototype.hasOwnProperty.call(js, key));

👉 Object.prototype =({})쓰기 가능, ❗❗ 물론 조상은 아님 ❗❗

👉(빌려쓰는 주체, 야규먼트)

• 유사배열 => 배열처럼 생겼지만 실제 배열이 아닌 것
  👉 console에 해당 객체에 타입에 Array가 적혀있지않으면 유사배열

• 배열 반환하는 방법

//객체의 key를 배열로 반환
Object.keys()
//객체의 value를 배열로 반환
Object.values()
//key,value를 가진 하나의 쌍 배열을 반환
console.log(Object.entries(randomUser));

---

🔗참고 사이트
📍chatGPT
📍Javascript info
📍멋사 수업 내용...