for ...in for ...of 반복문 비교!!! + forEach문 추가!

ES6부터 추가된

for ...in, for ...of 둘 다 반복문으로 사용 되는데!!

뭐가 다르길래 나눠놨을까?

 

하나는 객체를 탐색하고 또 다른 하나는 배열을 탐색한다!!

 

무엇이 객체를 탐색하냐

 

바로 for ...in !

const myObj = {
  a: 1,
  b: 2,
  c: 3
}

for(const item in myObj) {
  console.log(item) // a, b, c
}

 

for ...in을 쓰면

myObj 객체의 프로퍼티가 나오는 것을 확인 할 수 있다!!

 

 

 

---

 

 

 

그렇다면 for ...of !!

const myArray = [1, 2, 3];

for(const item of myArray) {
  console.log(item); // 1, 2, 3
}

배열 순환이 잘 되는구만!

 

궁금점!!

배열에 for ...in을 하면??

 

const myArray = [1, 2, 3];

for(const item in myArray) {
  console.log(item); // 0, 1, 2
}

오메나?!

 

이건 사실 자바스크립트에서 배열도 객체기 때문에 그 객체의 키 값에 해당하는게 나오는거야

배열로 따졌을 때 index라고 생각하면 돼!

 

 

---

 

 

추가추가 !!

객체(Object)의 키와 키 값을 가져오려면!

for (var key in obj) {
    // Javascript의 for-in문을 사용해 key를 뽑아낼 수 있다.
    // key 변수에는 obj가 가진 key가 하나씩 들어온다.
    
    // 가져온 key를 이용해 value를 추출하자.
    // 두 가지 형식이 존재한다.
    //     1. obj.a
    //     2. obj[a]
    console.log(obj[key]);
}

이 방식을 사용하면 돼 !!

 

만약 객체가 가진 모든 key를 배열로 반환하려면

Object.keys(obj);

이렇게 사용!!

 

 

---

 

정리!

이것만 기억하자!

 

for ...in 은 객체 !

for ...of 는 배열 !

 

 

---

 

 

forEach문 추가!!!!!!!!!!!!!!!!!!!

 

우선 forEach는 배열(Array)에서만 사용 가능한 메소드!

 

예제 고고!

const myArray = ['a', 'b', 'c'];

myArray.forEach(element => console.log(element));

 

난 아직 ES6 초보니까 풀어서 볼게ㅎㅎ;;

myArray.forEach(function (element) {
  return console.log(element);
});

이거와 같아!

참고(ES6 → ES5 변환 사이트)

 

 

구문은 이래!!

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

 

 

이건 매개변수!!!

callback : 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받아!

 

• currentValue : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : forEach()를 호출한 배열
• thisArg : callback을 실행할 때 this로 사용할 값

 

 

반환 값은!

 

undefined!!

 

---

 

 

forEach()는 주어진 callback를 배열에 있는 각 요소에 대해 오름차순(1→2→3→4...)으로 한 번씩 실행해!

삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않아! (ex. 희소배열 (찾아보자...))

callback은 다음 세 인수와 함께 호출 돼!

• 요소 값
• 요소 인덱스
• 순회 중인 배열

thisArg 매개변수를 forEach()에 제공한 경우 callback을 호출할 때 전달해서 this의 값으로 쓰여

전달하지 않으면 undefined!

최종 this 값은 함수의 this를 결정하는 평소 규칙을 따르지!

 

 

forEach()로 처리할 요소의 범위는 최초 callback 호출 전에 설정 돼!

forEach() 호출을 시작 한 뒤 배열에 추가한 요소는 callback이 실행되지 않아

배열의 기존 요소값이 바뀌었을 때, callback에 전달하는 값은 forEach()가 요소를 방문한 시점의 값을 사용해!

방문하기 전에 삭제한 요소는 방문하지 않아

 

forEach()는 각 배열 요소에 대해 한 번씩 callback 함수를 실행해!

map()과 reduce()와는 다르게 undefined를 반환하기 때문에 메소드 체인의 중간에 사용할 수 없어!

 

forEach()는 배열을 변경시키지 않아

하지만 callback이 변형시킬 수는 있지!

 

예외를 던지지 않으면 forEach()를 중간에 멈출 수 없어!

중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐 수도 있어!!

 

 

---

 

 

출처 : velog.io/@eomttt/for-...in-for-...of-%EC%B0%A8%EC%9D%B4

for ...in, for ...of 차이

출처 : pangtrue.tistory.com/185

[Javascript] 객체(Object)의 키와 값 가져오기

출처 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN