[코딩애플;JS]forEach, for in,Arrow function

1️⃣Array를 다룰 때 편한 for each.

 

배열이름.forEach(function(a,i){

코드 내용

}

콜백함수 안에 파라미터는 3개까지 작명 가능하지만 2개정도만 주로 사용함.

첫 번째 파라미터는 반복문이 돌 때 마다 array안에 있던 각각의 데이터.

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

 

그래서 이전 예제에서 for문으로 돌렸던 것을 forEach로 더 간단하게 할 수있다.

size도 배열이었으므로!

size.forEach(function(a,index){

  selectBox.insertAdjacentHTML('beforeend','<option></option>');

  var options = document.querySelectorAll('.mt-5 option');

  options[index].innerHTML = size[index];  //옵션에 사이즈 값 추가.  

 

})

 

이렇게 배열 안에 데이터 갯수만큼 option태그 생성, 차례대로 데이터 넣기 까지 가능!

 

2️⃣Object를 다룰 때 편한 for in.

Object 자료 갯수만큼 돌리고 싶을 때 사용하는 반복문

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

for (var key in obj){

console.log('안녕')

}

 

obj안에 있는 자료의 갯수가 2개이므로, 안녕이라는 문자는 두 번 출력된다.

각각의 key와 value도 출력 가능함!

 

⭐Arrow function

함수 대신에 => 를 사용하기 때문에 화살표함수, Arrow function이라고 함.

콜백함수를 사용할 때 특히 자주 쓰는 방법.

위의 썼던 코드를 아래처럼 변경 가능!

size.forEach((a,index)=>{

  selectBox.insertAdjacentHTML('beforeend','<option></option>');

  var options = document.querySelectorAll('.mt-5 option');

  options[index].innerHTML = size[index];  //옵션에 사이즈 값 추가.  

 

})

 

파라미터가 하나라면 괄호 안에 파라미터가 들어가지 않아도 괜찮다.

그리고 함수 중괄호 안에 return한 줄 뿐이라면 return과 중괄호도 생략이 가능하다.

 

 

⚠️그런데 기존 함수와 화살표 함수의 차이점은

기본함수는 함수안에 재정의 된 this값을 사용하지만 화살표 함수는 함수 밖의 this를 가져오기 때문에

의도와 다르게 작동할 수 있으니 이럴 때는 기존 함수 사용이 낫다.

 

📒출석부 체크하기

  var 출석부 = ['흥민','영희','철수','재석','철수'];

       

        function 이름찾기(이름){

            for(var i =0; i < 출석부.length; i++){

                if(이름 == 출석부[i]){

                    return console.log('있어요');

                };

            };

        };

       

        이름찾기('철수');

 

📒구구단 출력하기

        for(var i = 2; i < 10; i++){

            for(var j = 1; j < 10; j++){

                console.log(i*j);

            };

        };

 

📒평균계산기 만들고 점수 체크하기.

     var total=0;

        var avg = 0;

 

     

        function check(score, my_score){      

            score.forEach((a,i) => {

                total += a;

                if(i = score.length){

                    avg = total/ i

                    return avg;

                }

            });

            if(avg < my_score){

                console.log('평균보다'+ (my_score - avg) +'점이 올랐네요')

            }else if(avg > my_score){

                console.log('평균보다'+ (avg - my_score) +'점이 떨어졌네요. 재수추천')

            }else if(avg = my_score){

                console.log('평균입니다')

            }

        }