[JS] forEach, for in 반복문

  var pants = [28, 30, 32];
  $('.form-select').eq(0).on('input', function(){

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }
    else if (value == '바지'){
      $('.form-select').eq(1).removeClass('form-hide');
      $('.form-select').eq(1).html('');
      for (let i = 0; i < pants.length; i++){
        <option>생성해주세요~
      }
    }

팬츠의 개수만큼 반복

 

다음과 같은 for문 코드 사용하지 않고

반복하는 방법

---

forEach 반복문 
 - array 자료에만 붙일 수 있는 반복문
array 자료 안에 있는 데이터 수 만큼 반복
- 콜백함수를 꼭 쓰기

var pants = [28, 30, 32];
pants.forEach(function(){
  console.log('안녕')
});

이렇게 쓰면 pants 안의 데이터 개수만큼

forEach 콜백함수 안에 있는 코드 실행.

 

안녕이 3번 반복돼서 출력되는 거 확인 가능

( 28, 30, 32 이렇게 데이터가 3개 들어가 있으므로 )

---

옵션태그 생성하기

pants 의 데이터 개수만큼 <option> 생성

var pants = [28, 30, 32];

 pants.forEach(function () {
        $(".form-select").eq(1).append("<option>28</option>");
      });

이렇게 써주면 pants변수의 데이터가 3개 있었으니

옵션 28이 3번 반복돼서 나온다.

- 근데 하드코딩하면 X

forEach 콜백함수에 파라미터(a) 적은 경우

var pants = [28, 30, 32];

pants.forEach(function (a) {
        $(".form-select").eq(1).append("<option>28</option>");
      });

임의의 파라미터 a 적으면

a 데이터는 3번 반복해서 돌면서 pants 데이터의 하나하나가 됨

( 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터 )

28 / 30 / 32

 

= a 변수

      $(".form-select")
          .eq(1)
          .append("<option>" + a + "</option>");
      });

 $('.form-select').eq(1).append(`<option>${a}</option>`)

다음과 같이 28 적는게 아니라

a 변수를 넣어주면 됨.

a 하고 i 를 쓴 경우 

var pants = [28, 30, 32];
pants.forEach(function(a, i){
  console.log(a)
});

여기서 a는 배열 pants의 각 요소를 나타내고, i는 그 요소의 인덱스를 나타낸다

따라서 console.log(a)는 배열 pants의 각 요소를 출력하는 것이고, i를 사용하면 해당 요소의 위치를 알 수 있다

간단히 말해, i는 배열에서 현재 요소의 위치를 가리키는 것

 

첫 파라미터(a) 는 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터가 되고

둘 째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 된다.

---

for in 반복문 
 - object 자료에 붙일 수 있는 반복문

var obj = { name : 'kim', age : 20 }

for (var key in obj){
  console.log('안녕')
}

obj 안의 데이터 개수만큼

for in 콜백함수 안에 있는 코드 실행.

 

데이터가 2개 들어가있으므로, 안녕이 2번 출력됨.

key 추출

key = 반복문이 돌 때 마다 object자료 안에 있던 key값

var obj = { name : 'kim', age : 20 }

for (var key in obj){
  console.log(key)
}

console.log(key) 를 하면

키 인, name 과 age 가 출력됨.

value 인 "kim", 20 을 추출하기

var obj = { name : 'kim', age : 20 }

for (var key in obj){
 console.log(obj[key])
}