for in

• for문에 선언된 파라미터는 key값을 나타낸다.

• key와 value를 대조가 가능하고 key와 value를 동시에 사용할 수 있다.

• 배열 예시
  : 배열은 key를 인덱스로 가지기 때문에 불필요한 정보를 얻을 수 있다.

  const 대중교통종류=['🚋', '🚕', '🚄', '🛫', '🚀'];
  for(let 대중교통 in 대중교통종류){
  	console.log(대중교통);
  }
  // 0
  // 1
  // 2
  // 3
  // 4
  
  for(let 대중교통 in 대중교통종류){
  	console.log(대중교통종류[대중교통]);
  }
  // '🚋'
  // '🚕'
  // '🚄'
  // '🛫'
  // '🚀'

• 객체 예시
  : key와 value가 둘 다 사용되는 객체에 활용하는 것이 좋을 것 같다.

  const 대중교통요금표={
      '🚋' : 1250,
      '🚕' : 3600,
      '🚄' : 30000,
      '🛫' : 100000,
      '🚀' : 99999999,
  };
  
  for(let 대중교통 in 대중교통요금표){
      console.log(대중교통);
  }
  // '🚋'
  // '🚕'
  // '🚄'
  // '🛫'
  // '🚀'
  
  for(let 대중교통 in 대중교통요금표){
      console.log(`${대중교통}의 요금은 ${대중교통요금표[대중교통]}원입니다.`);
  }
  // 🚋의 요금은 1250원입니다.
  // 🚕의 요금은 3600원입니다.
  // 🚄의 요금은 30000원입니다.
  // 🛫의 요금은 100000원입니다.
  // 🚀의 요금은 99999999원입니다.

for of

• 반복 가능한 객체로 인식되는 것들을 사용할 수 있는 반복문이다.( 배열, 문자열, map, set 등)

  const 네모들 = ['🟧', '🟨', '🟩', '🟦', '🟪'];
  for(let 네모 of 네모들){
      console.log(네모);
  }
  // '🟧'
  // '🟨'
  // '🟩'
  // '🟦'
  // '🟪'

• 기존의 for문 보다 가독성이 좋고 간단하다.

  // 이중 배열일 때 
  const colors = [
      ['🧡', '🟠', '🟧'],
      ['💛', '🟡', '🟨'],
      ['💚', '🟢', '🟩'],
  ];
  // for문
  for (let i = 0; i < colors.length; i++) {
      const shape = colors[i];
      for (let j = 0; j < shape.length; j++) {
          console.log(shape[j]);
      }
  }
  
  // for of
  for(let color of colors){
      for(let shape of color){
        console.log(shape);
      }
  }
  
  // 결과 값
  // '🧡'
  // '🟠'
  // '🟧'
  // '💛'
  // '🟡'
  // '🟨'
  // '💚'
  // '🟢'
  // '🟩

• 일반적인 {key:value}형태의 객체는 반복 가능한 객체는 아니지만 Object의 메소드를 사용하여 key, value, [key,value] 형식으로 배열로 반환하여 for of를 사용할 수 있다.

Object의 keys, value 반환 메소드

• 객체에서 for of을 사용하기 위해서 아래의 메소드를 사용해 배열로 반환한다.

• IE 지원

  • Object.keys IE9 ~ IE11 지원
  • Object.values 미지원
  • Object.entries 미지원

• Object.keys(객체) / Object.values(객체) / Object.entries(객체)

  const 대중교통요금표={
      '🚋' : 1250,
      '🚕' : 3600,
      '🚄' : 30000,
      '🛫' : 100000,
      '🚀' : 99999999,
  };
  
  Object.keys(대중교통요금표);
  // ['🚋', '🚕', '🚄', '🛫', '🚀']
  
  Object.values(대중교통요금표);
  // [1250, 3600, 30000, 100000, 99999999]
  
  Object.entries(대중교통요금표);
  // [
  //   ['🚋', 1250],
  //   ['🚕', 3600],
  //   ['🚄', 30000],
  //   ['🛫', 100000],
  //   ['🚀', 99999999]
  // ]