JS - Select3 : forEach, for in 반복문

서버에서 바지 사이즈 데이터를 가져와 그 갯수만큼 <option>생성배보기

<script>
  let pants = [24, 26, 28];
  $('.form-select').eq(0).on('input', function(){

    let 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('');
      반복문 사용하기
    }

  });
</script>

맨 위에 pants 라는 변수를 만들고 서버에서 보낸 데이터라고 가정하기

pants 데이터 갯수만큼 <option>을 생성하고 싶을 땐?
반복문 사용하기!

<script>
  let pants = [24, 26, 28];
  $('.form-select').eq(0).on('input', function(){

    let 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>생성해주세요~
      }
    }

  });
</script>

-> pants.length만큼 반복해달라고 하면 되지만 더 쉬운 반복문이 있다

forEach 반복문

array 자료 뒤에 붙일 수 있는 forEach() 기본함수

let pants = [24, 26, 28];
pants.forEach(function(){
  console.log('안녕')
});

-> '안녕' 3번 출력
이렇게 쓰면 pants 안의 데이터 갯수만큼 forEach콜백함수 안에 있는 코드가 실행된다

forEach 반복문 콜백함수

let pants = [24, 26, 28];
pants.forEach(function(a, i){
  console.log(a)
});

a : 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터
i : 반복문 돌 때 마다 0부터 1씩 증가하는 정수

Q. 콜백함수 넣는 이유?
A. JS forEach 만든 사람이 쓰라고 합니다

<script>
  var pants = [24, 26, 28];
  $('.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('');
      pants.forEach(function(a){
        $('.form-select').eq(1).append(`<option>${a}</option>`)
      })
    }

  });
</script>

-> pants라는 서버에서 보낸 데이터가 바뀔때마다 거기에 맞게 <option> 이 생성된다

object 자료 다룰 때 for in 반복문 기능

object 자료 갯수만큼 반복문을 돌리고 싶으면

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

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

-> '안녕' 2회 출력

for in 반복문으로 object 자료 안에있는 key와 value를 다 출력할 수 있다

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

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

-> name, age 출력

key 말고 실제자료인 value를 출력하고 싶을 땐 console.log(obj[key]) ;

반복문의 용도 2가지

1. 코드를 복붙하고싶을 때
2. array object 자료를 다 꺼내고 싶을 때

arrow function 문법

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

pants.forEach((a) => {
  console.log(a)
});

function 키워드 대신 => 화살표를 () 우측에 부착해도 똑같이 함수를 만들 수 있다

그냥 함수와 arrow function의 기능 차이 하나
함수 안에서 this를 써야할 경우
-일반 함수는 함수 안에서 this를 알맞게 재정의 해준다
-arrow function은 함수 안에서 this를 재정의 하지 않고 바깥에 있떤 this를 그대로 쓴다
따라서 이벤트리스너 콜백함수 안에서 this를 써야한다면 의도와 다르게 동작될 수 있으니 주의하기