JS (자바스크립트) for 반복문

반복문의 종류

1. for : 기본적인 for문

2. for in : 객체의 프로퍼티 키 열거 전용

3. for of : 이터러블 순회 전용

4. forEach() : 배열 순회 전용 메서드

 

1. 기본적인 for 문

for (let i = 0 ; , i < 10 ; , i++) {반복 수행 코드}

 

ex) for (let i = 0 ; , i < 10 ; , i++) {

            console.log (i)

}

여기서

i = 0; 은 초기값 설정

i  < 10; 은 조건식을 설정

i++ 은 조건을 설정

 

※ 변수 선언 시, const 사용 불가

2. for in

객체(object) 에서 사용할 수 있는 반복문이다.

배열에서도 사용은 가능하나 추천되지않는다.

 

const obj = {
  name : '이름',
  age : '나이'
}

for(const key in obj){
  console.log(key); // key값 출력
  console.log(obj.name, obj.age); // value 값 출력

  console.log(`key 값 : ${key}`); // 1. key값 : 이름 // 2. key값 :age
  console.log(`value 값 : ${obj[key]}`); // 1. value 값 : 이름 // 2. value값 : 나이

obj.name과 같이 사용하려면 object내에 name이라는 key값을 가진 value가 존재해야한다.
없는 key값을 사용하게 되면 undefined가 출력된다.
객체의 모든 value값을 얻으려면 obj[key]로 객체를 순회하여 얻을 수 있다

 

3. for of

반복 가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등 포함)에 사용할 수 있다.

Array(배열)에 자주 사용 한다.

const array = ['1번', '2번', '3번'];

for(const element of array) {
  console.log(element); // 배열[0] ~ 끝까지 순차적 출력
  console.log(array); // 배열 전체 출력
}

배열에 들어있는 0번째~마지막 번째 요소까지 순차적으로 출력된다.
배열안에 있는 요소를 꺼내쓸 때 사용하면 좋다.

 

4. forEach()

배열.forEach( function(value, index, array){...반복 수행 코드...} )

※ 콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본 배열이 들어온다.

별도의 return 이 없고 안에 내용이 실행되게 한다.

 

[10, 20, 30].forEach((value, index, array)=>{ console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력 })

 

 

참고 ㅡ https://curryyou.tistory.com/202 ,https://velog.io/@reasonz/2022.04.10-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%98%EB%B3%B5%EB%AC%B8-for-for-in-for-of-forEach-while%EB%AC%B8