for...of 명령문

: 반복가능한 객체(array, map, set, string, typedArray, arguments 객체 등을 포함)에 대해서 반복하고, 각 개별 속성값에 대해 실행되는 문이 있는 루프를 생성한다.

• for...of 명령문은 loop를 멈출 수도 있다.
• forEach와의 차이점
  1) forEach는 array에서만 사용할 수 있다.
  2) forEach는 loop를 멈출 수 없다.
  3) for...of는 변수를 const로 선언할지, let으로 선언할지 선택할 수 있다.

1.

ex)
for (let i = 0; i < 20; i++) {
  console.log("I love Kimchi");
};
// "I love Kimchi" 가 20번 출력됨.
// why? 처음에 i = 0 이고,
// i < 20 이면, console.log("I love Kimchi");가 실행되며, i에 1을 더해주기 때문에
// i에 1을 더한 값이, i < 20이 되기전까지 계속 실행된다. 

• 출력값
  

2.

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
for (let i = 0; i < friends.length; i++) {
  console.log("I love Kimchi");
};

• 출력값
  

3.

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
const addHeart = c => console.log(c);
// c = current item
friends.forEach(addHeart);

=

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
friends.forEach(friend => console.log(friend));

• 출력값
  

+ 3번 예시 코드를 for...of로 작성한 예시 코드.

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
for (const friend of friends) {
  console.log(friend);
};

• 출력값
  

4.

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
const addHeart = (c, i) => console.log(c, i);
// c = current item
// i = index
friends.forEach(addHeart);

• 출력값
  

5.

ex)
const friends = [“Nico”, “Lynn”, “ha”, “hu”];
const addHeart = (c, i, a) => console.log(c, i, a);
// c = current item
// i = index
// a = current array
friends.forEach(addHeart);

• 출력값
  

+ 특정 요소를 찾으면 loop를 멈추는 예시 코드.

• 특정 요소 = "Dal"

ex)
const friends = [“Nico”, “Lynn”, “Japan Guy”, “Autumn”, “Dal”, “Mark”, “Pipe”, “Theo”];
for (const friend of friends) {
  if(friend === "Dal") {
    break;
  } else {
    console.log(friend);
  }
};  

• 출력값