[JavaScript] 반복문 총정리(for in/for of/forEach 등)

홍싸리·2023년 6월 9일
0

javascript

목록 보기
6/18

자바스크립트 반복문의 종류

  1. for: 고전적 for문
  2. for in: 객체의 프로퍼티 키 열거 전용
  3. for of: 이터러블 순회 전용
  4. forEach(): 배열 순회 전용 메서드
  5. while: 고전적 while문
  6. do while: 고전적 do...while문
  7. Object 객체 메서드: 객체 순회 전용
  8. Array.prototype 메서드: 배열 전용


1. for문

for문while문과는 다르게 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문
따라서 while문보다 더 간결하게 반복문 표현이 가능하다

for(let i=0; i<10; i++){ ... 반복 수행 코드 ... }
for (let i=0; i<10; i++){
  console.log(i);
}
/* 주의: 변수 선언 시, const를 사용하면 값 변경이 불가능하여 에러가 발생함 */

2. for in문

해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해줌

  • ※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미함

이러한 프로퍼티들은 for in문으로 접근할 수 있음

for(const key in 객체){ ... 반복 수행 코드 ... }
const obj = {
  name: 'ssari',
  job: 'publisher',
}

for (const key in obj){
	console.log(`${key} : ${obj[key]}`);
}
//name: ssari
//job: publisher

var obj = {
    name : "이순신",
    age : 20
};

for (var i in obj) {
    document.write(i + "<br>");
}
//name
//age

3. for of문

반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문
자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments, String, DOM컬렉션(HTMLCollection, NodeList) 등이 있음
해당 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티 값을 지정된 변수에 대입함
for of문은 익스플로러에서 지원하지 않음

const arr = [11, 22, 33];

for(const item of arr){
	console.log(item);
  //11, 22, 33 출력
}

/* 아래와 같이 for of문을 한 줄로 사용할 수도 있다 */
for(const item of arr) console.log(item);

4. forEach()

배열.forEach( function(value, index, array){ ... 반복 수행 코드 ... })
  • 콜백함수매개변수로 value에 요소값, index에 인덱스, array에 원본 배열이 들어온다
[10, 20, 30].forEach((value, index, array) => {
	console.log(`${index} : ${value}`);
});
//0:10, 1:20, 2:30 출력

5. while문

잘 사용하지 않는다

let num = 0;
while(num < 3){
	console.log(num);
	num++;
}
//0~2까지 출력

6. do while문

do{
	console.log('일단 한 번은 실행된다); //해당 코드 한 번 실행한 수 
}while 

참고: https://curryyou.tistory.com/202

profile
그럴싸한건 다 따라해보는 프론트엔드 개발자 준비중인 6년차 퍼블리셔

0개의 댓글