27. select (2)

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('');
  }
});

pants 라는 변수를 만들고 서버에서 보낸 데이터라고 가정해 보자.

pants 데이터 갯수만큼 을 생성하고 싶으면 반복문을 사용하면 된다.

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

});

pants.length 만큼 반복하면 pants의 데이터만큼 반복이 된다.

하지만 forEach 반복문을 사용하면 더 쉽게 생성이 가능하다.

forEach

---

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

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

pants 안의 데이터 갯수만큼 forEach 콜백함수 안의 코드가 실행이 된다.

콜백함수의 파라미터

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

첫 번째 파라미터는 반복문을 돌 때 마다 배열 안에 있는 하나하나의 데이터.

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

for in

---

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

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

object 자료 갯수만큼 반복문을 돌릴 때 for in 반복문을 사용할 수 있다.

그리고 object 자료 안에 있는 key 와 value를 다 출력할 수도 있다.

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

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

실제 자료인 value를 출력하고 싶으면,

obj[key] 를 사용하면 된다.

arrow function

---

함수를 만드는 또 다른 문법이 있다.

콜백 함수를 만들 때 자주 쓰이는 방법으로

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

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

fucntion 키워드 대신 ⇒ 화살표를 () 우측에 부착하면 함수가 만들어지는데

이걸 ‘화살표함수’라고 한다.

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

화살표함수는 파라미터가 한 개면 소괄호를 생략해도 된다.

함수 중괄호 안에 return 한 줄만 있다면 중괄호와 return 키워드를 생략해도 된다.

let 함수 = function(){ console.log('안녕') }
let 함수 = () => { console.log('안녕') }

위와 같이 변수에 할당해서 사용할 수도 있다.

차이점

---

함수 안에서 this를 사용할 경우 차이가 있는데,

일반 함수는 함수 안에서 this를 알맞게 재정의 해준다.

화살표 함수는 함수화살표 안에서 this를 재정의 해주지 않고 바깥에 있는 this를 사용한다.

이벤트리스터 콜백함수로 화살표함수를 쓸 경우 this가 의도와 다르게 동작할 수 있다.