[Javascript] 반복문 (for, forEach, for...of, for...in ..)

for 문

기본 문법

for (초기화; 반복문 조건; 반복 처리구문) {
	반복처리 내용
}

---

forEach

• for, for..of와 달리 map(), filter() 등의 반환값을 그대로 루프처리 할 수 있음

메서드	설명
배열.forEach()	주어진 콜백함수를 활용하여 배열의 요소를 순서대로 처리
([요소], [인덱스],[기존배열])=> {}	요소, 인덱스, 기존 배열을 활용하여 처리 - 콜백함수에서 인덱스와 기존배열 생략 가능

const arr = ['a','b','c']
arr.forEach((value, idx)=>{
	console.log(value, idx);

})

sources

// [ 짝수 출력]
const arr = [1,2,3,4,5]
arr.filter((value)=> value %2 ===0)
.forEach((value)=>{
	console.log(value);
})

// [API 등을 통해 가져온 객체 형태 배열 요소 출력]
const arr = [
{name: 'a', num:1},
{name: 'b', num:2}
]

arr.forEach((list)=>{
	console.log(list.name, list.num);

})

---

for in 

• 순서 없이 객체의 모든 열기 가능한 속성을 반복하여 for of와 약간의 차이가 있음
• 배열 요소를 하나하나 꺼내어 특정 문장 실행 시 사용
• 반복 변수에 인덱스가 들어감
• for of 나 for문을 대신 사용하기를 권장

배열에 대한 반복

for(const 반복변수 in 배열){
	console.log(반복변수, 배열[반복변수]); // 인덱스와 값을 반환
}

const todos = ['a', 'b', 'c'];
for (const i in todos) {
  console.log(`${i}, ${todos[i]}`);
  //0, a
  // 1, b
  // 2, c
}

객체에 대한 반복

/* [구문] */
for(const 반복변수 in 객체) {
	console.log(반복변수, 객체[반복변수])
}

const webs = {
  name: 'google',
  color: 'white',
};
for (const prop in webs) {
  console.log(prop, webs[prop]); // ⇒ ame google	color white
}

---

for of  

• 반복변수에 요소의 값이 들어감

배열에 대한 반복

/* [구문] */
for(const 반복변수  of 배열){
    문장
}

const todos = ['a', 'b', 'c'];
for (const todo of todos) {
  console.log(`${todo}`); // a, b, c
}

객체에 대한 반복

• 객체는 이터러블(반복가능한 객체)이 아니므로, Object.keys()를 사용하여 객체의 모든 키를 가져온 뒤, 키에 대한 반복을 사용하여 값에 접근

/* 구문 */
for(const 선언 변수 of Object.keys(객체명)){
	const value = 객체명[선언 변수]
	// 선언 변수에 key가 저장되고, value에 값을 저장
}

const webs = {
  name: 'google',
  color: 'white',
};

for (const prop of Object.keys(webs)) {
  const value = webs[prop];
  console.log(prop, value); // ⇒ name google	color white
}

// * Object.entries 사용 시 키/값 쌍을 배열 형태로 반환
for (const prop of Object.entries(webs)) {
  console.log(prop); // ⇒ [ 'name', 'google' ]	[ 'color', 'white' ]
}

---

for of 와 for in 차이

• for of는 값을 for in은 키의 목록을 반환

const webs = ['google', 'daum'];

for (const i of webs) {
  console.log(i); // ⇒ google 	daum
}

for (const i in webs) {
  console.log(i); // ⇒ 0 1
}

---

while

• 조건이 참일 동안 함수를 반복하여 실행

기본 문법

while (반복조건) {반복 처리 내용}

source

let num=0
while(num <5) {
	console.log(num);
	num++
}

---

continue

• 반복문 안의 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복작업을 실행

source

for (let i=0; i<5; i++){
	continue; 
	console.log(i); // 실행되지 않음
	
}