JS/Javascript

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

ui-o 2023. 1. 7. 16:12
반응형

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 

  • 객체(Object)의 키(key) 또는 배열(Array)의 인덱스(index)를 순회할 때 사용
  • 반환값 : 객체의 속성 이름(key), 배열의 인덱스 
  • for of 나 for문을 대신 사용하기를 권장

✓ 배열이나 객체안에(in) 키들을 하나씩 꺼내서 뭔지 확인하는 것

배열에 대한 반복

  • 배열의 인덱스를 순회활 때 사용
  • 변수명에는 각 속성의 인덱스가 됨
// [문법]
for (변수명 in 객체) {
  
}
const todos = ['a', 'b', 'c'];
for (const i in todos) {
  console.log(`${i}, ${todos[i]}`);
  //0, a
  // 1, b
  // 2, c
}

객체에 대한 반복

  • 객체의 키를 순회할 때 사용
  • 객체이 이름(key를 열거할 때 사용
// [문법]
for (key in 객체) {
  // 객체의 키(key)를 순회하며 실행할 코드
  
}
const webs = {
  name: 'google',
  color: 'white',
};
for (const prop in webs) {
  console.log(prop, webs[prop]); // ⇒ ame google	color white
}

for of  

  • Iterable  ; 배열, 문자열, Set, Map, arguments 9함수의 유사 배열), DOM 컬렉션, 이터러블에 객체는 포함되지 않음
  • 배열, 문자열, Map, Set 등 이터러블(Iterable)객체의 값(value)을 순회할 때 사용
  • 반환값 : 실제 값(Value)
  • 순서대로 값을 하나씩 꺼내어 사용
  • 이터러블 객체가 아닐 시 오류 발생

✓ 배열이나 문자열 등 여러 값(value) 중에서 꺼내는 반복문

배열에 대한 반복

// [문법]
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)) {
// Object.keys[webs] = ['name', 'color'] 객체의 키 값을 반환
  const value = webs[prop];
  console.log(prop, value); // ⇒ name gogle	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문 밖에서 지정해야 함
  • for문 보다 좀 더 단순화된 반복문
// [문법]
while (조건문) {
조건이 참인동안 실행
}

source

let num=0
while(num <5) {
	console.log(num);
	num++
}
let x = 0;
while (x< 100) {
	const toprint  = x++;
	if(toprint % 3 === 0) continue; //
	if(toprint > 10) break;
	console.log(toprint); // ⇒ 1, 2, 4, 5, 7, 8, 10

}

do...while

  • 일단 싱행부터 먼저 한 뒤 조건을 확인
// [문법]
do {
조건이 참인 동안 실행
} while(조건문)
// 조건을 비교하기 전에 우선 한 번은 먼저 실행되므로 5가 출력됨
let x = 5;
do {
  console.log(x); // ⇒ 5
} while (x < 5);

반복문 제어문

  • 반복문 안에 흐름을 제어할 때 사용

continue

  • 해당 반복문만 건너뛰고, 다음 반복작업을 실행
  • continue 이후 코드를 실행하지 않음
  • 반복문 안에서만 작동

source

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

break

  • 특정 조건을 충족할 때 해당 반복문 자체를 종료하는데 사용
  • break를 만나면 해당 루프를 빠져나가 그 다음 코드로 이동
  • switch 조건문에서도 자주 사용
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // ⇒ 0 1 2 3 4
}
반응형