배열과 반복문을 조합

for, forEach(), for...in, for...of
참고링크
forEach 참고링크

---

for

가장 기본적인 반복문으로 배열의 값을 출력

ex. 반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면?
배열 arr의 n번째 인덱스를 출력하자

console.log(arr[i])

조건

• 숫자(i)는 0부터 시작; let i = 0
• 숫자(i)를 언제까지 반복할까?
  ⇒ 배열의 길이보다 작을때까지; i < arr.length
• 숫자(i)은 1씩 증가한다; i++ (증감연산자)

let arr = [73, 98, 86, 61];
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
} // 73; 98; 86; 61;

---

for...of

for...of 는 배열을 포함한 iterable 객체를 순회하는 반복문으로
for...in 은 배열의 index를 참조하는 것과 다르게
for...of 는 배열의 element 값을 참조할 수 있음

• 배열의 모든 요소를 순회하고 싶을 때 사용
• 반복문 내부에서 index를 사용해야 할 때는 for...of문 불편
  참고링크

⇒ 반복 가능한 객체(배열, 문자열 등)에 사용할 수 있는 반복문으로 주어진 객체를 차례로 순회
⇒ for 문과 비슷하지만 () 안에 같이 반복에 사용할 변수명 , of , 반복할 객체 순으로 작성

let arr = [73, 98, 86, 61];
for (let e in arr) {
	console.log(e);
} // 73; 98; 86; 61;

---

for...in

객체(Object) 의 속성(property) 을 순회하는데 사용하는데
for...in 으로 객체의 Key를 가져올 수 있음.
배열(Array) 또한 객체(Object) 의 한 종류!
배열의 key는 index 라서 for...in 으로 배열의 index를 가져오게 됨
이렇게 가져온 index로 배열의 element를 참조해 배열의 값을 출력
⇒ 다만 일치하는 값은 아니고 해당 배열의 index가 출력

let arr = [73, 98, 86, 61];
for (let index in arr) {
	console.log(arr[index]);
} // 73; 98; 86; 61;

---

forEach()

이 메서드는 배열의 요소에 대해 파라미터로 입력받은 함수를 실행시키는 메서드로
배열 각 요소를 파라미터로 받아서 그 값을 화면에 출력
⇒ 원본 배열의 값을 변경하거나 값을 리턴하지 않음
함수와 메서드의 차이 참고링크
forEach 자세히

let arr = [73, 98, 86, 61];
arr.forEach(element => 
  console.log(element);
) // 73; 98; 86; 61;

let arr = [1, 2, 3];
arr.forEach((n, index) => { 
  console.log(`${index + 1}번째 요소 : ${n}`);
}) // 1번째 요소 : 1; 2번째 요소 : 2; 3번째 요소 : 3;

---

🤔 for...in 과 for...of 의 차이는 뭐지?

for...of 는 배열의 반복에서 사용되고
for...in 은 객체의 반복에서 사용된다.

만약 for...of 를 배열이 아닌 객체에 사용한다면
반복이 불가능하다는 TypeError를 뱉어냄

let obj = {
  a: 73,
  b: 98,
  c: 86,
  d: 61};
for (let element in arr) {
  console.log(element);
} // Uncaught TypeError: obj is not iterable

for...in 은 위에서 보듯이 배열에서도 사용이 가능하지만
출력되는 값이 일치하는 값은 아니고 해당 배열의 index를 출력한다.
⇒ 배열에서 각 요소에 접근하기 위해서는 forEach() 나 map() 을 쓰자