Select 3 : forEach, for in 반복문

우선 이전에 만들었던 코드는 사이즈가 늘어나거나 변경되면 그때마다 태그를 추가해주어야한다. 

따라서 서버에서 데이터를 받았다고 가정하여 for 반복문을 통해서 줄여보자.

 

반복문 for으로 확장성 있는 코드 만들기

 

이전 코드

function changeSelect() {
    var selectedProduct = $('.form-select').eq(0).val();
    if (selectedProduct == '셔츠') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        $('.form-select').eq(1).append("<option>95</option>", "<option>100</option>", "<option>105</option>", "<option>110</option>")
    } else if (selectedProduct == '바지') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        $('.form-select').eq(1).append("<option>28</option>", "<option>30</option>", "<option>32</option>", "<option>34</option>")
    } else {
        $('.form-select').eq(1).addClass('form-hide');
    }
}

 

변경 코드

// 서버에서 받은 데이터라고 가정
var shirts = [95, 100, 105, 110];
var pants = [28, 30, 32];

function changeSelect() {
    var selectedProduct = $('.form-select').eq(0).val();
    if (selectedProduct == '셔츠') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        for (let i = 0; i < shirts.length; i++) {
            $('.form-select').eq(1).append('<option>'+shirts[i]+'</option>');
        }
    } else if (selectedProduct == '바지') {
        $('.form-select').eq(1).removeClass('form-hide');
        $('.form-select').eq(1).html('');
        for (let i = 0; i < pants.length; i++) {
            $('.form-select').eq(1).append('<option>'+pants[i]+'</option>');
        }

        
    } else {
        $('.form-select').eq(1).addClass('form-hide');
    }
}

for문을 이용해서 현재 받아온 데이터 수만큼 반복하여 배열에 있는 데이터를 옵션에 추가하였다.

 

---

forEach

: Array에만 붙일 수 있는 반복문이다. 

: 

 

사용법1

: Array의 요소의 수 만큼 반복한다.

var shirts = [95, 100, 105, 110];
shirts.forEach(function() {
	console.log(1)
}

// 결과 1 1 1 1

 

 

 

사용법2

: 콜백함수에 매개변수를 두고 해당 매개변수를 출력하면 요소를 순서대로 출력한다.

var shirts = [95, 100, 105, 110];
shirts.forEach(function(a) {
	console.log(a)
}

// 결과 95 100 105 110

var shirts = [95, 100, 105, 110];
shirts.forEach(function(a,i) {
	console.log(a,i)
}

// 결과 95,0 100,1 105,2 110,3

// a는 요소 데이터 i는 요소 인덱스

 

 

응용

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

 

---

for in

: object에 사용할 수 있는 반복문 

 

// 기본 형태
var obj = { name : 'kim', age : 20 }

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

// 출력: 안녕 안녕

// ------------------------------------

// 사용법 1

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

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

// 출력: name age

// ------------------------------------

// 사용법 2

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

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

// 출력: kim 20

 

 

반복문의 용도

1. 코드를 반복할 때
2. array, object 데이터를 전부 꺼낼때