forEach

출력이번엔 forEach문을 배우고 어제 만든 반복문을 수정해보자.

var pantsSize = [26,28,30,32,34];

pantsSize.forEach(function(){
    console.log("1");   //1이 다섯번 출력됨
})

 pantsSize.forEach(function (size, index){
      console.log(size, index);   
 })

이렇게 하면 반복문 돌때마다 size 는pantsSize 안의 데이터가 되고

index는 0부터 1씩 증가하는 정수가 된다.

지난시간에 만들었던 반복문을 이렇게 바꿀 수 있다.

//for문
for(let i=0; i<pantsSize.length; i++){
    $('.form-select').eq(1).append("<option>"+pantsSize[i] +"</option>")
}

//forEach문 
pantsSize.forEach(function (size){
    $('.form-select').eq(1).append(`<option> ${size}</option>`);
});

✨ 과제. var shirthSize = [95,100,105,110] 을 생성하고 forEach문을 사용해 셔츠 클릭 시 나타나게 해보자.

for in

Object 자료는 for in 반복문을 쓴다.

var obj = {name : "페라리", price: 15000};
for(var key in obj){
  console.log("1"); // 1이 2번 출력됨
  console.log(key);     // key name, pirce 가 출력됨  
  console.log(obj[key]);   //해당 key의 value가 출력됨
}

🚀심화 arrow function

함수를 만드는 다른 문법

콜백함수를 만들 때 자주쓴다.

 pantsSize.forEach((size) => {
    console.log("arrow funtion", size);
 })

출력 결과

일반 함수와 arrow function의 차이점

함수 안에서 this를 사용할 경우

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

arrow function은 재정의 해주지않고 바깥에 있던 this를 그대로 쓴다.

이벤트 리스너 콜백함수 안에서 this를 써야하는 경우에는 arrow function 말고 일반 함수를 쓰자.