👁‍🗨javascript(for반복문, forEach반복문, for in반복문,arrow function, array 함수들)

반복문의 용도

• 1. 코드반복

• 2. array나 object에서 데이터를 전부 꺼낼 때

---

for 반복문!

• 같은 코드가 계속 반복이 되면 for반복문을 써서 대신 복붙하면 됨.

  • for(반복할 횟수){
    반복할 코드};
    와 같은 식으로 쓰면됨.

• 그런데 반복할 횟수에는 숫자를 적는게 아니라

  • (let i=0; i<3; i++) 와 같이 적는 것으로 정해져 있음.
    • i가 0부터 시작해서 반복할 때마다 1씩 더하고 i가 3이 되기 전까지 반복해달라는 의미
    • (i=0), (i=1), (i=2) → 반복
    • (i=3) → 반복 x

• 예시)

  for(let i=0; i<3; i++){
  
     $('.tab-button').eq(i).on('click', function(){
     $('.tab-button').removeClass('orange');
     $('.tab-button').eq(i).addClass('orange');
   });
  }

  • tab-content라는 클래스 명을 가진 태그 중 i번째에 클릭이벤트가 발생하면 모든 tab-content클래스명을 가진 태그에 orange라는 클래스를 제거.
  • tab-content이라는 클래스를 가진 태그 중 i번째에만 orange라는 클래스를 추가.

---

forEach 반복문!

• forEach 반복문을 쓰려면 ()안에 항상 콜백함수를 쓰도록 정해져 있음.

  pants.forEach(function(){
  	console.log(123)
  })

  • 콘솔 창에서 확인해보면 pants라고 하는 array안에 있는 데이터 값의 수만큼 123을 반환.

• forEach 안에 파라미터 2개 생성 가능.

  1. array 안의 데이터
  2. 0부터 1씩 증가하는 정수

  var pants = [28, 30, 32]  // 서버에서 보낸 데이터라고 가정.
  pants.forEach(function(a, i){
  document.querySelector('.size').innerHTML = `<option>${a}</option>`
  })

  • <option>${a}</option> 여기에 28, 30, 32가 한번씩 찍히게 됨.
  • 만약 i를 넣으면 0, 1, 2 가 옵션태그 안에 텍스트로 들어감.

  ---

for in 반복문

• object 자료 갯수만큼 반복문을 돌리고 싶을 때 사용

  • 예를 들어 var obj = { name : 'kim', age : 20 }와 같은 object가 있을 때 for in반복문을 쓰면

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

    • 여기서 key라고 작명된 부분은 반복문이 돌때마다 object자료 안에 있던 key값이 됨.
    • 콘솔창에 안녕이 2번 찍히게 됨.
    • 그리고 for in 반복문을 쓰면 object 자료 안에 있는 key와 value를 다 출력해볼 수 있음.

• 그렇다면 key말고 실제 value값을 꺼내보고 싶으면

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

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

---

arrow function

• function(){}과 arrow function은 같은 문법은 아니고 차이점이 존재함.

  • 함수 안의 this 값의 뜻이 달라짐.

    • 다시 말해 arrow function 안에서 this를 쓰면 바깥에 있던 this를 그대로 가져다가 쓰고
    • function안에서 this를 쓰면 알맞게 재정의가 됨.

    -즉, 이벤트 리스너 콜백함수 안에서의 this는 e.currentTarget이라는 의미이니

    • 그대로 쓰고 싶다면 arrow function가 아니라 일반 함수문에서 써야함.

• 구문 예시)

  pants.forEach(function(){
  })

  pants.forEach(()=>{
  })

  • 여기서는 같은 의미의 콜백함수임.

  • function() 대신 ()=>를 썻다라고 생각하면 될 듯.

---

array에서 쓸 수 있는 함수들 (sort, map, filter)

• sort() : 문자 정렬기능

  var array = [7,3,5,2,40];
  array.sort();

  • 만약 숫자 오름차순 정렬을 하고 싶다면 sort() 에 콜백함수를 넣어줘야 함

  var array = [7,3,5,2,40];
  array.sort(function(a,b){
  	return a - b;
  });

  • 위 코드의 작동원리
    1. a와 b는 array안의 자료
    2. return 양수 이면 a가 우측으로 가고
       return 음수 이면 b가 우측으로 감.

  • 그러면 숫자 내림차순 정렬은 return b - a 로만 수정해주면 됨!

  • 문자 가나다 정렬은 sort()만 있어도 되는데 문자를 역순으로 정렬하고 싶다하면

  var array = ['다','가','나']
      array.sort(function(a,b){
      return b.localeCompare(a);
      });

  • localeCompare()메서드 사용
    • localeCompare()은 두 문자열을 서로 비교하여 정렬목적으로 사용할 수 있는 숫자 값을 반환하는 자바스크립트 문자열 메서드.

  • 만약!! array가 아니고 object형에서 정렬을 하려고 하면?

    • { } - { } 를 해봤자 음수나 양수가 나오지 않음.
    • 그러면 { } 내부의 가격이라던지 숫자가 있는 값을 빼면 음수 또는 양수가 나오지 않을까??
      • 예시) return a.price - b.price

• filter() : array 자료에서 원하는 것만 필터처리

  var array = [ 7,3,5,2,40]
  var 새array = array.filter(function(a){
  return a < 4; → 조건식
  })

  • array 내 자료 중에 4보다 작은 값들만 남김!

    💥 주의사항!!

    • filter() 의 결과는 반드시 변수에 저장해서 써야 함.

    • .sort()는 원본을 변형하나 .filter()는 원본을 변형하지 않음.

• map() : array 자료 전부를 변형

  var array = [ 7,3,5,2,40]
  var 새array = array.map(function(a){
  return a * 4; → 조건식
  })

  • 새array 변수 내 array 값들이 4가 곱해진 상태로 변함.
  • 새array = [28,21,20,8,160]