[React] JavaScript ( for .. of 와 for ..in 의 차이점) (기초문법)

React를 공부하기 전에 정보들을 찾아보니 ES6문법을 알아야 React를 사용하기에 수월하다는 글을 보았다.

 

React는 ES6 피처를 사용해 만들어졌기 때문에 ES6를 학습하면 React 코드를 잘 이해할 수 있다고 한다.

 

간략하게 공부하고 있는 기초 문법에 대해 이야기 해보고자 한다.

 

For in  vs  for of 차이점.

객체를 직접 만들었을 경우 for in을 사용해야함. 

 

위에 예시를 보자. 

 

for in을 썼을 경우 .

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var item in obj) {
  console.log(item) // a, b, c
}

//위에 사진의 경우 abc가 출력이됨. 

 반면 for of를 사용했을 경우 

 

var obj = {
  a: 1,
  b: 2,
  c: 3
};

for (var item of obj) {
  console.log(item) // Uncaught TypeError: obj is not iterable
}

//에러가 발생합니다. 

에러가 발생합니다.

 

for of를 사용한 예시를 보면. 

let array = [10,20,30,40];

for (let val of array){
 	console.log(val);

}

// 10,20,30,40 출력이 됨. 

반면 

for in을 사용했을 경우 .

var array = [10, 20, 30, 40];

for (var item in array) {
  console.log(item); 
  
  // 0, 1, 2, 3 이 출력
}

0,1,2,3이 출력되는 이유는 자바스크립트에서는 배열도 객체이기 때문에 그 객체의 키값이 출력이 되게 된다.!

 

정리를 해서 말하자면 

 

for in // 객체 순환
for of // 배열 순환 

 

이라고 말할 수 있겠다.